update

.github/workflows/macos.yml

@@ -17,7 +17,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-11.0]
-        qt_ver: [5.15.2]
+        qt_ver: [6.4.3]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -30,10 +30,12 @@ jobs:
           sudo xcode-select --print-path
           sudo xcode-select --switch /Library/Developer/CommandLineTools       
       - name: Install Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           cached: 'false'
+          arch: ${{ matrix.qt_arch }}
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       - uses: actions/checkout@v2
         with:
           fetch-depth: 1

.github/workflows/ubuntu.yml

@@ -19,16 +19,18 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        qt_ver: [5.15.2]
+        qt_ver: [6.4.3]
         qt_arch: [gcc_64]
     env:
       targetName: example
     steps:
       - name: Install Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           cached: 'false'
+          arch: ${{ matrix.qt_arch }}
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       - name: ubuntu install GL library
         run: sudo apt-get install -y libglew-dev libglfw3-dev qml-module-qtquick-controls qml-module-qtquick-controls2
       - uses: actions/checkout@v2

.github/workflows/windows.yml

@@ -21,12 +21,7 @@ jobs:
       # 矩阵配置
       matrix:
         include:
-          # 5.15.2 参考 https://mirrors.cloud.tencent.com/qt/online/qtsdkrepository/windows_x86/desktop/qt5_5152/
+          - qt_ver: 6.4.3          
-          - qt_ver: 5.15.2
-            qt_arch: win32_msvc2019
-            msvc_arch: x86
-            qt_arch_install: msvc2019
-          - qt_ver: 5.15.2          
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
             qt_arch_install: msvc2019_64          
@@ -38,15 +33,12 @@ jobs:
       # 安装Qt
       - name: Install Qt
         # 使用外部action。这个action专门用来安装Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
         with:
-          # Version of Qt to install
           version: ${{ matrix.qt_ver }}
-          # Target platform for build
-          # target: ${{ matrix.qt_target }}
           arch: ${{ matrix.qt_arch }}
           cached: 'false'
-          aqtversion: '==2.0.5'          
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       # 拉取代码
       - uses: actions/checkout@v2
         with:

.gitignore

@@ -32,4 +32,5 @@ target_wrapper.*
 CMakeLists.txt.user*
 
 src/build-preset/plugins.qmltypes
-bin
+bin
+.DS_Store

CMakeLists.txt

@@ -0,0 +1,4 @@
+cmake_minimum_required(VERSION 3.16)
+project(FluentUI VERSION 0.1 LANGUAGES CXX)
+add_subdirectory(src)
+add_subdirectory(example)

License

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 zhuzichu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -65,9 +65,9 @@
 
 # 部分效果预览
 
-## 一个聊天Demo，调用了ChatGPT的接口
+## 首页
 
-![](doc/preview/chatgpt.png)
+![](doc/preview/home.png)
 
 ## 各种Button按钮
 

example/App.qml

@@ -1,13 +1,15 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtGraphicalEffects 1.15
+import QtMultimedia
-import FluentUI 1.0
+import FluentUI
 
 Window {
     id:app
     color: "#00000000"
+    //初始化一个MediaPlayer，解决macos切换到T_MediaPalyer页面崩溃问题
+    MediaPlayer{}
     Component.onCompleted: {
         FluApp.init(app,properties)
         FluTheme.frameless = ("windows" === Qt.platform.os)
@@ -17,6 +19,7 @@ Window {
             "/about":"qrc:/page/AboutPage.qml",
             "/login":"qrc:/page/LoginPage.qml",
             "/chat":"qrc:/page/ChatPage.qml",
+            "/media":"qrc:/page/MediaPage.qml",
         }
         FluApp.initialRoute = "/"
         FluApp.run()

example/CMakeLists.txt

@@ -0,0 +1,69 @@
+cmake_minimum_required(VERSION 3.16)
+project(example)
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+set(CMAKE_AUTOUIC ON)
+
+set(CMAKE_CXX_STANDARD 17)
+
+find_package(Qt6 COMPONENTS Core Quick QuickControls2 Concurrent Network Multimedia REQUIRED)
+
+set(SOURCES
+    ChatController.cpp
+    main.cpp
+)
+
+set(HEADERS
+    ChatController.h
+)
+
+set(RESOURCES
+    qml.qrc
+)
+
+set(RC_ICONS
+    favicon.ico
+)
+
+qt_add_resources(QT_RESOURCES ${RESOURCES})
+
+if(WIN32)
+    if(QT_ARCH EQUAL 32)
+        set(COPYDLL ${CMAKE_CURRENT_SOURCE_DIR}/../third/Win_x86/*.dll ${DESTDIR})
+    else()
+        set(COPYDLL ${CMAKE_CURRENT_SOURCE_DIR}/../third/Win_x64/*.dll ${DESTDIR})
+    endif()
+    if(QMAKE_CC STREQUAL "cl")
+        set(QMAKE_PRE_LINK "${QMAKE_COPY} ${COPYDLL}")
+    else()
+        set(QMAKE_PRE_LINK "${QMAKE_COPY} ${COPYDLL}")
+    endif()
+endif()
+
+add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS} ${QT_RESOURCES} ${RC_ICONS})
+
+target_compile_definitions(${PROJECT_NAME} PRIVATE
+    QT_DEPRECATED_WARNINGS
+    QT_NO_WARNING_OUTPUT
+)
+
+target_link_libraries(${PROJECT_NAME} PRIVATE
+    Qt6::Core
+    Qt6::Quick
+    Qt6::QuickControls2
+    Qt6::Concurrent
+    Qt6::Network
+    Qt6::Multimedia
+)
+
+if(WIN32)
+    target_compile_definitions(${PROJECT_NAME} PRIVATE UNICODE WIN32 _WINDOWS)
+    target_link_libraries(${PROJECT_NAME} PRIVATE dwmapi user32)
+endif()
+
+if(APPLE)
+    set_target_properties(${PROJECT_NAME} PROPERTIES
+        MACOSX_BUNDLE_INFO_PLIST Info.plist
+    )
+endif()

example/T_Awesome.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluContentPage {
 

example/T_Badge.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_Buttons.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
     title:"Buttons"
@@ -27,7 +27,6 @@ FluScrollablePage{
             disabled:text_button_switch.selected
             text:"Text Button"
             onClicked: {
-                console.debug(Screen.devicePixelRatio)
                 showInfo("点击Text Button")
             }
             anchors{

example/T_CalendarPicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_Carousel.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_CheckBox.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 
@@ -13,7 +13,11 @@ FluScrollablePage{
 
     FluCheckBox{
         Layout.topMargin: 20
-        Layout.leftMargin: 10
-        Layout.bottomMargin: 20
     }
+
+    FluCheckBox{
+        Layout.topMargin: 20
+        text:"Text"
+    }
+
 }

example/T_ColorPicker.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_DatePicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_Dialog.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_Expander.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -46,13 +45,15 @@ FluScrollablePage{
         headerText:"打开一个滑动文本框"
         Item{
             anchors.fill: parent
-            ScrollView{
+            Flickable{
                 id:scrollview
                 width: parent.width
                 height: parent.height
-                contentWidth: parent.width
+                contentWidth: width
+                contentHeight: text_info.height
+                ScrollBar.vertical: FluScrollBar {}
                 FluText{
-                    id:test
+                    id:text_info
                     width: scrollview.width
                     wrapMode: Text.WrapAnywhere
                     padding: 14

example/T_Home.qml

@@ -1,8 +1,9 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import "qrc:///global/"
+import FluentUI
 
 FluScrollablePage{
 
@@ -56,7 +57,6 @@ FluScrollablePage{
                 bottom: parent.bottom
             }
             orientation: ListView.Horizontal
-            boundsBehavior: ListView.StopAtBounds
             height: 240
             model: model_header
             header: Item{height: 10;width: 10}
@@ -101,7 +101,7 @@ FluScrollablePage{
                         }
                         FluText{
                             text: model.title
-                            fontStyle: FluText.BodyLarge
+                            fontStyle: FluText.Body
                             Layout.topMargin: 20
                             Layout.leftMargin: 20
                         }
@@ -110,7 +110,7 @@ FluScrollablePage{
                             Layout.topMargin: 5
                             Layout.preferredWidth: 160
                             Layout.leftMargin: 20
-                            color: FluColors.Grey100
+                            color: FluColors.Grey120
                             font.pixelSize: 12
                             wrapMode: Text.WrapAnywhere
                         }
@@ -129,7 +129,7 @@ FluScrollablePage{
                         id:item_mouse
                         anchors.fill: parent
                         hoverEnabled: true
-                        onWheel: {
+                        onWheel: (wheel)=>{
                             if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
                             else scrollbar_header.increase()
                         }
@@ -142,44 +142,6 @@ FluScrollablePage{
         }
     }
 
-    ListModel{
-        id:model_added
-        ListElement{
-            title:"TabView"
-            icon:"qrc:/res/image/control/TabView.png"
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-        }
-        ListElement{
-            title:"MediaPlayer"
-            icon:"qrc:/res/image/control/MediaPlayerElement.png"
-            desc:"A control to display video and image content"
-        }
-    }
-
-    ListModel{
-        id:model_update
-        ListElement{
-            title:"Buttons"
-            icon:"qrc:/res/image/control/Button.png"
-             desc:"A control that responds to user input and raisesa Click event."
-        }
-        ListElement{
-            title:"InfoBar"
-            icon:"qrc:/res/image/control/InfoBar.png"
-             desc:"An inline message to display app-wide statuschange information."
-        }
-        ListElement{
-            title:"Slider"
-            icon:"qrc:/res/image/control/Slider.png"
-             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-        }
-        ListElement{
-            title:"CheckBox"
-            icon:"qrc:/res/image/control/Checkbox.png"
-             desc:"A control that a user can select or clear."
-        }
-    }
-
     Component{
         id:com_item
         Item{
@@ -211,7 +173,7 @@ FluScrollablePage{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: model.icon
+                    source: modelData.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
@@ -221,8 +183,8 @@ FluScrollablePage{
 
                 FluText{
                     id:item_title
-                    text:model.title
+                    text:modelData.title
-                    fontStyle: FluText.Subtitle
+                    fontStyle: FluText.BodyStrong
                     anchors{
                         left: item_icon.right
                         leftMargin: 20
@@ -232,10 +194,11 @@ FluScrollablePage{
 
                 FluText{
                     id:item_desc
-                    text:model.desc
+                    text:modelData.desc
-                    color:FluColors.Grey100
+                    color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
+                    fontStyle: FluText.Caption
                     maximumLineCount: 2
                     anchors{
                         left: item_title.left
@@ -246,12 +209,25 @@ FluScrollablePage{
                     }
                 }
 
+                Rectangle{
+                    height: 12
+                    width: 12
+                    radius:  6
+                    color: FluTheme.primaryColor.dark
+                    anchors{
+                        right: parent.right
+                        top: parent.top
+                        rightMargin: 14
+                        topMargin: 14
+                    }
+                }
+
                 MouseArea{
                     id:item_mouse
                     anchors.fill: parent
                     hoverEnabled: true
                     onClicked: {
-                        rootwindow.startPageByTitle(model.title)
+                        ItemsOriginal.startPageByItem(modelData)
                     }
                 }
             }
@@ -260,7 +236,7 @@ FluScrollablePage{
 
     FluText{
         text: "Recently added samples"
-        fontStyle: FluText.TitleLarge
+        fontStyle: FluText.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
@@ -270,14 +246,14 @@ FluScrollablePage{
         implicitHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
-        boundsBehavior: GridView.StopAtBounds
+        model:ItemsOriginal.getRecentlyAddedData()
-        model:model_added
+        interactive: false
         delegate: com_item
     }
 
     FluText{
         text: "Recently updated samples"
-        fontStyle: FluText.TitleLarge
+        fontStyle: FluText.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
@@ -287,8 +263,8 @@ FluScrollablePage{
         implicitHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
-        boundsBehavior: GridView.StopAtBounds
+        interactive: false
-        model: model_update
+        model: ItemsOriginal.getRecentlyUpdatedData()
         delegate: com_item
     }
 

example/T_InfoBar.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_MediaPlayer.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -30,17 +29,28 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left:parent.left
             }
-
             FluMediaPlayer{
                 id:player
-//                source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
                 source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-//                source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
             }
-
         }
     }
 
+    FluArea{
+        width: parent.width
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluButton{
+            text:"跳转到视频播放器窗口"
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked:{
+                FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
+            }
+        }
+
+    }
 
 }
 

example/T_Menu.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_MultiWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_Progress.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_Rectangle.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -53,7 +52,7 @@ FluScrollablePage{
     }
     FluText{
         text:"配合图片使用"
-        fontStyle: FluText.Subtitle
+        fontStyle: FluText.SubTitle
         Layout.topMargin: 20
     }
     RowLayout{

example/T_Slider.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 
@@ -17,7 +17,7 @@ FluScrollablePage{
         Layout.leftMargin: 10
     }
     FluSlider{
-        orientation:FluSlider.Vertical
+        vertical:true
         Layout.topMargin: 20
         Layout.leftMargin: 10
         Layout.bottomMargin: 20

example/T_TabView.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 
@@ -11,6 +11,8 @@ FluScrollablePage{
     rightPadding:10
     bottomPadding:20
 
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
     Component{
         id:com_page
         Rectangle{
@@ -19,26 +21,93 @@ FluScrollablePage{
         }
     }
 
+    function newTab(){
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
+    }
+
     Component.onCompleted: {
-        var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+        newTab()
-        for(var i =0;i<colors.length;i++){
+        newTab()
-            tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
+        newTab()
-        }
     }
 
     FluArea{
         width: parent.width
         Layout.topMargin: 20
-        height: 400
+        height: 50
         paddings: 10
-
+        RowLayout{
-
+            spacing: 14
-        FluTabView{
+            FluDropDownButton{
-            id:tab_view
+                id:btn_tab_width_behavior
+                Layout.preferredWidth: 140
+                text:"Equal"
+                items:[
+                    FluMenuItem{
+                        text:"Equal"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Equal
+                        }
+                    },
+                    FluMenuItem{
+                        text:"SizeToContent"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Compact"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Compact
+                        }
+                    }
+                ]
+            }
+            FluDropDownButton{
+                id:btn_close_button_visibility
+                text:"Always"
+                 Layout.preferredWidth: 120
+                items:[
+                    FluMenuItem{
+                        text:"Nerver"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Nerver
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Always"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Always
+                        }
+                    },
+                    FluMenuItem{
+                        text:"OnHover"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.OnHover
+                        }
+                    }
+                ]
+            }
         }
-
-
     }
 
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 5
+        height: 400
+        paddings: 10
+        FluTabView{
+            id:tab_view
+            onNewPressed:{
+                newTab()
+            }
+        }
+    }
 
 }

example/T_TextBox.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -18,7 +17,7 @@ FluScrollablePage{
         Layout.preferredWidth: 300
         disabled:toggle_switch.selected
     }
-    FluMultiLineTextBox{
+    FluMultilineTextBox{
         Layout.topMargin: 20
         Layout.preferredWidth: 300
         placeholderText: "多行输入框"
@@ -26,7 +25,7 @@ FluScrollablePage{
     }
     FluAutoSuggestBox{
         Layout.topMargin: 20
-        values:generateRandomNames(100)
+        items:generateRandomNames(100)
         placeholderText: "AutoSuggestBox"
         Layout.preferredWidth: 300
         disabled:toggle_switch.selected
@@ -52,7 +51,7 @@ FluScrollablePage{
         }
         for (let i = 0; i < numNames; i++) {
             const name = generateRandomName();
-            names.push(name);
+            names.push({title:name});
         }
         return names;
     }

example/T_Theme.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_TimePicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_ToggleSwitch.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -17,6 +16,6 @@ FluScrollablePage{
     }
     FluToggleSwitch{
         Layout.topMargin: 20
-        text:"Disabled"
+        text:"Text"
     }
 }

example/T_Tooltip.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_TreeView.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluContentPage {
 

example/T_Typography.qml

@@ -1,18 +1,18 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluContentPage {
 
     title: "Typography"
-    property int textSize: 13
+    property int textSize: FluTheme.textSize
     leftPadding:10
     rightPadding:10
     bottomPadding:20
 
     Component.onCompleted: {
-        slider.seek(31)
+        slider.seek(0)
     }
 
     ScrollView{
@@ -44,13 +44,7 @@ FluContentPage {
                 text:"Subtitle"
                 padding: 0
                 pixelSize: textSize
-                fontStyle: FluText.Subtitle
+                fontStyle: FluText.SubTitle
-            }
-            FluText{
-                text:"Body Large"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.BodyLarge
             }
             FluText{
                 text:"Body Strong"
@@ -76,7 +70,7 @@ FluContentPage {
 
     FluSlider{
         id:slider
-        orientation:FluSlider.Vertical
+        vertical:true
         anchors{
             right: parent.right
             rightMargin: 45
@@ -84,7 +78,7 @@ FluContentPage {
             topMargin: 30
         }
         onValueChanged:{
-            textSize = value/100*16+8
+            textSize = value/100*6+FluTheme.textSize
         }
     }
 

example/example.pro

@@ -1,5 +1,5 @@
-QT += quick concurrent network multimedia
+QT += quick quickcontrols2 concurrent network multimedia
-CONFIG += c++11
+CONFIG += c++17
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
 
 HEADERS += \

example/global/ItemsFooter.qml

@@ -0,0 +1,21 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+FluObject{
+    id:footer_items
+    FluPaneItemSeparator{}
+    FluPaneItem{
+        title:"意见反馈"
+        onTap:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
+        }
+    }
+    FluPaneItem{
+        title:"关于"
+        onTap:{
+            FluApp.navigate("/about")
+        }
+    }
+}

example/global/ItemsOriginal.qml

@@ -0,0 +1,299 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+
+FluObject{
+
+    property var navigationView
+
+    FluPaneItem{
+        title:"Home"
+        icon:FluentIcons.Home
+        onTap:{
+            navigationView.push("qrc:/T_Home.qml")
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Basic input"
+        icon:FluentIcons.CheckboxComposite
+
+        FluPaneItem{
+            title:"Buttons"
+            image:"qrc:/res/image/control/Button.png"
+            recentlyUpdated:true
+            desc:"A control that responds to user input and raisesa Click event."
+            onTap:{
+                navigationView.push("qrc:/T_Buttons.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Slider"
+            image:"qrc:/res/image/control/Slider.png"
+            recentlyUpdated:true
+            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            onTap:{
+                navigationView.push("qrc:/T_Slider.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"CheckBox"
+            image:"qrc:/res/image/control/Checkbox.png"
+            recentlyUpdated:true
+            desc:"A control that a user can select or clear."
+            onTap:{
+                navigationView.push("qrc:/T_CheckBox.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"ToggleSwitch"
+            onTap:{
+                navigationView.push("qrc:/T_ToggleSwitch.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Form"
+        icon:FluentIcons.GridView
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                navigationView.push("qrc:/T_TextBox.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                navigationView.push("qrc:/T_TimePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"DatePicker"
+            onTap:{
+                navigationView.push("qrc:/T_DatePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"CalendarPicker"
+            onTap:{
+                navigationView.push("qrc:/T_CalendarPicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"ColorPicker"
+            onTap:{
+                navigationView.push("qrc:/T_ColorPicker.qml")
+            }
+        }
+    }
+
+
+    FluPaneItemExpander{
+        title:"Surface"
+        icon:FluentIcons.SurfaceHub
+
+        FluPaneItem{
+            title:"InfoBar"
+            image:"qrc:/res/image/control/InfoBar.png"
+            recentlyUpdated:true
+            desc:"An inline message to display app-wide statuschange information."
+            onTap:{
+                navigationView.push("qrc:/T_InfoBar.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                navigationView.push("qrc:/T_Progress.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                navigationView.push("qrc:/T_Badge.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                navigationView.push("qrc:/T_Rectangle.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Carousel"
+            onTap:{
+                navigationView.push("qrc:/T_Carousel.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                navigationView.push("qrc:/T_Expander.qml")
+            }
+        }
+
+    }
+
+    FluPaneItemExpander{
+        title:"Popus"
+        icon:FluentIcons.ButtonMenu
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                navigationView.push("qrc:/T_Dialog.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Tooltip"
+            onTap:{
+                navigationView.push("qrc:/T_Tooltip.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                navigationView.push("qrc:/T_Menu.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Navigation"
+        icon:FluentIcons.AllApps
+        FluPaneItem{
+            title:"TabView"
+            image:"qrc:/res/image/control/TabView.png"
+            recentlyAdded:true
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            onTap:{
+                navigationView.push("qrc:/T_TabView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                navigationView.push("qrc:/T_TreeView.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"MultiWindow"
+            onTap:{
+                navigationView.push("qrc:/T_MultiWindow.qml")
+            }
+        }
+    }
+
+
+    FluPaneItemExpander{
+        title:"Theming"
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                navigationView.push("qrc:/T_Theme.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                navigationView.push("qrc:/T_Awesome.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                navigationView.push("qrc:/T_Typography.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Media"
+        icon:FluentIcons.Media
+        FluPaneItem{
+            title:"MediaPlayer"
+            image:"qrc:/res/image/control/MediaPlayerElement.png"
+            recentlyAdded:true
+            desc:"A control to display video and image content."
+            onTap:{
+                navigationView.push("qrc:/T_MediaPlayer.qml")
+            }
+        }
+    }
+
+    function getRecentlyAddedData(){
+        var arr = []
+        for(var i=0;i<children.length;i++){
+            var item = children[i]
+            if(item instanceof FluPaneItem && item.recentlyAdded){
+                arr.push(item)
+            }
+            if(item instanceof FluPaneItemExpander){
+                for(var j=0;j<item.children.length;j++){
+                    var itemChild = item.children[j]
+                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
+                        arr.push(itemChild)
+                    }
+                }
+            }
+        }
+        return arr
+    }
+
+    function getRecentlyUpdatedData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem){
+                arr.push({title:item.title,key:item.key})
+            }
+        }
+        return arr
+    }
+
+    function startPageByItem(data){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item =  items[i]
+            if(item.key === data.key){
+                if(navigationView.getCurrentIndex() === i){
+                    return
+                }
+                item.tap()
+                navigationView.setCurrentIndex(i)
+                if(item.parent){
+                item.parent.isExpand = true
+                }
+                return
+            }
+        }
+    }
+
+}

example/global/qmldir

@@ -0,0 +1,2 @@
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsFooter 1.0 ItemsFooter.qml

example/main.cpp

@@ -3,12 +3,13 @@
 #include <QQmlContext>
 #include <QDir>
 #include <QQuickWindow>
+#include <QQuickStyle>
 #include <QProcess>
 #include "ChatController.h"
 
 QMap<QString, QVariant> properties(){
     QMap<QString, QVariant> map;
-//    map["installHelper"] = QVariant::fromValue(QVariant::fromValue(InstallHelper::getInstance()));
+    //    map["installHelper"] = QVariant::fromValue(QVariant::fromValue(InstallHelper::getInstance()));
     return map;
 }
 
@@ -17,8 +18,7 @@ int main(int argc, char *argv[])
     QCoreApplication::setOrganizationName("ZhuZiChu");
     QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QCoreApplication::setApplicationName("FluentUI");
-    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QQuickStyle::setStyle("Basic");
-//    QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
     QGuiApplication app(argc, argv);
     QQmlApplicationEngine engine;
 

example/page/AboutPage.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 FluWindow {
 
@@ -17,6 +17,7 @@ FluWindow {
     FluAppBar{
         id:appbar
         title:"关于"
+        width:parent.width
     }
 
     ColumnLayout{
@@ -35,7 +36,7 @@ FluWindow {
                 fontStyle: FluText.Title
             }
             FluText{
-                text:"v1.1.5"
+                text:"v1.1.8"
                 fontStyle: FluText.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/page/ChatPage.qml

@@ -1,9 +1,9 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import Controller 1.0
+import Controller
-import QtQuick.Dialogs 1.3
+import QtQuick.Dialogs
 
 FluWindow {
 
@@ -43,6 +43,7 @@ FluWindow {
     FluAppBar{
         id:appbar
         title:"ChatGPT"
+        width:parent.width
     }
 
     Component{

example/page/LoginPage.qml

@@ -1,6 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import QtQuick.Controls
+import FluentUI
 
 FluWindow {
 
@@ -17,13 +18,14 @@ FluWindow {
 
     onInitArgument:
         (argument)=>{
-            textbox_uesrname.text = argument.username
+            textbox_uesrname.updateText(argument.username)
             textbox_password.focus =  true
         }
 
     FluAppBar{
         id:appbar
         title:"登录"
+        width:parent.width
     }
 
     ColumnLayout{
@@ -33,10 +35,9 @@ FluWindow {
             verticalCenter: parent.verticalCenter
         }
 
-
         FluAutoSuggestBox{
             id:textbox_uesrname
-            values:["Admin","User"]
+            items:[{title:"Admin"},{title:"User"}]
             placeholderText: "请输入账号"
             Layout.preferredWidth: 260
             Layout.alignment: Qt.AlignHCenter

example/page/MainPage.qml

@@ -1,10 +1,9 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtGraphicalEffects 1.15
+import "qrc:///global/"
-
+import FluentUI
-import FluentUI 1.0
 
 FluWindow {
     id:rootwindow
@@ -12,263 +11,39 @@ FluWindow {
     height: 640
     title: "FluentUI"
     minimumWidth: 520
-    minimumHeight: 400
+    minimumHeight: 460
 
     FluAppBar{
         id:appbar
         z:10
         showDark: true
-    }
+        width:parent.width
-
-    FluObject{
-        id:original_items
-
-        FluPaneItem{
-            title:"Home"
-            icon:FluentIcons.Home
-            onTap:{
-                nav_view.push("qrc:/T_Home.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Inputs"
-        }
-
-        FluPaneItem{
-            title:"Buttons"
-            onTap:{
-                nav_view.push("qrc:/T_Buttons.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Slider"
-            onTap:{
-                nav_view.push("qrc:/T_Slider.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"CheckBox"
-            onTap:{
-                nav_view.push("qrc:/T_CheckBox.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"ToggleSwitch"
-            onTap:{
-                nav_view.push("qrc:/T_ToggleSwitch.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Form"
-        }
-
-        FluPaneItem{
-            title:"TextBox"
-            onTap:{
-                nav_view.push("qrc:/T_TextBox.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"TimePicker"
-            onTap:{
-                nav_view.push("qrc:/T_TimePicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"DatePicker"
-            onTap:{
-                nav_view.push("qrc:/T_DatePicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"CalendarPicker"
-            onTap:{
-                nav_view.push("qrc:/T_CalendarPicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"ColorPicker"
-            onTap:{
-                nav_view.push("qrc:/T_ColorPicker.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Surface"
-        }
-
-        FluPaneItem{
-            title:"InfoBar"
-            onTap:{
-                nav_view.push("qrc:/T_InfoBar.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Progress"
-            onTap:{
-                nav_view.push("qrc:/T_Progress.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Badge"
-            onTap:{
-                nav_view.push("qrc:/T_Badge.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Rectangle"
-            onTap:{
-                nav_view.push("qrc:/T_Rectangle.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Carousel"
-            onTap:{
-                nav_view.push("qrc:/T_Carousel.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Expander"
-            onTap:{
-                nav_view.push("qrc:/T_Expander.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Popus"
-        }
-
-        FluPaneItem{
-            title:"Dialog"
-            onTap:{
-                nav_view.push("qrc:/T_Dialog.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Tooltip"
-            onTap:{
-                nav_view.push("qrc:/T_Tooltip.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Menu"
-            onTap:{
-                nav_view.push("qrc:/T_Menu.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Navigation"
-        }
-
-        FluPaneItem{
-            title:"TabView"
-            onTap:{
-                nav_view.push("qrc:/T_TabView.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"TreeView"
-            onTap:{
-                nav_view.push("qrc:/T_TreeView.qml")
-            }
-        }
-
-
-        FluPaneItem{
-            title:"MultiWindow"
-            onTap:{
-                nav_view.push("qrc:/T_MultiWindow.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Theming"
-        }
-
-        FluPaneItem{
-            title:"Theme"
-            onTap:{
-                nav_view.push("qrc:/T_Theme.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                nav_view.push("qrc:/T_Awesome.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Typography"
-            onTap:{
-                nav_view.push("qrc:/T_Typography.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Media"
-        }
-
-        FluPaneItem{
-            title:"MediaPlayer"
-            onTap:{
-                nav_view.push("qrc:/T_MediaPlayer.qml")
-            }
-        }
-
-    }
-
-    FluObject{
-        id:footer_items
-        FluPaneItemSeparator{}
-        FluPaneItem{
-            title:"意见反馈"
-            onTap:{
-                Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
-            }
-        }
-        FluPaneItem{
-            title:"关于"
-            onTap:{
-                FluApp.navigate("/about")
-            }
-        }
     }
 
     FluNavigationView{
         id:nav_view
         anchors.fill: parent
-        items: original_items
+        items: ItemsOriginal
-        footerItems:footer_items
+        footerItems:ItemsFooter
         logo: "qrc:/res/image/favicon.ico"
         z: 11
+        title:"FluentUI"
+        autoSuggestBox:FluAutoSuggestBox{
+            width: 280
+            anchors.centerIn: parent
+            iconSource: FluentIcons.Zoom
+            items: ItemsOriginal.getSearchData()
+            placeholderText: "查找"
+            onItemClicked:
+                (data)=>{
+                    ItemsOriginal.startPageByItem(data)
+                }
+        }
         Component.onCompleted: {
+            ItemsOriginal.navigationView = nav_view
             nav_view.setCurrentIndex(0)
             nav_view.push("qrc:/T_Home.qml")
         }
     }
 
-    function startPageByTitle(title){
-        console.debug(title)
-        nav_view.startPageByTitle(title)
-    }
-
 }

example/page/MediaPage.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+FluWindow {
+
+    width: 640
+    height: 480
+    minimumWidth: 640
+    minimumHeight: 480
+
+    title:"视频播放器"
+
+    onInitArgument:
+        (argument)=>{
+            player.source = argument.source
+        }
+
+    FluAppBar{
+        id:appbar
+        title:"视频播放器"
+        width:parent.width
+    }
+
+
+    FluMediaPlayer{
+        id:player
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: appbar.bottom
+            bottom: parent.bottom
+        }
+    }
+
+}

example/qml.qrc

@@ -149,5 +149,9 @@
         <file>res/image/control/WebView.png</file>
         <file>res/image/control/XamlUICommand.png</file>
         <file>T_CheckBox.qml</file>
+        <file>global/ItemsOriginal.qml</file>
+        <file>global/qmldir</file>
+        <file>global/ItemsFooter.qml</file>
+        <file>page/MediaPage.qml</file>
     </qresource>
 </RCC>

src/CMakeLists.txt

@@ -0,0 +1,67 @@
+cmake_minimum_required(VERSION 3.16)
+project(FluentUI)
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+set(CMAKE_AUTOUIC ON)
+
+find_package(Qt6 COMPONENTS Core Quick Svg REQUIRED)
+set(QT_INSTALL_QML ${Qt6Core_DIR}/../../../qml)
+set(TARGET_TYPE SHARED)
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin/FluentUI)
+
+set(TARGET_RESOURCES res.qrc)
+set(TARGET_SOURCES
+    Def.cpp
+    FluApp.cpp
+    FluColorSet.cpp
+    FluColors.cpp
+    FluRegister.cpp
+    FluTheme.cpp
+    Fluent.cpp
+    FluentUI.cpp
+    WindowHelper.cpp
+    qml_plugin.cpp
+)
+
+set(TARGET_HEADERS
+    Def.h
+    FluApp.h
+    FluColorSet.h
+    FluColors.h
+    FluRegister.h
+    FluTheme.h
+    Fluent.h
+    FluentUI.h
+    FramelessView.h
+    WindowHelper.h
+    qml_plugin.h
+    stdafx.h
+)
+
+if(WIN32)
+    set(TARGET_SOURCES ${TARGET_SOURCES} FramelessView_win.cpp)
+else()
+    set(TARGET_SOURCES ${TARGET_SOURCES} FramelessView_unix.cpp)
+endif()
+
+add_library(${PROJECT_NAME} ${TARGET_TYPE} ${TARGET_SOURCES} ${TARGET_HEADERS} ${TARGET_RESOURCES})
+
+set_target_properties(${PROJECT_NAME} PROPERTIES LIBRARY_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin/FluentUI)
+
+target_compile_definitions(${PROJECT_NAME} PRIVATE VERSION_IN=\\\"1.0.0\\\" URI_STR=\\\"FluentUI\\\")
+
+if(WIN32)
+    target_link_libraries(${PROJECT_NAME} PRIVATE dwmapi user32)
+else()
+endif()
+
+target_include_directories(${PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR})
+
+target_link_libraries(${PROJECT_NAME} PRIVATE Qt6::Core Qt6::Quick Qt6::Svg)
+
+if(WIN32)
+    include(build_windows.cmake)
+else()
+    include(build_macos.cmake)
+endif()

src/FluApp.cpp

@@ -5,6 +5,7 @@
 #include <QQmlContext>
 #include <QQuickItem>
 #include <QTimer>
+#include <QUuid>
 #include <QClipboard>
 #include "Def.h"
 
@@ -99,3 +100,7 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
 void FluApp::clipText(const QString& text){
     QGuiApplication::clipboard()->setText(text);
 }
+
+QString FluApp::uuid(){
+    return QUuid::createUuid().toString();
+}

src/FluApp.h

@@ -37,6 +37,8 @@ public:
 
     Q_INVOKABLE void clipText(const QString& text);
 
+    Q_INVOKABLE QString uuid();
+
 private:
     QMap<QString, QVariant> properties;
     static FluApp* m_instance;

src/FluTheme.cpp

@@ -17,7 +17,7 @@ FluTheme::FluTheme(QObject *parent)
 {
     primaryColor(FluColors::getInstance()->Blue());
     textSize(13);
-    nativeText(false);
+    nativeText(true);
     frameless(true);
     dark(false);
 }

src/Fluent.cpp

@@ -22,7 +22,7 @@ Fluent *Fluent::getInstance()
 
 QString Fluent::version() const
 {
-    return QStringLiteral(VERSION_IN);
+    return QStringLiteral("1.0.0");
 }
 
 void Fluent::registerTypes(const char *uri){
@@ -32,6 +32,8 @@ void Fluent::registerTypes(const char *uri){
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
     qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
+
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");
@@ -57,7 +59,7 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenu.qml"),uri,major,minor,"FluMenu");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollBar.qml"),uri,major,minor,"FluScrollBar");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTextButton.qml"),uri,major,minor,"FluTextButton");
-    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMultiLineTextBox.qml"),uri,major,minor,"FluMultiLineTextBox");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMultilineTextBox.qml"),uri,major,minor,"FluMultilineTextBox");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTooltip.qml"),uri,major,minor,"FluTooltip");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDivider.qml"),uri,major,minor,"FluDivider");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluIcon.qml"),uri,major,minor,"FluIcon");

src/FluentUI.pro

@@ -1,5 +1,5 @@
 QT          += qml quick svg
-CONFIG      += plugin c++11
+CONFIG      += plugin c++17
 TEMPLATE    = lib
 TARGET      = FluentUI
 TARGET      = $$qtLibraryTarget($$TARGET)

src/build_macos.cmake

@@ -0,0 +1,32 @@
+set(OUTP ${CMAKE_BINARY_DIR}/bin/FluentUI/)
+
+add_definitions(-DMACOS)
+
+set(CMAKE_INSTALL_PREFIX ${OUTP})
+set(CMAKE_INSTALL_DESTDIR ${OUTP})
+
+include_directories(${CMAKE_CURRENT_SOURCE_DIR})
+
+set(QMAKE_MOC_OPTIONS -Muri=${uri})
+
+add_custom_command(
+    TARGET ${PROJECT_NAME} POST_BUILD
+    COMMAND chmod -R 777 ${CMAKE_CURRENT_SOURCE_DIR}/macos_install.sh
+)
+
+add_custom_command(
+    TARGET ${PROJECT_NAME} POST_BUILD
+    COMMAND ${CMAKE_CURRENT_SOURCE_DIR}/macos_install.sh PRESET ${CMAKE_CURRENT_SOURCE_DIR}/ ${OUTP}
+)
+
+
+
+if(${TARGET_TYPE} STREQUAL "SHARED")
+
+    set(INST_QMLPATH ${QT_INSTALL_QML}/FluentUI)
+    add_custom_command(
+        TARGET ${PROJECT_NAME} POST_BUILD
+        COMMAND ${CMAKE_CURRENT_SOURCE_DIR}/macos_install.sh INSTALL ${CMAKE_CURRENT_SOURCE_DIR}/ ${OUTP} ${INST_QMLPATH}
+    )
+
+endif()

src/build_windows.cmake

@@ -0,0 +1,27 @@
+set(OUTP "${CMAKE_BINARY_DIR}/bin/FluentUI")
+set(BUILDBIN_PATH "${OUTP}")
+set(QTQMLFLUENT_PATH "${QT_INSTALL_QML}/FluentUI")
+set(PRESET_PATH "${CMAKE_CURRENT_SOURCE_DIR}/build-preset")
+set(SOLIBFILE_PATH "${CMAKE_BINARY_DIR}/libFluentUI.so")
+set(ANDROID NO)
+if (ANDROID)
+    set(ANDROID YES)
+    execute_process(COMMAND ${CMAKE_COMMAND} -E make_directory ${OUTP})
+else()
+    set(CMAKE_INSTALL_PREFIX "${OUTP}")
+endif()
+set(SHAREDSCRIPT ${CMAKE_CURRENT_SOURCE_DIR}/win_install.bat SHARED ${CMAKE_CURRENT_SOURCE_DIR} ${PRESET_PATH} ${BUILDBIN_PATH} ${QTQMLFLUENT_PATH} ${ANDROID} ${SOLIBFILE_PATH})
+set(STATICSCRIPT ${CMAKE_CURRENT_SOURCE_DIR}/win_install.bat STATIC ${CMAKE_CURRENT_SOURCE_DIR} ${PRESET_PATH} ${BUILDBIN_PATH} ${QTQMLFLUENT_PATH} ${ANDROID} ${SOLIBFILE_PATH})
+string(REPLACE "/" "\\" SHAREDSCRIPT "${SHAREDSCRIPT}")
+string(REPLACE "/" "\\" STATICSCRIPT "${STATICSCRIPT}")
+if (${TARGET_TYPE} STREQUAL "SHARED")
+    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
+        COMMAND ${SHAREDSCRIPT}
+        WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
+    )
+else()
+    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
+        COMMAND ${STATICSCRIPT}
+        WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
+    )
+endif()

src/build_windows.pri

@@ -1,5 +1,8 @@
 OUTP = $$OUT_PWD/../bin/FluentUI
 BUILDBIN_PATH = $$replace(OUTP, src/../bin, bin)
+message("----------------->")
+message($$OUTP)
+message($$BUILDBIN_PATH)
 QTQMLFLUENT_PATH = $$[QT_INSTALL_QML]/FluentUI
 PRESET_PATH = $$PWD/build-preset
 SOLIBFILE_PATH = $$OUT_PWD/libFluentUI.so
@@ -15,6 +18,8 @@ android{
 SHAREDSCRIPT = "$$PWD\win_install.bat" SHARED "$$PWD" "$$PRESET_PATH" "$$BUILDBIN_PATH" "$$QTQMLFLUENT_PATH" $$ANDROID "$$SOLIBFILE_PATH"
 STATICSCRIPT = "$$PWD\win_install.bat" STATIC "$$PWD" "$$PRESET_PATH" "$$BUILDBIN_PATH" "$$QTQMLFLUENT_PATH" $$ANDROID "$$SOLIBFILE_PATH"
 
+message("-------------------------")
+message($$SHAREDSCRIPT)
 CONFIG(sharedlib){
     QMAKE_POST_LINK *= $$replace(SHAREDSCRIPT, /, \\)
 }

src/colorpicker/ColorPicker.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 import "content"
 
 Rectangle {

src/colorpicker/content/Checkerboard.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 Grid {
     id: root
     property int cellSide: 5

src/colorpicker/content/ColorSlider.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Item {
     property int cursorHeight: 7
@@ -30,10 +30,10 @@ Item {
                 pickerCursor.y = Math.max(0, Math.min(height, mouse.y)-cursorHeight)
             }
         }
-        onPositionChanged: {
+        onPositionChanged:(mouse)=> {
             handleMouse(mouse)
         }
-        onPressed: handleMouse(mouse)
+        onPressed:(mouse)=> handleMouse(mouse)
     }
 
     function setValue(val) {

src/colorpicker/content/NumberBox.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Row {
     property alias  caption: captionBox.text

src/colorpicker/content/PanelBorder.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Rectangle {
     width : 40; height : 15; radius: 2

src/colorpicker/content/SBPicker.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Item {
     id: root
@@ -48,22 +48,15 @@ Item {
         anchors.fill: parent
         x: r
         y: r
+        preventStealing: true
         function handleMouse(mouse) {
             if (mouse.buttons & Qt.LeftButton) {
-
                 pickerCursor.x = Math.max(0,Math.min(mouse.x - r,width-2*r));
                 pickerCursor.y = Math.max(0,Math.min(mouse.y - r,height-2*r));
-
-
-//                pickerCursor.x = Math.max(-r,Math.min(mouse.x - r,width+r));
-//                pickerCursor.y = Math.max(-r,Math.min(mouse.y - r,height+r));
-
-//                pickerCursor.x = Math.max(0, Math.min(width,  mouse.x) - 2 * r);
-//                pickerCursor.y = Math.max(0, Math.min(height, mouse.y) - 2 * r);
             }
         }
-        onPositionChanged: handleMouse(mouse)
+        onPositionChanged:(mouse)=> handleMouse(mouse)
-        onPressed: handleMouse(mouse)
+        onPressed:(mouse)=> handleMouse(mouse)
     }
 }
 

src/controls/FluAppBar.qml

@@ -1,33 +1,41 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 Rectangle{
 
     property string title: ""
+    property string darkText : "夜间模式"
+    property string minimizeText : "最小化"
+    property string restoreText : "向下还原"
+    property string maximizeText : "最大化"
+    property string closeText : "关闭"
     property color textColor: FluTheme.dark ? "#FFFFFF" : "#000000"
+    property color minimizeNormalColor: Qt.rgba(0,0,0,0)
+    property color minimizeHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.1) : Qt.rgba(0,0,0,0.06)
+    property color maximizeNormalColor: Qt.rgba(0,0,0,0)
+    property color maximizeHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.1) : Qt.rgba(0,0,0,0.06)
+    property color closeNormalColor: Qt.rgba(0,0,0,0)
+    property color closeHoverColor:  Qt.rgba(251/255,115/255,115/255,1)
+
+
     property bool showDark: false
-    property bool showFps: false
-    property var window: Window.window
     property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property bool resizable: {
+
-        if(window == null){
+    Item{
-            return false
+        id:d
-        }
+        property var win: Window.window
-        return !(window.minimumHeight === window.maximumHeight && window.maximumWidth === window.minimumWidth)
+        property bool isRestore: win && Window.Maximized === win.visibility
+        property bool resizable: win && !(win.minimumHeight === win.maximumHeight && win.maximumWidth === win.minimumWidth)
     }
 
     id:root
     color: Qt.rgba(0,0,0,0)
     visible: FluTheme.frameless
     height: visible ? 30 : 0
-    width: {
+    opacity: visible
-        if(parent==null)
-            return 200
-        return parent.width
-    }
     z: 65535
 
     TapHandler {
@@ -38,7 +46,7 @@ Rectangle{
     DragHandler {
         target: null
         grabPermissions: TapHandler.CanTakeOverFromAnything
-        onActiveChanged: if (active) { window.startSystemMove(); }
+        onActiveChanged: if (active) { d.win.startSystemMove(); }
     }
 
     FluText {
@@ -59,13 +67,6 @@ Rectangle{
         height: root.height
         spacing: 0
 
-        TFpsMonitor{
-            Layout.alignment: Qt.AlignVCenter
-            Layout.rightMargin: 20
-            Layout.topMargin: 5
-            color:root.textColor
-            visible: showFps
-        }
 
         RowLayout{
             Layout.alignment: Qt.AlignVCenter
@@ -73,9 +74,8 @@ Rectangle{
             visible: showDark
             spacing: 5
             FluText{
-                text:"夜间模式"
+                text:darkText
                 color:root.textColor
-                fontStyle: FluText.Caption
             }
             FluToggleSwitch{
                 selected: FluTheme.dark
@@ -91,53 +91,24 @@ Rectangle{
             iconSource : FluentIcons.ChromeMinimize
             Layout.alignment: Qt.AlignVCenter
             iconSize: 11
-            text:"最小化"
+            text:minimizeText
             radius: 0
             textColor: root.textColor
-            color:{
+            color: hovered ? minimizeHoverColor : minimizeNormalColor
-                if(FluTheme.dark){
-                    if(hovered){
-                        return Qt.rgba(1,1,1,0.06)
-                    }
-                    return Qt.rgba(0,0,0,0)
-                }else{
-                    if(hovered){
-                        return Qt.rgba(0,0,0,0.06)
-                    }
-                    return Qt.rgba(0,0,0,0)
-                }
-            }
             onClicked: {
-                window.showMinimized()
+                d.win.showMinimized()
             }
         }
         FluIconButton{
             width: 40
             height: 30
-            property bool isRestore:{
+            iconSource : d.isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
-                if(window == null)
+            color: hovered ? maximizeHoverColor : maximizeNormalColor
-                    return false
-                return Window.Maximized === window.visibility
-            }
-            iconSource : isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
-            color:{
-                if(FluTheme.dark){
-                    if(hovered){
-                        return Qt.rgba(1,1,1,0.06)
-                    }
-                    return Qt.rgba(0,0,0,0)
-                }else{
-                    if(hovered){
-                        return Qt.rgba(0,0,0,0.06)
-                    }
-                    return Qt.rgba(0,0,0,0)
-                }
-            }
             Layout.alignment: Qt.AlignVCenter
-            visible: resizable
+            visible: d.resizable
             radius: 0
             textColor: root.textColor
-            text:isRestore?"向下还原":"最大化"
+            text:d.isRestore?restoreText:maximizeText
             iconSize: 11
             onClicked: {
                 toggleMaximized()
@@ -146,26 +117,26 @@ Rectangle{
         FluIconButton{
             iconSource : FluentIcons.ChromeClose
             Layout.alignment: Qt.AlignVCenter
-            text:"关闭"
+            text:closeText
             width: 40
             height: 30
             radius: 0
             iconSize: 10
             textColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
-            color:hovered ? Qt.rgba(251/255,115/255,115/255,1) : "#00000000"
+            color:hovered ? closeHoverColor : closeNormalColor
             onClicked: {
-                Window.window.close()
+                d.win.close()
             }
         }
     }
 
     function toggleMaximized() {
-        if(!resizable)
+        if(!d.resizable)
             return
-        if (window.visibility === Window.Maximized) {
+        if (d.win.visibility === Window.Maximized) {
-            window.showNormal();
+            d.win.showNormal();
         } else {
-            window.showMaximized();
+            d.win.showMaximized();
         }
     }
 

src/controls/FluArea.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 

src/controls/FluAutoSuggestBox.qml

@@ -1,58 +1,56 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 TextField{
 
-    property var values:[]
+    property var items:[]
     property int fontStyle: FluText.Body
+    property string emptyText: "没有找到结果"
     property int pixelSize : FluTheme.textSize
     property int iconSource: 0
     property bool disabled: false
-    signal itemClicked(string data)
+    signal itemClicked(var data)
-
+    signal handleClicked
-    id:input
+    property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+    property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+    property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+    property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+    QtObject{
+        id:d
+        property bool flagVisible: true
+    }
+    id:control
     width: 300
     enabled: !disabled
     color: {
         if(disabled){
-            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return disableColor
-        }
-        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
-    }
-    selectionColor: {
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
         }
+        return normalColor
     }
+    selectionColor: FluTheme.primaryColor.lightest
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     placeholderTextColor: {
         if(disabled){
-            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return placeholderDisableColor
         }
         if(focus){
-            return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+            return placeholderFocusColor
         }
-        return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+        return placeholderNormalColor
     }
     rightPadding: icon_right.visible ? 50 : 30
     selectByMouse: true
-
     Keys.onUpPressed: {
         list_view.currentIndex = Math.max(list_view.currentIndex-1,0)
     }
-
     Keys.onDownPressed: {
         list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1)
     }
-
-    signal handleClicked
     Keys.onEnterPressed:handleClicked()
     Keys.onReturnPressed:handleClicked()
-
-
     font.bold: {
         switch (fontStyle) {
         case FluText.Display:
@@ -61,10 +59,8 @@ TextField{
             return true
         case FluText.Title:
             return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
             return true
-        case FluText.BodyLarge:
-            return false
         case FluText.BodyStrong:
             return true
         case FluText.Body:
@@ -78,51 +74,49 @@ TextField{
     font.pixelSize: {
         switch (fontStyle) {
         case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
         case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
         case FluText.Title:
-            return input.pixelSize * 1.5
+            return text.pixelSize * 2
-        case FluText.Subtitle:
+        case FluText.SubTitle:
-            return input.pixelSize * 0.9
+            return text.pixelSize * 1.428
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
         case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
         case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
         default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
         }
     }
-    background: FluTextBoxBackground{
-        inputItem: input
 
-        FluIconButton{
+    FluIconButton{
-            iconSource:FluentIcons.ChromeClose
+        iconSource:FluentIcons.ChromeClose
-            iconSize: 10
+        iconSize: 10
-            width: 20
+        width: 20
-            height: 20
+        height: 20
-            opacity: 0.5
+        opacity: 0.5
-            visible: input.text !== ""
+        visible: control.text !== ""
-            anchors{
+        anchors{
-                verticalCenter: parent.verticalCenter
+            verticalCenter: parent.verticalCenter
-                right: parent.right
+            right: parent.right
-                rightMargin: icon_right.visible ? 25 : 5
+            rightMargin: icon_right.visible ? 25 : 5
-            }
-            onClicked:{
-                input.text = ""
-            }
         }
+        onClicked:{
+            control.text = ""
+        }
+    }
 
+    background: FluTextBoxBackground{
+        inputItem: control
         FluIcon{
             id:icon_right
-            iconSource: input.iconSource
+            iconSource: control.iconSource
             iconSize: 15
             opacity: 0.5
-            visible: input.iconSource != 0
+            visible: control.iconSource != 0
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
@@ -132,20 +126,18 @@ TextField{
     }
 
     Component.onCompleted: {
-        searchData()
+        loadData()
     }
 
     Popup{
-        id:input_popup
+        id:control_popup
-        visible: input.focus
+        y:control.height
-        y:input.height
+        focus: false
-        modal: true
-        dim:false
         enter: Transition {
             NumberAnimation {
                 property: "y"
                 from:0
-                to:input_popup.y
+                to:control_popup.y
                 duration: 150
             }
             NumberAnimation {
@@ -155,16 +147,13 @@ TextField{
                 duration: 150
             }
         }
-        onClosed: {
-            input.focus = false
-        }
         onVisibleChanged: {
             if(visible){
                 list_view.currentIndex = -1
             }
         }
         background: Rectangle{
-            width: input.width
+            width: control.width
             radius: 4
             FluShadow{
                 radius: 4
@@ -173,18 +162,16 @@ TextField{
             height: 38*Math.min(Math.max(list_view.count,1),8)
             ListView{
                 id:list_view
-                signal closePopup
                 anchors.fill: parent
-                boundsBehavior: ListView.StopAtBounds
                 clip: true
                 currentIndex: -1
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
-                    width: input.width
+                    width: control.width
                     height: visible ? 38 : 0
                     visible: list_view.count === 0
                     FluText{
-                        text:"没有找到结果"
+                        text:emptyText
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left: parent.left
@@ -193,7 +180,7 @@ TextField{
                     }
                 }
                 delegate:Control{
-                    width: input.width
+                    width: control.width
                     padding:10
                     background: Rectangle{
                         color:  {
@@ -209,19 +196,14 @@ TextField{
                             id:mouse_area
                             anchors.fill: parent
                             Connections{
-                                target: input
+                                target: control
                                 function onHandleClicked(){
                                     if((list_view.currentIndex === index)){
-                                        mouse_area.handleClick()
+                                        handleClick(modelData)
                                     }
                                 }
                             }
-                            onClicked: handleClick()
+                            onClicked: handleClick(modelData)
-                            function handleClick(){
-                                input_popup.close()
-                                input.itemClicked(modelData)
-                                input.text = modelData
-                            }
                         }
                         Rectangle{
                             width: 3
@@ -236,53 +218,50 @@ TextField{
                         }
                     }
                     contentItem: FluText{
-                        text:modelData
+                        text:modelData.title
                         anchors{
                             verticalCenter: parent.verticalCenter
                         }
                     }
-
                 }
-                //                Item{
-                //                    height: 38
-                //                    width: input.width
-                //                    Rectangle{
-                //                        anchors.fill: parent
-                //                        anchors.topMargin: 2
-                //                        anchors.bottomMargin: 2
-                //                        anchors.leftMargin: 5
-                //                        anchors.rightMargin: 5
-
-                //                        radius: 3
-                //                        MouseArea{
-                //                            id:item_mouse
-                //                            anchors.fill: parent
-                //                            hoverEnabled: true
-                //                            onClicked: {
-                //                                input_popup.close()
-                //                                input.itemClicked(modelData)
-                //                                input.text = modelData
-                //                            }
-                //                        }
-
-                //                    }
-                //                }
             }
         }
     }
-
     onTextChanged: {
-        searchData()
+        loadData()
+        if(d.flagVisible){
+            control_popup.visible = true
+        }
+    }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+    }
+    FluTextBoxMenu{
+        id:menu
+        inputItem: control
     }
 
-    function searchData(){
+    function handleClick(modelData){
+        control_popup.visible = false
+        control.itemClicked(modelData)
+        updateText(modelData.title)
+    }
+
+    function updateText(text){
+        d.flagVisible = false
+        control.text = text
+        d.flagVisible = true
+    }
+
+    function loadData(){
         var result = []
-        if(values==null){
+        if(items==null){
             list_view.model = result
             return
         }
-        values.map(function(item){
+        items.map(function(item){
-            if(item.indexOf(input.text)!==-1){
+            if(item.title.indexOf(control.text)!==-1){
                 result.push(item)
             }
         })

src/controls/FluBadge.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Rectangle{
 

src/controls/FluButton.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Button {
 

src/controls/FluCalendarPicker.qml

@@ -1,17 +1,18 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property string text: "请选择日期"
     property var window : Window.window
 
-    id:root
+    id:control
     color: {
         if(mouse_area.containsMouse){
             return hoverColor
@@ -44,13 +45,13 @@ Rectangle {
         }
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
-        text:"请选择日期"
+        text:control.text
     }
 
     FluIcon{
         iconSource: FluentIcons.Calendar
         iconSize: 14
-        color: text_date.color
+        iconColor: text_date.color
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
@@ -59,7 +60,7 @@ Rectangle {
     }
 
 
-    Popup{
+    Menu{
         id:popup
         height: container.height
         width: container.width
@@ -79,28 +80,31 @@ Rectangle {
                 duration: 150
             }
         }
-        background: FluCalendarView{
+        contentItem: Item{
-            id:container
+            anchors.fill: parent
-            onDateClicked:
+            FluCalendarView{
-                (date)=>{
+                id:container
-                    popup.close()
+                onDateClicked:
-                    var year = date.getFullYear()
+                    (date)=>{
-                    var month = date.getMonth()
+                        popup.close()
-                    var day =  date.getDate()
+                        var year = date.getFullYear()
-                    text_date.text = year+"-"+(month+1)+"-"+day
+                        var month = date.getMonth()
-                }
+                        var day =  date.getDate()
+                        text_date.text = year+"-"+(month+1)+"-"+day
+                    }
+            }
         }
-        contentItem: Item{}
+        background: Item{}
         function showPopup() {
-            var pos = root.mapToItem(null, 0, 0)
+            var pos = control.mapToItem(null, 0, 0)
-            if(window.height>pos.y+root.height+popup.height){
+            if(window.height>pos.y+control.height+popup.height){
-                popup.y = root.height
+                popup.y = control.height
             } else if(pos.y>popup.height){
                 popup.y = -popup.height
             } else {
                 popup.y = window.height-(pos.y+popup.height)
             }
-            popup.x = -(popup.width-root.width)/2
+            popup.x = -(popup.width-control.width)/2
             popup.open()
         }
     }

src/controls/FluCalendarView.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluCarousel.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluCheckBox.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 Button {
 
@@ -73,16 +73,28 @@ Button {
                 }
                 return normalColor
             }
+            Behavior on color {
+                ColorAnimation{
+                    duration: 150
+                }
+            }
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
                 iconSize: 15
                 visible: selected
-                color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                Behavior on visible {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
             }
         }
         FluText{
-            text:control.text
+            text: control.text
+            Layout.leftMargin: 5
+            visible: text !== ""
         }
     }
 }

src/controls/FluColorPicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 
 Button{
@@ -27,15 +27,19 @@ Button{
     onClicked: {
         popup.showPopup()
     }
-    Popup{
+    Menu{
         id:popup
         modal: true
         dim:false
         height: container.height
         width: container.width
-        background: FluColorView{
+        contentItem: Item{
-            id:container
+            anchors.fill: parent
+            FluColorView{
+                id:container
+            }
         }
+        background:Item{}
         enter: Transition {
             NumberAnimation {
                 property: "y"
@@ -50,7 +54,6 @@ Button{
                 duration: 150
             }
         }
-        contentItem: Item{}
         function showPopup() {
             var pos = control.mapToItem(null, 0, 0)
             if(window.height>pos.y+control.height+popup.height){

src/controls/FluColorView.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 import "../colorpicker"
 
 Item {

src/controls/FluComboBox.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluContentDialog.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
 
 Popup {
     id: popup
@@ -17,11 +17,11 @@ Popup {
             return 400
         return  Math.min(Window.window.width,400)
     }
-
     modal:true
     anchors.centerIn: Overlay.overlay
     closePolicy: Popup.CloseOnEscape
-    background: Rectangle {
+    background:Item{}
+    contentItem: Rectangle {
         id:layout_content
         implicitWidth:minWidth
         implicitHeight: text_title.height + text_message.height + layout_actions.height

src/controls/FluContentPage.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluDatePicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 
@@ -97,12 +97,11 @@ Rectangle {
         text:"日"
     }
 
-    Popup{
+    Menu{
         id:popup
-        width: container.width
-        height: container.height
-        contentItem: Item{}
         modal: true
+        width: 300
+        height: 340
         dim:false
         enter: Transition {
             NumberAnimation {
@@ -118,12 +117,12 @@ Rectangle {
                 duration: 150
             }
         }
-        background: Rectangle{
+        background:Item{}
+        contentItem: Rectangle{
             id:container
-            width: 300
             radius: 4
+            anchors.fill: parent
             color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-            height: 340
             MouseArea{
                 anchors.fill: parent
             }
@@ -337,9 +336,7 @@ Rectangle {
                         popup.close()
                     }
                 }
-
             }
-
         }
         y:35
         function showPopup() {

src/controls/FluDivider.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 

src/controls/FluDropDownButton.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 Button {
 
@@ -44,7 +44,7 @@ Button {
                 rightMargin: 10
                 verticalCenter: parent.verticalCenter
             }
-            color:title.color
+            iconColor:title.color
         }
 
     }

src/controls/FluExpander.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 
@@ -51,15 +51,22 @@ Item {
                 if(root_mouse.containsMouse){
                     return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
                 }
-                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+                return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
             }
-            iconSize: 15
-            iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
             onClicked: {
                 expand = !expand
             }
+            contentItem: FluIcon{
+                rotation: expand?0:180
+                iconSource:FluentIcons.ChevronUp
+                iconSize: 15
+                Behavior on rotation {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
+            }
         }
-
     }
 
 

src/controls/FluFilledButton.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Button {
 

src/controls/FluFocusRectangle.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluIcon.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Text {
 

src/controls/FluIconButton.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Button {
 

src/controls/FluInfoBar.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 FluObject {
     id:infoBar
@@ -178,7 +178,7 @@ FluObject {
                         return FluentIcons.FA_info_circle
                     }
                     iconSize:20
-                    color: {
+                    iconColor: {
                         if(FluTheme.dark){
                             switch(_super.type){
                             case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
@@ -208,23 +208,23 @@ FluObject {
         }
     }
 
-    function showSuccess(text,duration,moremsg){
+    function showSuccess(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
     }
 
-    function showInfo(text,duration,moremsg){
+    function showInfo(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
     }
 
-    function showWarning(text,duration,moremsg){
+    function showWarning(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
     }
 
-    function showError(text,duration,moremsg){
+    function showError(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
     }
 
-    function showCustom(itemcomponent,duration){
+    function showCustom(itemcomponent,duration=1000){
         mcontrol.createCustom(itemcomponent,duration);
     }
 

src/controls/FluItem.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import Qt5Compat.GraphicalEffects
 
 Item{
     id:control
@@ -14,6 +14,18 @@ Item{
         opacity: 0
     }
 
+    onWidthChanged: {
+        canvas.requestPaint()
+    }
+
+    onHeightChanged: {
+        canvas.requestPaint()
+    }
+
+    onRadiusChanged: {
+        canvas.requestPaint()
+    }
+
     Canvas {
         id: canvas
         anchors.fill: parent

src/controls/FluMediaPlayer.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtMultimedia 5.15
+import QtMultimedia
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 
@@ -17,6 +17,7 @@ Rectangle {
 
     MouseArea{
         anchors.fill: parent
+        preventStealing: true
         onClicked: {
             showControl = !showControl
         }
@@ -25,22 +26,28 @@ Rectangle {
     MediaPlayer {
         id: mediaplayer
         property bool autoSeek:true
-        autoPlay: true
         source: control.source
-        onError: {
+        videoOutput: video_output
-            console.debug(error)
+        audioOutput: AudioOutput{
+            id:audio_output
         }
+        onErrorChanged:
+            (error)=> {
+                console.debug(error)
+            }
         onPositionChanged: {
             if(autoSeek){
                 slider.seek(mediaplayer.position*slider.maxValue/mediaplayer.duration)
             }
         }
-        onStatusChanged: {
+        onMediaStatusChanged:
-            if(status===6){
+            (status)=> {
-                slider.maxValue = mediaplayer.duration
+                if(status===2){
-                showControl = true
+                    slider.maxValue = mediaplayer.duration
+                    showControl = true
+                    mediaplayer.play()
+                }
             }
-        }
     }
 
     onSourceChanged: {
@@ -48,29 +55,31 @@ Rectangle {
     }
 
     VideoOutput {
+        id:video_output
         anchors.fill: parent
-        source: mediaplayer
     }
 
     Item{
         height: 100
         y:showControl ? control.height - 110 : control.height
         anchors{
-            left: parent.left
+            horizontalCenter: parent.horizontalCenter
-            right: parent.right
-            leftMargin: 10
-            rightMargin: 10
         }
+        width: 460
+        opacity: showControl
         MouseArea{
             anchors.fill: parent
         }
-
+        Behavior on opacity{
+            NumberAnimation{
+                duration: 150
+            }
+        }
         Behavior on y{
             NumberAnimation{
                 duration: 150
             }
         }
-
         Rectangle{
             anchors.fill: parent
             color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
@@ -82,25 +91,23 @@ Rectangle {
             size:parent.width-20
             y:20
             anchors.horizontalCenter: parent.horizontalCenter
-            enableTip:false
+            tipEnabled:false
             onPressed: {
                 mediaplayer.autoSeek = false
                 mediaplayer.pause()
             }
-            value:0
+            value:mediaplayer.position
             onReleased: {
                 mediaplayer.autoSeek = true
                 mediaplayer.play()
             }
-
             onValueChanged: {
                 if(mediaplayer.autoSeek == false){
-                    mediaplayer.seek(value*mediaplayer.duration/slider.maxValue)
+                    mediaplayer.position = value*mediaplayer.duration/slider.maxValue
                 }
             }
-
             onLineClickFunc:function(val){
-                mediaplayer.seek(val*mediaplayer.duration/slider.maxValue)
+                mediaplayer.position = val*mediaplayer.duration/slider.maxValue
             }
         }
 
@@ -137,14 +144,14 @@ Rectangle {
                 iconSize: 17
                 iconSource:  FluentIcons.SkipBack10
                 onClicked: {
-                    mediaplayer.seek(Math.max(mediaplayer.position-10*1000,0))
+                    mediaplayer.position = Math.max(mediaplayer.position-10*1000,0)
                 }
             }
             FluIconButton{
                 iconSize: 15
-                iconSource: mediaplayer.playbackState === Audio.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
+                iconSource: mediaplayer.playbackState === MediaPlayer.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
                 onClicked: {
-                    if(mediaplayer.playbackState === Audio.PlayingState){
+                    if(mediaplayer.playbackState === MediaPlayer.PlayingState){
                         mediaplayer.pause()
                     }else{
                         mediaplayer.play()
@@ -155,16 +162,15 @@ Rectangle {
                 iconSize: 17
                 iconSource:  FluentIcons.SkipForward30
                 onClicked: {
-                    mediaplayer.seek(Math.min(mediaplayer.position+30*1000,mediaplayer.duration))
+                    mediaplayer.position = Math.min(mediaplayer.position+30*1000,mediaplayer.duration)
                 }
             }
         }
 
-
         FluIconButton{
             id:btn_volume
             iconSize: 17
-            iconSource:  mediaplayer.volume ?  FluentIcons.Volume :  FluentIcons.Mute
+            iconSource:  audio_output.muted ? FluentIcons.Mute  :  FluentIcons.Volume
             anchors{
                 left: parent.left
                 leftMargin: 5
@@ -172,7 +178,7 @@ Rectangle {
                 bottomMargin: 10
             }
             onClicked: {
-                mediaplayer.volume = !mediaplayer.volume
+                audio_output.muted = !audio_output.muted
             }
         }
 
@@ -187,10 +193,9 @@ Rectangle {
                 leftMargin: 10
             }
             onValueChanged:{
-                mediaplayer.volume = value/100
+                audio_output.volume = value/100
             }
         }
-
     }
 
     function formatDuration(duration) {

src/controls/FluMenu.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 
 Menu {
 
@@ -9,10 +9,8 @@ Menu {
     id: popup
     width: 140
     height: container.height
-    modal: true
+    modal:true
     dim:false
-    contentItem: Item{}
-
     enter: Transition {
         NumberAnimation {
             property: "y"
@@ -27,8 +25,8 @@ Menu {
             duration: animEnabled ? 150 : 0
         }
     }
-
+    background:Item{}
-    background: Item {
+    contentItem: Item {
         Rectangle{
             anchors.fill: parent
             color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)

src/controls/FluMenuItem.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 
 Item {
 

src/controls/FluMultiLineTextBox.qml

@@ -1,89 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-
-TextArea{
-
-    property int fontStyle: FluText.Body
-    property int pixelSize : FluTheme.textSize
-    property bool disabled: false
-
-    id:input
-    width: 300
-    color: {
-        if(disabled){
-            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-        }
-        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
-    }
-    enabled: !disabled
-    wrapMode: Text.WrapAnywhere
-    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectByMouse: true
-    selectionColor: {
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
-    background: FluTextBoxBackground{
-        inputItem: input
-    }
-    placeholderTextColor: {
-        if(disabled){
-            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-        }
-        if(focus){
-            return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
-        }
-        return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
-    }
-    font.bold: {
-        switch (fontStyle) {
-        case FluText.Display:
-            return true
-        case FluText.TitleLarge:
-            return true
-        case FluText.Title:
-            return true
-        case FluText.Subtitle:
-            return true
-        case FluText.BodyLarge:
-            return false
-        case FluText.BodyStrong:
-            return true
-        case FluText.Body:
-            return false
-        case FluText.Caption:
-            return false
-        default:
-            return false
-        }
-    }
-
-    font.pixelSize: {
-        switch (fontStyle) {
-        case FluText.Display:
-            return input.pixelSize * 4
-        case FluText.TitleLarge:
-            return input.pixelSize * 2
-        case FluText.Title:
-            return input.pixelSize * 1.5
-        case FluText.Subtitle:
-            return input.pixelSize * 0.9
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
-        case FluText.Body:
-            return input.pixelSize * 1.0
-        case FluText.Caption:
-            return input.pixelSize * 0.8
-        default:
-            return input.pixelSize * 1.0
-        }
-    }
-
-
-}

src/controls/FluMultilineTextBox.qml

@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+TextArea{
+
+    property int fontStyle: FluText.Body
+    property int pixelSize : FluTheme.textSize
+    property bool disabled: false
+    property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+    property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+    property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+    property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+
+    id:control
+    width: 300
+    enabled: !disabled
+    color: {
+        if(disabled){
+            return disableColor
+        }
+        return normalColor
+    }
+    wrapMode: Text.WrapAnywhere
+    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
+    selectionColor: FluTheme.primaryColor.lightest
+    placeholderTextColor: {
+        if(disabled){
+            return placeholderDisableColor
+        }
+        if(focus){
+            return placeholderFocusColor
+        }
+        return placeholderNormalColor
+    }
+    font.bold: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return true
+        case FluText.TitleLarge:
+            return true
+        case FluText.Title:
+            return true
+        case FluText.SubTitle:
+            return true
+        case FluText.BodyStrong:
+            return true
+        case FluText.Body:
+            return false
+        case FluText.Caption:
+            return false
+        default:
+            return false
+        }
+    }
+    font.pixelSize: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return text.pixelSize * 4.857
+        case FluText.TitleLarge:
+            return text.pixelSize * 2.857
+        case FluText.Title:
+            return text.pixelSize * 2
+        case FluText.SubTitle:
+            return text.pixelSize * 1.428
+        case FluText.Body:
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
+        case FluText.Caption:
+            return text.pixelSize * 0.857
+        default:
+            return text.pixelSize * 1.0
+        }
+    }
+    selectByMouse: true
+    background: FluTextBoxBackground{ inputItem: control }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+    }
+    FluTextBoxMenu{
+        id:menu
+        inputItem: control
+    }
+
+}

src/controls/FluNavigationView.qml

@@ -1,16 +1,18 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 Item {
 
     property alias logo : image_logo.source
+    property string title: ""
     property FluObject items
     property FluObject footerItems
     property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
     property bool displaMinimalMenu : false
+    property Component  autoSuggestBox
 
     id:root
 
@@ -46,14 +48,34 @@ Item {
         id:com_panel_item_separatorr
         FluDivider{
             width: nav_list.width
-            height: 1
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 1 : 0
+                }
+                return 1
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
         }
     }
 
     Component{
         id:com_panel_item_header
         Item{
-            height: 30
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 30 : 0
+                }
+                return 30
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
             width: nav_list.width
             FluText{
                 text:model.title
@@ -68,11 +90,131 @@ Item {
     }
 
     Component{
-        id:com_panel_item
+        id:com_panel_item_expander
         Item{
             height: 38
             width: nav_list.width
 
+            Rectangle{
+                radius: 4
+                anchors{
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    topMargin: 2
+                    bottomMargin: 2
+                    leftMargin: 6
+                    rightMargin: 6
+                }
+                Rectangle{
+                    width: 3
+                    height: 18
+                    radius: 1.5
+                    color: FluTheme.primaryColor.dark
+                    visible: {
+                        for(var i=0;i<model.children.length;i++){
+                            var item = model.children[i]
+                            if(item.idx === nav_list.currentIndex && !model.isExpand){
+                                return true
+                            }
+                        }
+                        return false
+                    }
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+                FluIcon{
+                    rotation: model.isExpand?0:180
+                    iconSource:FluentIcons.ChevronUp
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: 12
+                    }
+                    Behavior on rotation {
+                        NumberAnimation{
+                            duration: 150
+                        }
+                    }
+                }
+                MouseArea{
+                    id:item_mouse
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        model.isExpand = !model.isExpand
+                    }
+                }
+                color: {
+                    if(FluTheme.dark){
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(1,1,1,0.03)
+                        }
+                        if((nav_list.currentIndex === position)&&type===0){
+                            return Qt.rgba(1,1,1,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }else{
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(0,0,0,0.03)
+                        }
+                        if(nav_list.currentIndex === position&&type===0){
+                            return Qt.rgba(0,0,0,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }
+                }
+
+                FluIcon{
+                    id:item_icon
+                    iconSource: {
+                        if(model.icon){
+                            return model.icon
+                        }
+                        return 0
+                    }
+                    width: 30
+                    height: 30
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:parent.left
+                        leftMargin: 3
+                    }
+                }
+
+                FluText{
+                    id:item_title
+                    text:model.title
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:item_icon.right
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_panel_item
+        Item{
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
+            clip: true
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 38 : 0
+                }
+                return 38
+            }
+            width: nav_list.width
+
             Rectangle{
                 radius: 4
                 anchors{
@@ -214,7 +356,7 @@ Item {
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
-                text:"FluentUI"
+                text:root.title
                 Layout.leftMargin: 12
                 fontStyle: FluText.Body
             }
@@ -257,6 +399,17 @@ Item {
     Rectangle{
         id:layout_list
         width: 300
+        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+        border.width:  displayMode === FluNavigationView.Minimal ? 1 : 0
+        color: {
+            if(displayMode === FluNavigationView.Minimal){
+                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            }
+            if(window && window.active){
+                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+            }
+            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+        }
         anchors{
             top: parent.top
             bottom: parent.bottom
@@ -273,70 +426,29 @@ Item {
             }
         }
 
-        color: {
-            if(displayMode === FluNavigationView.Minimal){
-                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-            }
-            if(window && window.active){
-                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-        }
         Behavior on color{
             ColorAnimation {
                 duration: 300
             }
         }
 
-        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
-        border.width:  displayMode === FluNavigationView.Minimal ? 1 : 0
-
         Item{
             id:layout_header
             width: layout_list.width
             y:nav_app_bar.height
-            height: textbox_search.height
+            height: {
-
+                if(loader_auto_suggest_box.item){
-            FluAutoSuggestBox{
+                    return loader_auto_suggest_box.item.height
-                id:textbox_search
-                width: 280
-                anchors.centerIn: parent
-                iconSource: FluentIcons.Zoom
-                values: {
-                    var arr = []
-                    if(items==null)
-                        return arr
-                    if(items.children==null)
-                        return arr
-                    for(var i=0;i<items.children.length;i++){
-                        var item = items.children[i]
-                        if(item instanceof FluPaneItem){
-                            arr.push(item.title)
-                        }
-                    }
-                    return arr
                 }
-                placeholderText: "查找"
+                return 0
-                onItemClicked:
+            }
-                    (data)=>{
+            Loader{
-                        var arr = []
+                id:loader_auto_suggest_box
-                        if(items==null)
+                anchors.horizontalCenter: parent.horizontalCenter
-                        return arr
+                sourceComponent: autoSuggestBox
-                        if(items.children==null)
-                        return arr
-                        for(var i=0;i<items.children.length;i++){
-                            if(items.children[i].title === data){
-                                if(nav_list.currentIndex === i){
-                                    return
-                                }
-                                items.children[i].tap()
-                                nav_list.currentIndex = i
-                                return
-                            }
-                        }
-                    }
             }
         }
+
         ListView{
             id:nav_list
             property bool enableStack: true
@@ -349,6 +461,7 @@ Item {
                 right: parent.right
                 bottom: layout_footer.top
             }
+            highlightMoveDuration: 150
             currentIndex: -1
             onCurrentIndexChanged: {
                 if(enableStack){
@@ -357,12 +470,7 @@ Item {
             }
             ScrollBar.vertical: FluScrollBar {}
 
-            model:{
+            model:handleItems()
-                if(items){
-                    return items.children
-                }
-            }
-            boundsBehavior: ListView.StopAtBounds
             delegate: Loader{
                 property var model: modelData
                 property var position: index
@@ -377,6 +485,9 @@ Item {
                     if(modelData instanceof FluPaneItemSeparator){
                         return com_panel_item_separatorr
                     }
+                    if(modelData instanceof FluPaneItemExpander){
+                        return com_panel_item_expander
+                    }
                 }
             }
         }
@@ -386,7 +497,6 @@ Item {
             width: layout_list.width
             height: childrenRect.height
             anchors.bottom: parent.bottom
-            boundsBehavior: ListView.StopAtBounds
             model: {
                 if(footerItems){
                     return footerItems.children
@@ -412,6 +522,33 @@ Item {
         }
     }
 
+    function handleItems(){
+        var idx = 0
+        var data = []
+        if(items){
+            for(var i=0;i<items.children.length;i++){
+                var item = items.children[i]
+                item.idx = idx
+                data.push(item)
+                idx++
+                if(item instanceof FluPaneItemExpander){
+                    for(var j=0;j<item.children.length;j++){
+                        var itemChild = item.children[j]
+                        itemChild.parent = item
+                        itemChild.idx = idx
+                        data.push(itemChild)
+                        idx++
+                    }
+                }
+            }
+        }
+        return data
+    }
+
+    function getItems(){
+        return nav_list.model
+    }
+
     function push(url){
         nav_swipe.push(url)
     }
@@ -420,17 +557,8 @@ Item {
         nav_list.currentIndex = index
     }
 
-    function startPageByTitle(title){
+    function getCurrentIndex(){
-        for(var i=0;i<items.children.length;i++){
+        return nav_list.currentIndex
-            if(items.children[i].title === title){
-                if(nav_list.currentIndex === i){
-                    return
-                }
-                items.children[i].tap()
-                nav_list.currentIndex = i
-                return
-            }
-        }
     }
 
 }

src/controls/FluObject.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
     id:flu_object;

src/controls/FluPaneItem.qml

@@ -1,8 +1,17 @@
-import QtQuick 2.15
+import QtQuick
+import FluentUI
 
 QtObject {
+    readonly property string key : FluApp.uuid()
+    readonly property int flag : 0
     property string title
-    property var icon
+    property int icon
+    property bool recentlyAdded: false
+    property bool recentlyUpdated: false
+    property string desc
+    property var image
+    property var parent
+    property int idx
     signal tap
     signal repTap
 }

src/controls/FluPaneItemExpander.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import FluentUI
+
+FluObject {
+    readonly property int flag : 3
+    readonly property string key : FluApp.uuid()
+    property string title
+    property int icon
+    property bool isExpand: false
+    property var parent
+    property int idx
+    signal tap
+    signal repTap
+}

src/controls/FluPaneItemHeader.qml

@@ -1,5 +1,9 @@
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
+    readonly property int flag : 1
+    readonly property string key : FluApp.uuid()
     property string title
+    property var parent
+    property int idx
 }

src/controls/FluPaneItemSeparator.qml

@@ -1,5 +1,8 @@
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
-
+    readonly property int flag : 2
+    readonly property string key : FluApp.uuid()
+    property var parent
+    property int idx
 }

src/controls/FluProgressBar.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.12
+import QtQuick.Controls
 
 FluRectangle {
 

src/controls/FluProgressRing.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.12
+import QtQuick.Controls
 
 Rectangle {
 

src/controls/FluRadioButton.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 
 Button {