update

Fix FluNavigationView push function in Standard mode.

.github/workflows/macos.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-12]
-        qt_ver: [6.4.3]
+        qt_ver: [6.5.0]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -50,7 +50,7 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.4.3/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.5.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: package

.github/workflows/ubuntu.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        qt_ver: [6.4.3]
+        qt_ver: [6.5.0]
         qt_arch: [gcc_64]
     env:
       targetName: example
@@ -47,7 +47,7 @@ jobs:
           version: 1.10.2
           
       - name: ubuntu install GL library
-        run: sudo apt-get install -y libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
+        run: sudo apt-get install -y libxcb-cursor0 libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
         
       - name: build ubuntu
         run: |
@@ -55,7 +55,7 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.4.3/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.5.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: install QT linux deploy

.github/workflows/windows-mingw.yml

@@ -23,7 +23,7 @@ jobs:
       matrix:
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.4.3
+            qt_ver: 6.5.0
             qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
             qt_tools_mingw_install: mingw900_64
     env:
@@ -62,7 +62,7 @@ jobs:
         run: |
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.4.3\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
       
       - name: package

.github/workflows/windows.yml

@@ -23,7 +23,7 @@ jobs:
       matrix:
         os: [windows-2019]
         include:
-          - qt_ver: 6.4.3          
+          - qt_ver: 6.5.0        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
             qt_arch_install: msvc2019_64          
@@ -42,7 +42,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech'
           
       - name: msvc-build
         id: build
@@ -51,7 +51,7 @@ jobs:
           call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.4.3\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
           echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%

CMakeLists.txt

@@ -1,7 +1,22 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(FluentUI VERSION 0.1 LANGUAGES CXX)
 
+option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
+option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
+
 add_subdirectory(src)
-add_subdirectory(example)
+
-add_subdirectory(framelesshelper)
+if (FLUENTUI_BUILD_EXAMPLES)
+    add_subdirectory(example)
+endif ()
+
+if (FLUENTUI_BUILD_FRAMELESSHEPLER)
+    add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
+    add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
+    add_subdirectory(framelesshelper)
+endif ()
+
+message("------------------------ FluentUI ------------------------")
+message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
+message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")

README.md

@@ -6,7 +6,7 @@
   QML FluentUI 
 </h1>
 <p align="center">
-  A fluent design component library for Qt QML
+  A fluent design component library for Qt QML。 <a href="https://zhuzichu520.github.io">official wasm app.</a>
 </p>
 
 ![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
@@ -42,7 +42,7 @@ This is a beautiful FluentUI component library based on Qt QML. Currently the ma
 + Qt LinguistTool (optional,for translations)
 + Qt Svg (optional, however essential for Qt 5)
 
-Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to aquire the moudules (**Recommanded**) or compile them first before using the library.
+Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to acquire the modules (**Recommended**) or compile them first before using the library.
 
 ## ⚽ Get started
 
@@ -115,5 +115,9 @@ View more [`here`](doc/md/all_components.md)!
 
 This FluentUI library currently licensed under [MIT License](./License)
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
+
 ## ⚡ Visitor count
 ![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

example/CMakeLists.txt

@@ -1,4 +1,4 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(example VERSION 0.1 LANGUAGES CXX)
 
@@ -20,9 +20,10 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,1,0)
+add_definitions(-DVERSION=1,3,5,0)
 
-find_package(Qt6 REQUIRED COMPONENTS Quick REQUIRED)
+find_package(Qt6 REQUIRED COMPONENTS Quick)
+qt_standard_project_setup()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -101,4 +102,13 @@ target_link_libraries(example PRIVATE
 #安装
 install(TARGETS example
     BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
+
+qt_generate_deploy_app_script(
+    TARGET example
+    OUTPUT_SCRIPT deploy_script
+    NO_UNSUPPORTED_PLATFORM_ERROR
+)
+install(SCRIPT ${deploy_script})

example/qml/App.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -13,7 +13,6 @@ Window {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
-            "/media":"qrc:/example/qml/window/MediaWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
             "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"

example/qml/TestWindow.qml

@@ -1,69 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import Qt.labs.platform
-import FluentUI
-import "qrc:///example/qml/global/"
-
-FluWindow {
-
-    id:window
-    title: "FluentUI"
-    width: 1000
-    height: 640
-    closeDestory:false
-    minimumWidth: 520
-    minimumHeight: 460
-    launchMode: FluWindow.SingleTask
-    visible: true
-
-    FluNavigationView2{
-        id:nav_view
-        anchors.fill: parent
-        items: ItemsOriginal
-        footerItems:ItemsFooter
-        z:11
-        displayMode:MainEvent.displayMode
-        logo: "qrc:/example/res/image/favicon.ico"
-        title:"FluentUI"
-        autoSuggestBox:FluAutoSuggestBox{
-            width: 280
-            anchors.centerIn: parent
-            iconSource: FluentIcons.Search
-            items: ItemsOriginal.getSearchData()
-            placeholderText: lang.search
-            onItemClicked:
-                (data)=>{
-                    ItemsOriginal.startPageByItem(data)
-                }
-        }
-        actionItem:Item{
-            height: 40
-            width: 148
-            RowLayout{
-                anchors.centerIn: parent
-                spacing: 5
-                FluText{
-                    text:lang.dark_mode
-                }
-                FluToggleSwitch{
-                    selected: FluTheme.dark
-                    clickFunc:function(){
-                        if(FluTheme.dark){
-                            FluTheme.darkMode = FluDarkMode.Light
-                        }else{
-                            FluTheme.darkMode = FluDarkMode.Dark
-                        }
-                    }
-                }
-            }
-        }
-        Component.onCompleted: {
-            ItemsOriginal.navigationView = nav_view
-            ItemsFooter.navigationView = nav_view
-//            nav_view.setCurrentIndex(0)
-        }
-    }
-
-}

example/qml/component/CodeExpander.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
@@ -6,17 +6,19 @@ import FluentUI
 
 FluExpander{
 
+    id:control
     property string code: ""
-
     headerText: "Source"
     contentHeight:content.height
+    focus: false
 
     FluMultilineTextBox{
         id:content
         width:parent.width
-        readOnly:true
+        activeFocusOnTab: false
+        activeFocusOnPress: false
+        readOnly: true
         text:highlightQmlCode(code)
-        focus:false
         textFormat: FluMultilineTextBox.RichText
         KeyNavigation.priority: KeyNavigation.BeforeItem
         background:Rectangle{
@@ -35,6 +37,11 @@ FluExpander{
             rightMargin: 5
             topMargin: 5
         }
+        onActiveFocusChanged: {
+            if(activeFocus){
+                control.expand = true
+            }
+        }
         onClicked:{
             FluTools.clipText(content.text)
             showSuccess("复制成功")
@@ -122,7 +129,9 @@ FluExpander{
                     "FluPasswordBox",
                     "FluBreadcrumbBar",
                     "FluCopyableText",
-          "FluAcrylic"
+                    "FluAcrylic",
+                    "FluRemoteLoader",
+                    "FluMenuBar"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import FluentUI
 import org.wangwenx190.FramelessHelper
@@ -12,10 +12,6 @@ FluWindow {
     property bool appBarVisible: true
     default property alias content: container.data
 
-    Component.onCompleted: {
-        console.debug(FramelessUtils.frameBorderVisible)
-    }
-
     FluAppBar {
         id: title_bar
         title: window.title
@@ -43,13 +39,24 @@ FluWindow {
         id:framless_helper
         onReady: {
             setTitleBarItem(title_bar)
-            framless_helper.moveWindowToDesktopCenter()
+            moveWindowToDesktopCenter()
             setHitTestVisible(title_bar.minimizeButton())
             setHitTestVisible(title_bar.maximizeButton())
             setHitTestVisible(title_bar.closeButton())
-            framless_helper.setWindowFixedSize(fixSize)
+            setWindowFixedSize(fixSize)
             title_bar.maximizeButton.visible = !fixSize
-            window.visible = true
+            if (blurBehindWindowEnabled)
+                window.backgroundVisible = false
+            window.show()
+        }
+    }
+    Connections{
+        target: FluTheme
+        function onDarkChanged(){
+            if (FluTheme.dark)
+                FramelessUtils.systemTheme = FramelessHelperConstants.Dark
+            else
+                FramelessUtils.systemTheme = FramelessHelperConstants.Light
         }
     }
 

example/qml/global/ItemsFooter.qml

@@ -1,4 +1,4 @@
-pragma Singleton
+pragma Singleton
 
 import QtQuick
 import FluentUI

example/qml/global/ItemsOriginal.qml

@@ -1,4 +1,4 @@
-pragma Singleton
+pragma Singleton
 
 import QtQuick
 import FluentUI
@@ -8,16 +8,17 @@ FluObject{
     property var navigationView
 
     FluPaneItem{
+        id:item_home
+        count: 9
         title:lang.home
+        infoBadge:FluBadge{
+            count: item_home.count
+        }
         icon:FluentIcons.Home
-        //        cusIcon: Image{
-        //            anchors.centerIn: parent
-        //            source: FluTheme.dark ? "qrc:/example/res/svg/home_dark.svg" : "qrc:/example/res/svg/home.svg"
-        //            sourceSize: Qt.size(30,30)
-        //            width: 18
-        //            height: 18
-        //        }
         onTap:{
+            if(navigationView.getCurrentUrl()){
+                item_home.count = 0
+            }
             navigationView.push("qrc:/example/qml/page/T_Home.qml")
         }
     }
@@ -26,17 +27,30 @@ FluObject{
         title:lang.basic_input
         icon:FluentIcons.CheckboxComposite
         FluPaneItem{
+            id:item_buttons
+            count: 99
+            infoBadge:FluBadge{
+                count: item_buttons.count
+            }
             title:"Buttons"
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
             onTap:{
+                item_buttons.count = 0
                 navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
             }
         }
         FluPaneItem{
+            id:item_text
             title:"Text"
+            count: 5
+            infoBadge:FluBadge{
+                count: item_text.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
             onTap:{
+                item_text.count = 0
                 navigationView.push("qrc:/example/qml/page/T_Text.qml")
             }
         }
@@ -166,6 +180,19 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
             }
         }
+        FluPaneItem{
+            id:item_combobox
+            title:"ComboBox"
+            count: 9
+            infoBadge:FluBadge{
+                count: item_combobox.count
+                color: Qt.rgba(250/255,173/255,20/255,1)
+            }
+            onTap:{
+                item_combobox.count = 0
+                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
+            }
+        }
         FluPaneItem{
             title:"Tooltip"
             onTap:{
@@ -225,6 +252,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_TableView.qml")
             }
         }
+        FluPaneItem{
+            title:"TableView2"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
+            }
+        }
         FluPaneItem{
             title:"MultiWindow"
             onTap:{
@@ -273,16 +306,19 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:lang.media
+        title:lang.other
-        icon:FluentIcons.Media
+        icon:FluentIcons.Shop
         FluPaneItem{
-            title:"MediaPlayer"
+            id:item_other
-            image:"qrc:/example/res/image/control/MediaPlayerElement.png"
+            title:"RemoteLoader"
-            recentlyAdded:true
+            count: 99
-            order:0
+            infoBadge:FluBadge{
-            desc:"A control to display video and image content."
+                count: item_other.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
             onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MediaPlayer.qml")
+                item_other.count = 0
+                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
             }
         }
     }

example/qml/global/MainEvent.qml

@@ -1,4 +1,4 @@
-pragma Singleton
+pragma Singleton
 
 import QtQuick
 import QtQuick.Controls

example/qml/page/T_Acrylic.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Awesome.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window

example/qml/page/T_Badge.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -33,6 +33,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:0
                     }
                 }
@@ -43,6 +45,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:5
                     }
                 }
@@ -52,6 +56,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:50
                     }
                 }
@@ -61,6 +67,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:100
                     }
                 }
@@ -70,6 +78,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         isDot:true
                     }
                 }
@@ -79,6 +89,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:99
                         color: Qt.rgba(250/255,173/255,20/255,1)
                     }
@@ -89,6 +101,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:99
                         color: Qt.rgba(82/255,196/255,26/255,1)
                     }

example/qml/page/T_BreadcrumbBar.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Buttons.qml

@@ -1,10 +1,10 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -22,7 +22,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextButton{
-            disabled:text_button_switch.selected
+            disabled:text_button_switch.checked
             text:"Text Button"
             onClicked: {
                 showInfo("点击Text Button")
@@ -32,18 +32,13 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:text_button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -64,7 +59,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluButton{
-            disabled:button_switch.selected
+            disabled:button_switch.checked
             text:"Standard Button"
             onClicked: {
                 showInfo("点击StandardButton")
@@ -74,18 +69,13 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -106,7 +96,7 @@ FluScrollablePage{
         paddings: 10
 
         FluFilledButton{
-            disabled:filled_button_switch.selected
+            disabled:filled_button_switch.checked
             text:"Filled Button"
             onClicked: {
                 showWarning("点击FilledButton"+height)
@@ -116,18 +106,13 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:filled_button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -148,28 +133,20 @@ FluScrollablePage{
         paddings: 10
 
         FluToggleButton{
-            disabled:toggle_button_switch.selected
+            disabled:toggle_button_switch.checked
             text:"Toggle Button"
-            onClicked: {
-               selected = !selected
-            }
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:toggle_button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -178,7 +155,7 @@ FluScrollablePage{
         code:'FluToggleButton{
     text:"Toggle Button"
     onClicked: {
-        selected = !selected
+        checked = !checked
     }
 }'
     }
@@ -191,7 +168,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluIconButton{
             iconSource:FluentIcons.ChromeCloseContrast
-            disabled:icon_button_switch.selected
+            disabled:icon_button_switch.checked
             iconSize: 15
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -201,18 +178,13 @@ FluScrollablePage{
                 showSuccess("点击IconButton")
             }
         }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:icon_button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -232,38 +204,32 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluDropDownButton{
-            disabled:drop_down_button_switch.selected
+            disabled:drop_down_button_switch.checked
             text:"DropDownButton"
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            items:[
             FluMenuItem{
                 text:"Menu_1"
-                },
+            }
             FluMenuItem{
                 text:"Menu_2"
-                },
+            }
             FluMenuItem{
                 text:"Menu_3"
-                },
+            }
             FluMenuItem{
                 text:"Menu_4"
             }
-            ]
-        }
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
         }
         FluToggleSwitch{
             id:drop_down_button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
@@ -304,35 +270,29 @@ FluScrollablePage{
                 property int selecIndex : 0
                 model: 3
                 delegate:  FluRadioButton{
-                    selected : repeater.selecIndex===index
+                    checked : repeater.selecIndex===index
-                    disabled:radio_button_switch.selected
+                    disabled:radio_button_switch.checked
                     text:"Radio Button_"+index
-                    onClicked:{
+                    clickListener:function(){
                         repeater.selecIndex = index
                     }
                 }
             }
         }
-
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:radio_button_switch
-                Layout.alignment: Qt.AlignRight
+            anchors{
-                text:"Disabled"
+                right: parent.right
+                verticalCenter: parent.verticalCenter
             }
+            text:"Disabled"
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluRadioButton{
-    selected:true
+    checked:true
     text:"Text Button"
     onClicked: {
 
@@ -340,38 +300,4 @@ FluScrollablePage{
 }'
     }
 
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluCheckBox{
-            disabled:check_box_switch.selected
-            text:"Check Box"
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:check_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCheckBox{
-    text:"Check Box"
-}'
-    }
 }

example/qml/page/T_CalendarPicker.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Carousel.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_CheckBox.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -18,11 +18,21 @@ FluScrollablePage{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
             FluCheckBox{
+                disabled: check_box_switch.checked
             }
             FluCheckBox{
+                disabled: check_box_switch.checked
                 text:"Text"
             }
         }
+        FluToggleSwitch{
+            id:check_box_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
     }
     CodeExpander{
         Layout.fillWidth: true

example/qml/page/T_ColorPicker.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_ComboBox.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"ComboBox"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 80
+        paddings: 5
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "editable=false"
+                x:10
+            }
+            FluComboBox {
+                model: ListModel {
+                    id: model_1
+                    ListElement { text: "Banana" }
+                    ListElement { text: "Apple" }
+                    ListElement { text: "Coconut" }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 80
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "editable=true"
+                x:5
+            }
+            FluComboBox {
+                editable: true
+                model: ListModel {
+                    id: model_2
+                    ListElement { text: "Banana" }
+                    ListElement { text: "Apple" }
+                    ListElement { text: "Coconut" }
+                }
+                onAccepted: {
+                    if (find(editText) === -1)
+                        model_2.append({text: editText})
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluComboBox{
+    editable: true
+    model: ListModel {
+        id: model
+        ListElement { text: "Banana" }
+        ListElement { text: "Apple" }
+        ListElement { text: "Coconut" }
+    }
+    onAccepted: {
+        if (find(editText) === -1)
+            model.append({text: editText})
+    }
+}'
+    }
+
+}

example/qml/page/T_DatePicker.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Dialog.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Expander.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -40,9 +40,9 @@ FluScrollablePage{
                             property int selecIndex : 0
                             model: 3
                             delegate:  FluRadioButton{
-                                selected : repeater.selecIndex===index
+                                checked : repeater.selecIndex===index
                                 text:"Radio Button_"+index
-                                onClicked:{
+                                clickListener:function() {
                                     repeater.selecIndex = index
                                 }
                             }

example/qml/page/T_FlipView.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Home.qml

@@ -1,12 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 import FluentUI
 
 FluScrollablePage{
 
+    pageMode: FluNavigationView.SingleTask
+
     ListModel{
         id:model_header
         ListElement{
@@ -75,10 +77,10 @@ FluScrollablePage{
                     FluAcrylic {
                         sourceItem:bg
                         anchors.fill: parent
-                        color: FluTheme.dark ? 'black' : 'white'
+                        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
                         rectX: list.x-list.contentX+10+(control.width)*index
                         rectY: list.y+10
-                        acrylicOpacity:0.5
+                        acrylicOpacity:0.8
                     }
                     Rectangle{
                         anchors.fill: parent

example/qml/page/T_InfoBar.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_MediaPlayer.qml

@@ -1,62 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title:"MediaPlayer"
-
-    onVisibleChanged: {
-        if(visible){
-            player.play()
-        }else{
-            player.pause()
-        }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        height: 320
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluMediaPlayer{
-                id:player
-                source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMediaPlayer{
-    id:player
-    source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-}
-'
-    }
-    FluArea{
-        Layout.fillWidth: true
-        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/qml/page/T_Menu.qml

@@ -1,14 +1,32 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Menu"
 
+    FluMenu {
+        id:menu
+        title: qsTr("File")
+        Action { text: qsTr("New...")}
+        Action { text: qsTr("Open...") }
+        Action { text: qsTr("Save") }
+        FluMenuSeparator { }
+        Action { text: qsTr("Quit") }
+        FluMenuSeparator { }
+        Action { text: qsTr("Check");checkable: true;checked: true}
+        FluMenu{
+            title: "Save As..."
+            Action { text: qsTr("Doc") }
+            Action { text: qsTr("PDF") }
+        }
+    }
+
+
     FluArea{
         Layout.fillWidth: true
         height: 100
@@ -22,28 +40,19 @@ FluScrollablePage{
                 left:parent.left
             }
 
+            FluText{
+                text:"Menu"
+            }
+
             FluButton{
-                text:"左击菜单"
+                text:"Show Menu Popup"
                 Layout.topMargin: 20
                 onClicked:{
                     menu.popup()
                 }
             }
 
-            FluButton{
+
-                text:"右击菜单"
-                Layout.topMargin: 20
-                onClicked: {
-                    showSuccess("请按鼠标右击")
-                }
-                MouseArea{
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: {
-                        menu.popup()
-                    }
-                }
-            }
         }
     }
 
@@ -61,7 +70,7 @@ FluScrollablePage{
     FluMenuItem:{
         text:"修改"
         onClicked: {
-            showInfo"修改")
+            showInfo("修改")
         }
     }
 }
@@ -69,20 +78,74 @@ menu.popup()
 '
     }
 
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+
+            FluText{
+                text:"MenuBar"
+            }
+
+            FluMenuBar {
+                id:menu_bar
+                FluMenu {
+                    title: qsTr("File")
+                    Action { text: qsTr("New...") }
+                    Action { text: qsTr("Open...") }
+                    Action { text: qsTr("Save") }
+                    FluMenuSeparator { }
+                    Action { text: qsTr("Quit") }
                     FluMenu{
-        id:menu
+                        title: "Save As..."
-        FluMenuItem{
+                        Action { text: qsTr("Doc") }
-            text:"删除"
+                        Action { text: qsTr("PDF") }
-            onClicked: {
-                showError("删除")
                     }
                 }
-        FluMenuItem{
+                FluMenu {
-            text:"修改"
+                    title: qsTr("Edit")
-            onClicked: {
+                    Action { text: qsTr("Cut") }
-                showInfo("修改")
+                    Action { text: qsTr("Copy") }
+                    Action { text: qsTr("Paste") }
                 }
+                FluMenu {
+                    title: qsTr("Help")
+                    Action { text: qsTr("About") }
                 }
             }
 
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluMenuBar{
+    id:menu
+    FluMenu:{
+        title:"File"
+        Action { text: qsTr("New...") }
+    }
+    FluMenu:{
+        title:"Edit"
+        Action { text: qsTr("Cut") }
+        Action { text: qsTr("Copy") }
+        Action { text: qsTr("Paste") }
+    }
+}
+menu.popup()
+'
+    }
+
+
+
+
 }

example/qml/page/T_MultiWindow.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Pivot.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_Progress.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -35,8 +35,9 @@ FluScrollablePage{
             FluSlider{
                 value:50
                 onValueChanged:{
-                    progress_bar.progress = value/100
+                    var progress = value/100
-                    progress_ring.progress = value/100
+                    progress_bar.progress = progress
+                    progress_ring.progress = progress
                 }
             }
         }

example/qml/page/T_RatingControl.qml

@@ -1,40 +1,35 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
-FluScrollablePage{
+FluScrollablePage {
 
-    title:"RatingControl"
+    title: "RatingControl"
 
-    FluArea{
+    FluArea {
         Layout.fillWidth: true
         height: 100
         paddings: 10
         Layout.topMargin: 20
 
-        Column{
+        Column {
             spacing: 10
             anchors.verticalCenter: parent.verticalCenter
-            FluRatingControl{
+            FluRatingControl {}
-
+            FluRatingControl {
+                number: 10
             }
-            FluRatingControl{
-                number:10
         }
     }
 
-    }
+    CodeExpander {
-
-    CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluRatingControl{
+        code: 'FluRatingControl{
 
 }'
     }
-
-
 }

example/qml/page/T_Rectangle.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_RemoteLoader.qml

@@ -0,0 +1,12 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluRemoteLoader{
+    property int pageMode: FluNavigationView.SingleTop
+    property string url: ''
+    source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+}

example/qml/page/T_Settings.qml

@@ -1,10 +1,10 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -30,17 +30,14 @@ FluScrollablePage{
             Repeater{
                 model: [{title:"System",mode:FluDarkMode.System},{title:"Light",mode:FluDarkMode.Light},{title:"Dark",mode:FluDarkMode.Dark}]
                 delegate:  FluRadioButton{
-                    selected : FluTheme.darkMode === modelData.mode
+                    checked : FluTheme.darkMode === modelData.mode
                     text:modelData.title
-                    onClicked:{
+                    clickListener:function(){
                         FluTheme.darkMode = modelData.mode
                     }
                 }
             }
-
-
         }
-
     }
 
     FluArea{
@@ -64,9 +61,9 @@ FluScrollablePage{
             Repeater{
                 model: [{title:"Open",mode:FluNavigationView.Open},{title:"Compact",mode:FluNavigationView.Compact},{title:"Minimal",mode:FluNavigationView.Minimal},{title:"Auto",mode:FluNavigationView.Auto}]
                 delegate: FluRadioButton{
-                    selected : MainEvent.displayMode===modelData.mode
+                    checked : MainEvent.displayMode===modelData.mode
                     text:modelData.title
-                    onClicked:{
+                    clickListener:function(){
                         MainEvent.displayMode = modelData.mode
                     }
                 }
@@ -98,10 +95,9 @@ FluScrollablePage{
                 Repeater{
                     model: ["Zh","En"]
                     delegate: FluRadioButton{
-                        selected : appInfo.lang.objectName === modelData
+                        checked: appInfo.lang.objectName === modelData
                         text:modelData
-                        onClicked:{
+                        clickListener:function(){
-                            console.debug(modelData)
                             appInfo.changeLang(modelData)
                         }
                     }

example/qml/page/T_Slider.qml

@@ -1,8 +1,8 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "../component"
+import "qrc:///example/qml/component"
 import FluentUI
 
 FluScrollablePage{
@@ -15,7 +15,6 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -34,10 +33,8 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
+            orientation: Qt.Vertical
-            vertical:true
             anchors.left: parent.left
-            anchors.leftMargin: 20
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -45,7 +42,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluSlider{
-    vertical:true
+    orientation: Qt.Vertical
     value:50
 }'
     }

example/qml/page/T_StatusView.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -21,28 +21,27 @@ FluScrollablePage{
                 id:btn_status_mode
                 Layout.preferredWidth: 140
                 text:"Loading"
-                items:[
                 FluMenuItem{
                     text:"Loading"
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusView.Loading
                     }
-                    },
+                }
                 FluMenuItem{
                     text:"Empty"
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusView.Empty
                     }
-                    },
+                }
                 FluMenuItem{
                     text:"Error"
                     onClicked: {
                         btn_status_mode.text = text
                         status_view.statusMode = FluStatusView.Error
                     }
-                    },
+                }
                 FluMenuItem{
                     text:"Success"
                     onClicked: {
@@ -50,7 +49,6 @@ FluScrollablePage{
                         status_view.statusMode = FluStatusView.Success
                     }
                 }
-                ]
             }
         }
     }

example/qml/page/T_TabView.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -40,21 +40,20 @@ FluScrollablePage{
                 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: {
@@ -62,27 +61,25 @@ FluScrollablePage{
                         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: {
@@ -90,7 +87,6 @@ FluScrollablePage{
                         tab_view.closeButtonVisibility = FluTabView.OnHover
                     }
                 }
-                ]
             }
         }
     }

example/qml/page/T_TableView.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -14,12 +14,14 @@ FluScrollablePage{
                           {
                               title: '姓名',
                               dataIndex: 'name',
-                              width:100
+                              width:100,
+
                           },
                           {
                               title: '年龄',
-                              dataIndex: 'age',
+                              dataIndex: 'item_age',
-                              width:100
+                              width:100,
+                              minimumWidth:100
                           },
                           {
                               title: '住址',
@@ -41,6 +43,62 @@ FluScrollablePage{
         loadData(1,10)
     }
 
+    Component{
+        id:com_age
+        Item{
+            id:item_age
+            property var ageArr: [100,300,500,1000]
+            height: 60
+            FluComboBox{
+                width: 80
+                anchors{
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                    leftMargin: 10
+                }
+                model: ListModel {
+                    ListElement { text: 100 }
+                    ListElement { text: 300 }
+                    ListElement { text: 500 }
+                    ListElement { text: 1000 }
+                }
+                Component.onCompleted: {
+                    currentIndex=ageArr.findIndex((element) => element === dataModel.age)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_action
+        Item{
+            height: 60
+            Row{
+                anchors.centerIn: parent
+                spacing: 10
+                FluFilledButton{
+                    text:"编辑"
+                    horizontalPadding: 6
+                    onClicked:{
+                        showError(JSON.stringify(dataObject))
+                    }
+                }
+                FluFilledButton{
+                    text:"删除"
+                    horizontalPadding: 6
+                    onClicked:{
+                        table_view.remove(dataModel.index)
+                    }
+                }
+            }
+        }
+    }
+
+    FluText{
+        Layout.topMargin: 20
+        text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。"
+    }
+
     FluTableView{
         id:table_view
         Layout.fillWidth: true
@@ -54,30 +112,6 @@ FluScrollablePage{
             }
     }
 
-    Component{
-        id:com_action
-        Item{
-            Row{
-                anchors.centerIn: parent
-                spacing: 10
-                FluFilledButton{
-                    text:"编辑"
-                    horizontalPadding: 6
-                    onClicked:{
-                        showSuccess(JSON.stringify(dataObject))
-                    }
-                }
-                FluFilledButton{
-                    text:"删除"
-                    horizontalPadding: 6
-                    onClicked:{
-                        showError(JSON.stringify(dataObject))
-                    }
-                }
-            }
-        }
-    }
-
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: 10
@@ -130,13 +164,34 @@ FluScrollablePage{
     }
 
     function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
         const dataSource = []
         for(var i=0;i<count;i++){
             dataSource.push({
-                                name: "孙悟空%1".arg(((page-1)*count+i)),
+                                name: getRandomName(),
-                                age: 500,
+                                item_age: com_age,
-                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
+                                age:getRandomAge(),
-                                nickname: "齐天大圣",
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
                                 action:com_action
                             })
         }

example/qml/page/T_TableView2.qml

@@ -0,0 +1,107 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluContentPage{
+
+    title:"TableView2"
+
+    Component.onCompleted: {
+        loadData(1,2000)
+    }
+
+    function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname()
+                            })
+        }
+        table_view.dataSource = dataSource
+    }
+
+    Component{
+        id:com_combobox
+
+        FluComboBox {
+            anchors.fill: parent
+            currentIndex: display
+            editable: true
+            model: ListModel {
+                ListElement { text: 100 }
+                ListElement { text: 300 }
+                ListElement { text: 500 }
+                ListElement { text: 1000 }
+            }
+            Component.onCompleted: {
+                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
+                selectAll()
+            }
+            TableView.onCommit: {
+                display = editText
+            }
+        }
+    }
+
+    FluTableView2{
+        id:table_view
+        anchors.fill: parent
+        anchors.topMargin: 20
+        columnSource:[
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                width:100,
+                minimumWidth:50
+
+            },
+            {
+                title: '年龄',
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth: 100
+            },
+            {
+                title: '住址',
+                dataIndex: 'address',
+                width:200
+            },
+            {
+                title: '别名',
+                dataIndex: 'nickname',
+                width:100,
+
+            }
+        ]
+    }
+
+
+}

example/qml/page/T_Text.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_TextBox.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -19,7 +19,7 @@ FluScrollablePage{
             Layout.topMargin: 20
             placeholderText: "单行输入框"
             Layout.preferredWidth: 300
-            disabled:text_box_switch.selected
+            disabled:text_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -57,7 +57,7 @@ FluScrollablePage{
             Layout.topMargin: 20
             placeholderText: "请输入密码"
             Layout.preferredWidth: 300
-            disabled:password_box_switch.selected
+            disabled:password_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -97,7 +97,7 @@ FluScrollablePage{
             Layout.topMargin: 20
             placeholderText: "多行输入框"
             Layout.preferredWidth: 300
-            disabled:text_box_multi_switch.selected
+            disabled:text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -137,7 +137,7 @@ FluScrollablePage{
             placeholderText: "AutoSuggestBox"
             Layout.preferredWidth: 300
             items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.selected
+            disabled:text_box_suggest_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left

example/qml/page/T_Theme.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -52,8 +52,8 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                selected: FluTheme.dark
+                checked: FluTheme.dark
-                clickFunc:function(){
+                onClicked: {
                     if(FluTheme.dark){
                         FluTheme.darkMode = FluDarkMode.Light
                     }else{
@@ -67,8 +67,8 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                selected: FluTheme.nativeText
+                checked: FluTheme.nativeText
-                clickFunc:function(){
+                onClicked: {
                     FluTheme.nativeText = !FluTheme.nativeText
                 }
             }

example/qml/page/T_TimePicker.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_ToggleSwitch.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -18,11 +18,20 @@ FluScrollablePage{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
             FluToggleSwitch{
+                disabled: toggle_switch.checked
             }
             FluToggleSwitch{
-                text:"Text"
+                disabled: toggle_switch.checked
             }
         }
+        FluToggleSwitch{
+            id:toggle_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
     }
     CodeExpander{
         Layout.fillWidth: true

example/qml/page/T_Tooltip.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_TreeView.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage {
 
@@ -60,21 +60,20 @@ FluScrollablePage {
                 id:btn_selection_model
                 Layout.preferredWidth: 140
                 text:"None"
-                items:[
                 FluMenuItem{
                     text:"None"
                     onClicked: {
                         btn_selection_model.text = text
                         tree_view.selectionMode = FluTabView.Equal
                     }
-                    },
+                }
                 FluMenuItem{
                     text:"Single"
                     onClicked: {
                         btn_selection_model.text = text
                         tree_view.selectionMode = FluTabView.SizeToContent
                     }
-                    },
+                }
                 FluMenuItem{
                     text:"Muiltple"
                     onClicked: {
@@ -82,7 +81,6 @@ FluScrollablePage {
                         tree_view.selectionMode = FluTabView.Compact
                     }
                 }
-                ]
             }
             FluFilledButton{
                 text:"获取选中的数据"

example/qml/page/T_Typography.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
@@ -10,10 +10,6 @@ FluContentPage {
     title: "Typography"
     rightPadding: 10
 
-    Component.onCompleted: {
-        slider.seek(0)
-    }
-
     FluArea{
         anchors{
             top:parent.top
@@ -73,7 +69,7 @@ FluContentPage {
 
         FluSlider{
             id:slider
-            vertical:true
+            orientation: Qt.Vertical
             anchors{
                 right: parent.right
                 rightMargin: 45

example/qml/window/AboutWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 CustomWindow {
 

example/qml/window/LoginWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 CustomWindow {
 

example/qml/window/MainWindow.qml

@@ -1,11 +1,11 @@
-import QtQuick
+import QtQuick
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 
 CustomWindow {
 
@@ -64,19 +64,42 @@ CustomWindow {
         negativeText:"最小化"
         buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
         onNegativeClicked:{
-            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
             window.hide()
+            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
         }
         positiveText:"退出"
         neutralText:"取消"
+        blurSource: nav_view
         onPositiveClicked:{
             window.deleteWindow()
             FluApp.closeApp()
         }
     }
 
+    Flipable{
+        id:flipable
+        anchors.fill: parent
+        property bool flipped: false
+        property real flipAngle: 0
+        transform: Rotation {
+            id: rotation
+            origin.x: flipable.width/2
+            origin.y: flipable.height/2
+            axis { x: 0; y: 1; z: 0 }
+            angle: flipable.flipAngle
+
+        }
+        states: State {
+            PropertyChanges { target: flipable; flipAngle: 180 }
+            when: flipable.flipped
+        }
+        transitions: Transition {
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
+        }
+        back: Item{
+            anchors.fill: flipable
+            visible: flipable.flipAngle !== 0
             FluAppBar {
-        id: title_bar
                 anchors {
                     top: parent.top
                     left: parent.left
@@ -85,16 +108,57 @@ CustomWindow {
                 darkText: lang.dark_mode
                 showDark: true
                 z:7
+                darkClickListener:(button)=>handleDarkChanged(button)
+            }
+            Row{
+                z:8
+                FluIconButton{
+                    iconSource: FluentIcons.ChromeBack
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        flipable.flipped = false
+                    }
+                }
+                FluIconButton{
+                    iconSource: FluentIcons.Sync
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        loader.reload()
+                    }
+                }
             }
 
-    FluNavigationView{
+            FluRemoteLoader{
-        id:nav_view
+                id:loader
-        anchors{
+                anchors.fill: parent
+                //                source: "http://localhost:9000/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
+            }
+        }
+        front: Item{
+            id:page_front
+            visible: flipable.flipAngle !== 180
+            anchors.fill: flipable
+            FluAppBar {
+                anchors {
                     top: parent.top
                     left: parent.left
                     right: parent.right
-            bottom: parent.bottom
                 }
+                darkText: lang.dark_mode
+                showDark: true
+                darkClickListener:(button)=>handleDarkChanged(button)
+                z:7
+            }
+            FluNavigationView{
+                property int clickCount: 0
+                id:nav_view
+                width: parent.width
+                height: parent.height
                 z:999
                 items: ItemsOriginal
                 footerItems:ItemsFooter
@@ -102,6 +166,20 @@ CustomWindow {
                 displayMode:MainEvent.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
+                Behavior on rotation {
+                    NumberAnimation{
+                        duration: 167
+                    }
+                }
+                transformOrigin: Item.Center
+                onLoginClicked:{
+                    clickCount += 1
+                    if(clickCount === 1){
+                        loader.reload()
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
                 autoSuggestBox:FluAutoSuggestBox{
                     width: 280
                     anchors.centerIn: parent
@@ -116,7 +194,106 @@ CustomWindow {
                 Component.onCompleted: {
                     ItemsOriginal.navigationView = nav_view
                     ItemsFooter.navigationView = nav_view
-            nav_view.setCurrentIndex(0)
+                    setCurrentIndex(0)
                 }
             }
+        }
+    }
+
+    Image{
+        id:img_cache
+        visible: false
+        anchors.fill: parent
+    }
+
+    Canvas{
+        id:canvas
+        anchors.fill: parent
+        property int centerX: canvas.width / 2
+        property int centerY: canvas.height / 2
+        property real radius: 0
+        property int maxRadius: 0
+        property url imageUrl
+        Behavior on radius{
+            id:anim_radius
+            NumberAnimation {
+                target: canvas
+                property: "radius"
+                duration: 666
+                easing.type: Easing.OutCubic
+            }
+        }
+        onRadiusChanged: {
+            canvas.requestPaint()
+        }
+        onPaint: {
+            var ctx = canvas.getContext("2d");
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
+            ctx.save()
+            if(img_cache.source.toString().length!==0){
+                try{
+                    ctx.drawImage(img_cache, 0, 0,  canvasSize.width, canvasSize.height, 0, 0,  canvasSize.width, canvasSize.height)
+                }catch(e){
+                    img_cache.source = ""
+                }
+            }
+            clearArc(ctx, centerX, centerY, radius)
+            ctx.restore()
+        }
+        function clearArc(ctx,x, y, radius, startAngle, endAngle) {
+            ctx.beginPath()
+            ctx.globalCompositeOperation = 'destination-out'
+            ctx.fillStyle = 'black'
+            ctx.arc(x, y, radius, 0, 2*Math.PI);
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+
+    function distance(x1,y1,x2,y2){
+        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
+    }
+
+    function handleDarkChanged(button){
+        var changeDark = function(){
+            if(FluTheme.dark){
+                FluTheme.darkMode = FluDarkMode.Light
+            }else{
+                FluTheme.darkMode = FluDarkMode.Dark
+            }
+        }
+        if(FluTools.isWin()){
+            var target = window.contentItem
+            var pos = button.mapToItem(target,0,0)
+            var mouseX = pos.x
+            var mouseY = pos.y
+            canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            target.grabToImage(function(result) {
+                img_cache.source = result.url
+                canvas.requestPaint()
+                changeDark()
+                canvas.centerX = mouseX
+                canvas.centerY = mouseY
+                anim_radius.enabled = false
+                canvas.radius = 0
+                anim_radius.enabled = true
+                canvas.radius = canvas.maxRadius
+            },canvas.canvasSize)
+        }else{
+            changeDark()
+        }
+    }
+
+    Shortcut {
+        sequence: "F5"
+        context: Qt.WindowShortcut
+        onActivated: {
+            if(flipable.flipped){
+                loader.reload()
+            }
+        }
+    }
+
+
 }

example/qml/window/MediaWindow.qml

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

example/qml/window/SingleInstanceWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 CustomWindow {
 

example/qml/window/SingleTaskWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 CustomWindow {
 

example/qml/window/StandardWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 CustomWindow {
 
@@ -13,6 +13,28 @@ CustomWindow {
     fixSize: true
     launchMode: FluWindow.Standard
 
+    FluMenuBar {
+        FluMenu {
+            title: qsTr("File")
+            Action { text: qsTr("New...") }
+            Action { text: qsTr("Open...") }
+            Action { text: qsTr("Save") }
+            Action { text: qsTr("Save As...") }
+            FluMenuSeparator { }
+            Action { text: qsTr("Quit") }
+        }
+        FluMenu {
+            title: qsTr("Edit")
+            Action { text: qsTr("Cut") }
+            Action { text: qsTr("Copy") }
+            Action { text: qsTr("Paste") }
+        }
+        FluMenu {
+            title: qsTr("Help")
+            Action { text: qsTr("About") }
+        }
+    }
+
     FluText{
         anchors.centerIn: parent
         text:"我是一个Standard模式的窗口，每次我都会创建一个新的窗口"

example/src/AppInfo.cpp

@@ -1,7 +1,9 @@
-#include "AppInfo.h"
+#include "AppInfo.h"
+
+#include <QQmlContext>
+#include <QDebug>
 #include "lang/En.h"
 #include "lang/Zh.h"
-#include <QDebug>
 
 #define STR(x) #x
 #define VER_JOIN(a,b,c,d) STR(a.b.c.d)
@@ -15,6 +17,16 @@ AppInfo::AppInfo(QObject *parent)
     lang(new En());
 }
 
+void AppInfo::init(QQmlApplicationEngine *engine){
+    QQmlContext * context = engine->rootContext();
+    Lang* lang = this->lang();
+    context->setContextProperty("lang",lang);
+    QObject::connect(this,&AppInfo::langChanged,this,[=]{
+        context->setContextProperty("lang",this->lang());
+    });
+    context->setContextProperty("appInfo",this);
+}
+
 void AppInfo::changeLang(const QString& locale){
     if(_lang){
         _lang->deleteLater();
@@ -26,5 +38,19 @@ void AppInfo::changeLang(const QString& locale){
     }else {
         lang(new En());
     }
-
+}
+
+bool AppInfo::isOwnerProcess(IPC *ipc){
+    QString activeWindowEvent = "activeWindow";
+    if(!ipc->isCurrentOwner()){
+        ipc->postEvent(activeWindowEvent,QString().toUtf8(),0);
+        return false;
+    }
+    if(ipc->isAttached()){
+        ipc->registerEventHandler(activeWindowEvent,[=](const QByteArray&){
+            Q_EMIT this->activeWindow();
+            return true;
+        });
+    }
+    return true;
 }

example/src/AppInfo.h

@@ -1,7 +1,9 @@
-#ifndef APPINFO_H
+#ifndef APPINFO_H
 #define APPINFO_H
 
 #include <QObject>
+#include <QQmlApplicationEngine>
+#include "tool/IPC.h"
 #include "lang/Lang.h"
 #include "stdafx.h"
 
@@ -12,6 +14,8 @@ class AppInfo : public QObject
     Q_PROPERTY_AUTO(Lang*,lang)
 public:
     explicit AppInfo(QObject *parent = nullptr);
+    void init(QQmlApplicationEngine *engine);
+    bool isOwnerProcess(IPC *ipc);
     Q_INVOKABLE void changeLang(const QString& locale);
     Q_SIGNAL void activeWindow();
 };

example/src/lang/En.cpp

@@ -1,4 +1,4 @@
-#include "En.h"
+#include "En.h"
 
 En::En(QObject *parent)
     : Lang{parent}
@@ -19,4 +19,5 @@ En::En(QObject *parent)
     settings("Settings");
     locale("Locale");
     navigation_view_display_mode("NavigationView Display Mode");
+    other("Other");
 }

example/src/lang/En.h

@@ -1,4 +1,4 @@
-#ifndef EN_H
+#ifndef EN_H
 #define EN_H
 
 #include <QObject>

example/src/lang/Lang.h

@@ -1,4 +1,4 @@
-#ifndef LANG_H
+#ifndef LANG_H
 #define LANG_H
 
 #include <QObject>
@@ -22,6 +22,7 @@ class Lang : public QObject
     Q_PROPERTY_AUTO(QString,settings);
     Q_PROPERTY_AUTO(QString,navigation_view_display_mode);
     Q_PROPERTY_AUTO(QString,locale);
+    Q_PROPERTY_AUTO(QString,other);
 public:
     explicit Lang(QObject *parent = nullptr);
 

example/src/lang/Zh.cpp

@@ -1,4 +1,4 @@
-#include "Zh.h"
+#include "Zh.h"
 
 Zh::Zh(QObject *parent)
     : Lang{parent}
@@ -19,4 +19,5 @@ Zh::Zh(QObject *parent)
     settings("设置");
     locale("语言环境");
     navigation_view_display_mode("导航视图显示模式");
+    other("其他");
 }

example/src/lang/Zh.h

@@ -1,4 +1,4 @@
-#ifndef ZH_H
+#ifndef ZH_H
 #define ZH_H
 
 #include <QObject>

example/src/main.cpp

@@ -1,4 +1,4 @@
-#include <QGuiApplication>
+#include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include <QQmlContext>
 #include <QDir>
@@ -6,13 +6,11 @@
 #include <QProcess>
 #include <FramelessHelper/Quick/framelessquickmodule.h>
 #include <FramelessHelper/Core/private/framelessconfig_p.h>
-#include "lang/Lang.h"
 #include "AppInfo.h"
-#include "tool/IPC.h"
 
 FRAMELESSHELPER_USE_NAMESPACE
 
-    int main(int argc, char *argv[])
+int main(int argc, char *argv[])
 {
     //将样式设置为Basic，不然会导致组件显示异常
     qputenv("QT_QUICK_CONTROLS_STYLE","Basic");
@@ -21,33 +19,26 @@ FRAMELESSHELPER_USE_NAMESPACE
     QGuiApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QGuiApplication::setApplicationName("FluentUI");
     QGuiApplication app(argc, argv);
+#ifdef Q_OS_WIN // 此设置仅在Windows下生效
     FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
+#endif
+    FramelessConfig::instance()->set(Global::Option::DisableLazyInitializationForMicaMaterial);
+    FramelessConfig::instance()->set(Global::Option::CenterWindowBeforeShow);
+    FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur);
+    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow);
+#ifdef Q_OS_MACOS
+    FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false);
+#endif
     AppInfo* appInfo = new AppInfo();
     IPC ipc(0);
-    QString activeWindowEvent = "activeWindow";
+    if(!appInfo->isOwnerProcess(&ipc)){
-    if(!ipc.isCurrentOwner()){
-        ipc.postEvent(activeWindowEvent,QString().toUtf8(),0);
-        delete appInfo;
         return 0;
     }
-    if(ipc.isAttached()){
-        ipc.registerEventHandler(activeWindowEvent,[&appInfo](const QByteArray&){
-            Q_EMIT appInfo->activeWindow();
-            return true;
-        });
-    }
     app.setQuitOnLastWindowClosed(false);
     QQmlApplicationEngine engine;
     FramelessHelper::Quick::registerTypes(&engine);
-    QQmlContext * context = engine.rootContext();
+    appInfo->init(&engine);
-    Lang* lang = appInfo->lang();
-    context->setContextProperty("lang",lang);
-    QObject::connect(appInfo,&AppInfo::langChanged,&app,[context,appInfo]{
-        context->setContextProperty("lang",appInfo->lang());
-    });
-    context->setContextProperty("appInfo",appInfo);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
-    //    const QUrl url(QStringLiteral("qrc:/example/qml/TestWindow.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
         &app, [url](QObject *obj, const QUrl &objUrl) {
             if (!obj && url == objUrl)

example/src/stdafx.h

@@ -1,4 +1,4 @@
-#if defined(_MSC_VER) && (_MSC_VER >= 1600)
+#if defined(_MSC_VER) && (_MSC_VER >= 1600)
 #pragma execution_character_set("utf-8")
 #endif
 

example/src/tool/IPC.cpp

@@ -1,4 +1,4 @@
-#include "IPC.h"
+#include "IPC.h"
 
 #include <QCoreApplication>
 #include <QDebug>

example/src/tool/IPC.h

@@ -1,4 +1,4 @@
-#ifndef IPC_H
+#ifndef IPC_H
 #define IPC_H
 
 #include <QMap>

src/CMakeLists.txt

@@ -1,4 +1,4 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(fluentuiplugin LANGUAGES CXX)
 
@@ -13,9 +13,10 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,1,0)
+add_definitions(-DVERSION=1,3,5,0)
 
-find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml ShaderTools)
+find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
+qt_standard_project_setup()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -32,7 +33,7 @@ foreach(filepath ${QML_PATHS})
 endforeach(filepath)
 
 #遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.qsb *.metainfo)
+file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
 foreach(filepath ${RES_PATHS})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND resource_files ${filename})
@@ -52,24 +53,19 @@ qt_add_qml_module(fluentuiplugin
     OUTPUT_DIRECTORY ${QML_PLUGIN_DIRECTORY}
     VERSION 1.0
     URI "FluentUI"
+    #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
+    TYPEINFO "plugins.qmltypes"
     SOURCES ${sources_files} fluentui.rc
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}
-    #支持designer
-    DESIGNER_SUPPORTED
 )
 
 #链接库
 target_link_libraries(fluentuiplugin PUBLIC
-    Qt::CorePrivate
+    Qt::Core
-    Qt::QuickPrivate
+    Qt::Quick
-    Qt::QmlPrivate
+    Qt::Qml
 )
 
-#链接库 win32库 不然mingw会编译错误
+#安装
-if(WIN32)
+install(DIRECTORY ${QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)
-    target_link_libraries(fluentuiplugin PRIVATE dwmapi user32)
-endif()
-
-#如果是debug，则生成的库文件名后面拼接d
-set_target_properties(fluentuiplugin PROPERTIES DEBUG_POSTFIX "d")

src/Def.cpp

@@ -1,3 +1 @@
-#include "Def.h"
+#include "Def.h"
-
-

src/Def.h

@@ -1,4 +1,4 @@
-#ifndef DEF_H
+#ifndef DEF_H
 #define DEF_H
 
 #include <QObject>

src/FluApp.cpp

@@ -1,4 +1,4 @@
-#include "FluApp.h"
+#include "FluApp.h"
 
 #include <QQmlEngine>
 #include <QGuiApplication>
@@ -23,11 +23,9 @@ FluApp *FluApp::getInstance()
 FluApp::FluApp(QObject *parent)
     : QObject{parent}
 {
-    QFontDatabase::addApplicationFont(":/FluentUI/Font/Segoe_Fluent_Icons.ttf");
 }
 
 FluApp::~FluApp(){
-
 }
 
 void FluApp::init(QQuickWindow *window){
@@ -45,6 +43,10 @@ void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegist
     }
     QQmlEngine *engine = qmlEngine(appWindow);
     QQmlComponent component(engine, routes().value(route).toString());
+    if (component.isError()) {
+        qWarning() << component.errors();
+        return;
+    }
     QVariantMap properties;
     properties.insert("route",route);
     if(fluRegister){

src/FluApp.h

@@ -1,4 +1,4 @@
-#ifndef FLUAPP_H
+#ifndef FLUAPP_H
 #define FLUAPP_H
 
 #include <QObject>

src/FluColorSet.h

@@ -1,4 +1,4 @@
-#ifndef FLUCOLORSET_H
+#ifndef FLUCOLORSET_H
 #define FLUCOLORSET_H
 
 #include <QObject>

src/FluColors.cpp

@@ -1,4 +1,4 @@
-#include "FluColors.h"
+#include "FluColors.h"
 
 FluColors* FluColors::m_instance = nullptr;
 

src/FluColors.h

@@ -1,4 +1,4 @@
-#ifndef FLUCOLORS_H
+#ifndef FLUCOLORS_H
 #define FLUCOLORS_H
 
 #include <QObject>

src/FluRegister.cpp

@@ -1,4 +1,4 @@
-#include "FluRegister.h"
+#include "FluRegister.h"
 
 #include "FluApp.h"
 #include <QCoreApplication>

src/FluRegister.h

@@ -1,4 +1,4 @@
-#ifndef FLUREGISTER_H
+#ifndef FLUREGISTER_H
 #define FLUREGISTER_H
 
 #include <QObject>

src/FluTextStyle.cpp

@@ -1,4 +1,4 @@
-#include "FluTextStyle.h"
+#include "FluTextStyle.h"
 
 FluTextStyle::FluTextStyle(QObject *parent)
     : QObject{parent}
@@ -8,7 +8,7 @@ FluTextStyle::FluTextStyle(QObject *parent)
     Caption(caption);
 
     QFont body;
-    body.setPixelSize(14);
+    body.setPixelSize(13);
     Body(body);
 
     QFont bodyStrong;

src/FluTextStyle.h

@@ -1,4 +1,4 @@
-#ifndef FLUTEXTSTYLE_H
+#ifndef FLUTEXTSTYLE_H
 #define FLUTEXTSTYLE_H
 
 #include <QObject>

src/FluTheme.cpp

@@ -2,9 +2,15 @@
 
 #include "Def.h"
 #include "FluColors.h"
-#include <QPalette>
+#if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0))
+#include <QStyleHints>
+#elif ((QT_VERSION >= QT_VERSION_CHECK(6, 2, 1)))
 #include <QtGui/qpa/qplatformtheme.h>
 #include <QtGui/private/qguiapplication_p.h>
+#else
+#include <QPalette>
+#endif
+
 #include <QGuiApplication>
 
 FluTheme* FluTheme::m_instance = nullptr;
@@ -45,10 +51,18 @@ bool FluTheme::eventFilter(QObject *obj, QEvent *event)
 
 bool FluTheme::systemDark()
 {
+#if (QT_VERSION >= QT_VERSION_CHECK(6, 5, 0))
+    return (QGuiApplication::styleHints()->colorScheme() == Qt::ColorScheme::Dark);
+#elif ((QT_VERSION >= QT_VERSION_CHECK(6, 2, 1)))
     if (const QPlatformTheme * const theme = QGuiApplicationPrivate::platformTheme()) {
         return (theme->appearance() == QPlatformTheme::Appearance::Dark);
     }
     return false;
+#else
+    QPalette palette = qApp->palette();
+    QColor color = palette.color(QPalette::Window).rgb();
+    return !(color.red() * 0.2126 + color.green() * 0.7152 + color.blue() * 0.0722 > 255 / 2);
+#endif
 }
 
 bool FluTheme::dark(){

src/FluTheme.h

@@ -1,4 +1,4 @@
-#ifndef FLUTHEME_H
+#ifndef FLUTHEME_H
 #define FLUTHEME_H
 
 #include <QObject>

src/FluTools.cpp

@@ -1,4 +1,4 @@
-#include "FluTools.h"
+#include "FluTools.h"
 #include <QGuiApplication>
 #include <QClipboard>
 #include <QUuid>
@@ -63,4 +63,6 @@ bool FluTools::isWin(){
 #endif
 }
 
-
+void FluTools::setQuitOnLastWindowClosed(bool val){
+    qApp->setQuitOnLastWindowClosed(val);
+}

src/FluTools.h

@@ -1,4 +1,4 @@
-#ifndef FLUTOOLS_H
+#ifndef FLUTOOLS_H
 #define FLUTOOLS_H
 
 #include <QObject>
@@ -48,6 +48,8 @@ public:
 
     Q_INVOKABLE bool isWin();
 
+    Q_INVOKABLE void setQuitOnLastWindowClosed(bool val);
+
 };
 
 #endif // FLUTOOLS_H

src/WindowHelper.cpp

@@ -1,4 +1,4 @@
-#include "WindowHelper.h"
+#include "WindowHelper.h"
 
 #include "FluRegister.h"
 #include "FluApp.h"

src/WindowHelper.h

@@ -1,4 +1,4 @@
-#ifndef WINDOWHELPER_H
+#ifndef WINDOWHELPER_H
 #define WINDOWHELPER_H
 
 #include <QObject>

src/imports/FluentUI/Controls/ColorPicker/ColorPicker.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import "Content"
@@ -21,7 +21,6 @@ Rectangle {
     color: "#00000000"
     clip: true
 
-
     RowLayout {
         id: picker
         anchors.top: parent.top

src/imports/FluentUI/Controls/ColorPicker/Content/Checkerboard.qml

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

src/imports/FluentUI/Controls/ColorPicker/Content/ColorSlider.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 
 Item {
     property int cursorHeight: 7

src/imports/FluentUI/Controls/ColorPicker/Content/NumberBox.qml

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

src/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 
 Rectangle {
     width : 40; height : 15; radius: 2
@@ -14,5 +14,3 @@ Rectangle {
         color: "transparent"
     }
 }
-
-

src/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 
 Item {
     id: root

src/imports/FluentUI/Controls/FluAcrylic.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import Qt5Compat.GraphicalEffects
 import FluentUI
 

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Window
 import QtQuick.Layouts
@@ -22,6 +22,25 @@ Rectangle{
     property bool titleVisible: true
     property bool isMac: FluTools.isMacos()
     property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property var maxClickListener : function(){
+        if (d.win.visibility === Window.Maximized)
+            d.win.visibility = Window.Windowed
+        else
+            d.win.visibility = Window.Maximized
+    }
+    property var minClickListener: function(){
+        d.win.visibility = Window.Minimized
+    }
+    property var closeClickListener : function(){
+        d.win.close()
+    }
+    property var darkClickListener: function(){
+        if(FluTheme.dark){
+            FluTheme.darkMode = FluDarkMode.Light
+        }else{
+            FluTheme.darkMode = FluDarkMode.Dark
+        }
+    }
     id:root
     color: Qt.rgba(0,0,0,0)
     height: visible ? 30 : 0
@@ -67,14 +86,9 @@ Rectangle{
                 color:root.textColor
             }
             FluToggleSwitch{
-                selected: FluTheme.dark
+                id:btn_dark
-                clickFunc:function(){
+                checked: FluTheme.dark
-                    if(FluTheme.dark){
+                clickListener:()=> darkClickListener(btn_dark)
-                        FluTheme.darkMode = FluDarkMode.Light
-                    }else{
-                        FluTheme.darkMode = FluDarkMode.Dark
-                    }
-                }
             }
         }
         FluIconButton{
@@ -89,9 +103,7 @@ Rectangle{
             visible: !isMac
             iconColor: root.textColor
             color: hovered ? minimizeHoverColor : minimizeNormalColor
-            onClicked: {
+            onClicked: minClickListener()
-                d.win.visibility = Window.Minimized
-            }
         }
         FluIconButton{
             id:btn_maximize
@@ -105,12 +117,7 @@ Rectangle{
             iconColor: root.textColor
             text:d.isRestore?restoreText:maximizeText
             iconSize: 11
-            onClicked: {
+            onClicked: maxClickListener()
-                if (d.win.visibility === Window.Maximized)
-                    d.win.visibility = Window.Windowed
-                else
-                    d.win.visibility = Window.Maximized
-            }
         }
         FluIconButton{
             id:btn_close
@@ -124,9 +131,7 @@ Rectangle{
             iconSize: 10
             iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
             color:hovered ? closeHoverColor : closeNormalColor
-            onClicked: {
+            onClicked: closeClickListener()
-                d.win.close()
-            }
         }
     }
 
@@ -142,4 +147,8 @@ Rectangle{
         return btn_close
     }
 
+    function darkButton(){
+        return btn_dark
+    }
+
 }

src/imports/FluentUI/Controls/FluArea.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
@@ -16,16 +16,6 @@ Rectangle {
     border.width: 1
     implicitHeight: height
     implicitWidth: width
-    Behavior on color{
-        ColorAnimation {
-            duration: 300
-        }
-    }
-    Behavior on border.color{
-        ColorAnimation {
-            duration: 300
-        }
-    }
     Item {
         id: container
         anchors.fill: parent

src/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import FluentUI
 
@@ -6,6 +6,7 @@ FluTextBox{
     property var items:[]
     property string emptyText: "没有找到结果"
     property int autoSuggestBoxReplacement: FluentIcons.Search
+    property var window : Window.window
     signal itemClicked(var data)
     signal handleClicked
     id:control
@@ -22,17 +23,11 @@ FluTextBox{
         y:control.height
         focus: false
         enter: Transition {
-            NumberAnimation {
-                property: "y"
-                from:0
-                to:control_popup.y
-                duration: 150
-            }
             NumberAnimation {
                 property: "opacity"
                 from:0
                 to:1
-                duration: 150
+                duration: 83
             }
         }
         onVisibleChanged: {
@@ -41,6 +36,7 @@ FluTextBox{
             }
         }
         background: Rectangle{
+            id:container
             width: control.width
             radius: 4
             FluShadow{
@@ -118,6 +114,14 @@ FluTextBox{
     onTextChanged: {
         loadData()
         if(d.flagVisible){
+            var pos = control.mapToItem(null, 0, 0)
+            if(window.height>pos.y+control.height+container.height){
+                control_popup.y = control.height
+            } else if(pos.y>container.height){
+                control_popup.y = -container.height
+            } else {
+                popup.y = window.height-(pos.y+container.height)
+            }
             control_popup.visible = true
         }
     }

src/imports/FluentUI/Controls/FluBadge.qml

@@ -1,11 +1,12 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import FluentUI
 
 Rectangle{
     property bool isDot: false
-    property bool showZero: true
+    property bool showZero: false
     property int count: 0
+    property bool topRight: false
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
@@ -30,34 +31,40 @@ Rectangle{
     }
     border.width: 1
     border.color: Qt.rgba(1,1,1,1)
-    visible: {
-        if(showZero)
-            return true
-        return count!==0
-    }
     anchors{
         right: {
-            if(parent)
+            if(parent && topRight)
                 return parent.right
             return undefined
         }
         top: {
-            if(parent)
+            if(parent && topRight)
                 return parent.top
             return undefined
         }
         rightMargin: {
+            if(parent && topRight){
                 if(isDot){
                     return -2.5
                 }
                 return -(control.width/2)
             }
+            return 0
+        }
         topMargin: {
+            if(parent && topRight){
                 if(isDot){
                     return -2.5
                 }
                 return  -10
             }
+            return 0
+        }
+    }
+    visible: {
+        if(showZero)
+            return true
+        return count!==0
     }
     Text{
         anchors.centerIn: parent