update

Fix FluNavigationView push function in Standard mode.

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

@@ -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,2,1)
+add_definitions(-DVERSION=1,3,5,1)
 
-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

@@ -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/component/CodeExpander.qml

@@ -26,11 +26,6 @@ FluExpander{
             color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
             border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
             border.width: 1
-            Behavior on color{
-                ColorAnimation {
-                    duration: 300
-                }
-            }
         }
     }
 
@@ -134,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

@@ -39,15 +39,15 @@ 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
             if (blurBehindWindowEnabled)
                 window.backgroundVisible = false
-            window.visible = true
+            window.show()
         }
     }
     Connections{

example/qml/global/ItemsOriginal.qml

@@ -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")
             }
         }
@@ -167,8 +181,15 @@ FluObject{
             }
         }
         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")
             }
         }
@@ -231,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:{
@@ -279,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/page/T_Acrylic.qml

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

example/qml/page/T_Badge.qml

@@ -3,7 +3,7 @@ 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

@@ -3,7 +3,7 @@ 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

@@ -4,7 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -210,20 +210,18 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            items:[
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_1"
-                    text:"Menu_1"
+            }
-                },
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_2"
-                    text:"Menu_2"
+            }
-                },
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_3"
-                    text:"Menu_3"
+            }
-                },
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_4"
-                    text:"Menu_4"
+            }
-                }
-            ]
         }
         FluToggleSwitch{
             id:drop_down_button_switch

example/qml/page/T_CalendarPicker.qml

@@ -3,7 +3,7 @@ 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

@@ -3,7 +3,7 @@ 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

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

example/qml/page/T_ColorPicker.qml

@@ -3,7 +3,7 @@ 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

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -28,10 +28,6 @@ FluScrollablePage{
                     ListElement { text: "Apple" }
                     ListElement { text: "Coconut" }
                 }
-                onAccepted: {
-                    if (find(editText) === -1)
-                        model_1.append({text: editText})
-                }
             }
         }
     }

example/qml/page/T_DatePicker.qml

@@ -3,7 +3,7 @@ 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

@@ -3,7 +3,7 @@ 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

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

example/qml/page/T_FlipView.qml

@@ -3,7 +3,7 @@ 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

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 import FluentUI
 
 FluScrollablePage{

example/qml/page/T_InfoBar.qml

@@ -3,7 +3,7 @@ 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

@@ -3,12 +3,30 @@ 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()
-                    }
-                }
-            }
         }
     }
 
@@ -69,20 +78,74 @@ menu.popup()
 '
     }
 
-    FluMenu{
+
-        id:menu
+    FluArea{
-        FluMenuItem{
+        Layout.fillWidth: true
-            text:"删除"
+        height: 100
-            onClicked: {
+        paddings: 10
-                showError("删除")
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
             }
-        }
+
-        FluMenuItem{
+            FluText{
-            text:"修改"
+                text:"MenuBar"
-            onClicked: {
-                showInfo("修改")
             }
+
+            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{
+                        title: "Save As..."
+                        Action { text: qsTr("Doc") }
+                        Action { text: qsTr("PDF") }
+                    }
+                }
+                FluMenu {
+                    title: qsTr("Edit")
+                    Action { text: qsTr("Cut") }
+                    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

@@ -3,7 +3,7 @@ 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

@@ -3,7 +3,7 @@ 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

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -33,10 +33,13 @@ FluScrollablePage{
                 indeterminate: false
             }
             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
+                }
+                Component.onCompleted: {
+                    value = 50
                 }
             }
         }

example/qml/page/T_RatingControl.qml

@@ -3,38 +3,33 @@ 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

@@ -3,7 +3,7 @@ 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

@@ -3,8 +3,8 @@ 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{
 

example/qml/page/T_Slider.qml

@@ -2,7 +2,7 @@ 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

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -21,36 +21,34 @@ FluScrollablePage{
                 id:btn_status_mode
                 Layout.preferredWidth: 140
                 text:"Loading"
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"Loading"
-                        text:"Loading"
+                    onClicked: {
-                        onClicked: {
+                        btn_status_mode.text = text
-                            btn_status_mode.text = text
+                        status_view.statusMode = FluStatusView.Loading
-                            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: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Success
-                        }
                     }
-                ]
+                }
+                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: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusView.Success
+                    }
+                }
             }
         }
     }

example/qml/page/T_TabView.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -40,57 +40,53 @@ FluScrollablePage{
                 id:btn_tab_width_behavior
                 Layout.preferredWidth: 140
                 text:"Equal"
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"Equal"
-                        text:"Equal"
+                    onClicked: {
-                        onClicked: {
+                        btn_tab_width_behavior.text = text
-                            btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabView.Equal
-                            tab_view.tabWidthBehavior = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"SizeToContent"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Compact"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.Compact
-                        }
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"SizeToContent"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                    }
+                }
+                FluMenuItem{
+                    text:"Compact"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabView.Compact
+                    }
+                }
             }
             FluDropDownButton{
                 id:btn_close_button_visibility
                 text:"Always"
                 Layout.preferredWidth: 120
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"Nerver"
-                        text:"Nerver"
+                    onClicked: {
-                        onClicked: {
+                        btn_close_button_visibility.text = text
-                            btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabView.Nerver
-                            tab_view.closeButtonVisibility = FluTabView.Nerver
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Always"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.Always
-                        }
-                    },
-                    FluMenuItem{
-                        text:"OnHover"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.OnHover
-                        }
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Always"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabView.Always
+                    }
+                }
+                FluMenuItem{
+                    text:"OnHover"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabView.OnHover
+                    }
+                }
             }
         }
     }

example/qml/page/T_TableView.qml

@@ -3,7 +3,7 @@ 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:{
+                        tableView.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

@@ -3,7 +3,7 @@ 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

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

example/qml/page/T_Theme.qml

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

example/qml/page/T_TimePicker.qml

@@ -3,7 +3,7 @@ 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

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

example/qml/page/T_Tooltip.qml

@@ -3,7 +3,7 @@ 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

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

example/qml/page/T_Typography.qml

@@ -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

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

example/qml/window/LoginWindow.qml

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

example/qml/window/MainWindow.qml

@@ -4,8 +4,8 @@ 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 {
 
@@ -76,48 +76,224 @@ CustomWindow {
         }
     }
 
-    FluAppBar {
+    Flipable{
-        id: title_bar
+        id:flipable
-        anchors {
+        anchors.fill: parent
-            top: parent.top
+        property bool flipped: false
-            left: parent.left
+        property real flipAngle: 0
-            right: parent.right
+        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 {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                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()
+                    }
+                }
+            }
+
+            FluRemoteLoader{
+                id:loader
+                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
+                }
+                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
+                topPadding:FluTools.isMacos() ? 20 : 5
+                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
+                    iconSource: FluentIcons.Search
+                    items: ItemsOriginal.getSearchData()
+                    placeholderText: lang.search
+                    onItemClicked:
+                        (data)=>{
+                            ItemsOriginal.startPageByItem(data)
+                        }
+                }
+                Component.onCompleted: {
+                    ItemsOriginal.navigationView = nav_view
+                    ItemsFooter.navigationView = nav_view
+                    setCurrentIndex(0)
+                }
+            }
         }
-        darkText: lang.dark_mode
-        showDark: true
-        z:7
     }
 
-    FluNavigationView{
+    Image{
-        id:nav_view
+        id:img_cache
-        anchors{
+        visible: false
-            top: parent.top
+        anchors.fill: parent
-            left: parent.left
+    }
-            right: parent.right
+
-            bottom: parent.bottom
+    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
+            }
         }
-        z:999
+        onRadiusChanged: {
-        items: ItemsOriginal
+            canvas.requestPaint()
-        footerItems:ItemsFooter
+        }
-        topPadding:FluTools.isMacos() ? 20 : 5
+        onPaint: {
-        displayMode:MainEvent.displayMode
+            var ctx = canvas.getContext("2d");
-        logo: "qrc:/example/res/image/favicon.ico"
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
-        title:"FluentUI"
+            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
-        autoSuggestBox:FluAutoSuggestBox{
+            ctx.save()
-            width: 280
+            if(img_cache.source.toString().length!==0){
-            anchors.centerIn: parent
+                try{
-            iconSource: FluentIcons.Search
+                    ctx.drawImage(img_cache, 0, 0,  canvasSize.width, canvasSize.height, 0, 0,  canvasSize.width, canvasSize.height)
-            items: ItemsOriginal.getSearchData()
+                }catch(e){
-            placeholderText: lang.search
+                    img_cache.source = ""
-            onItemClicked:
-                (data)=>{
-                    ItemsOriginal.startPageByItem(data)
                 }
+            }
+            clearArc(ctx, centerX, centerY, radius)
+            ctx.restore()
         }
-        Component.onCompleted: {
+        function clearArc(ctx,x, y, radius, startAngle, endAngle) {
-            ItemsOriginal.navigationView = nav_view
+            ctx.beginPath()
-            ItemsFooter.navigationView = nav_view
+            ctx.globalCompositeOperation = 'destination-out'
-            setCurrentIndex(0)
+            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

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

example/qml/window/SingleTaskWindow.qml

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

example/qml/window/StandardWindow.qml

@@ -2,7 +2,7 @@ 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/lang/En.cpp

@@ -19,4 +19,5 @@ En::En(QObject *parent)
     settings("Settings");
     locale("Locale");
     navigation_view_display_mode("NavigationView Display Mode");
+    other("Other");
 }

example/src/lang/Lang.h

@@ -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

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

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,2,1)
+add_definitions(-DVERSION=1,3,5,1)
 
-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,29 +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
-# 在MinGW和GCC/Clang中, 默认不会链接带`d`后缀的动态库
-if(MSVC)
-    set_target_properties(fluentuiplugin PROPERTIES DEBUG_POSTFIX "d")  
-endif(MSVC)
-
-

src/FluApp.cpp

@@ -43,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/FluTextStyle.cpp

@@ -8,7 +8,7 @@ FluTextStyle::FluTextStyle(QObject *parent)
     Caption(caption);
 
     QFont body;
-    body.setPixelSize(14);
+    body.setPixelSize(13);
     Body(body);
 
     QFont bodyStrong;

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -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{
+                id:btn_dark
                 checked: FluTheme.dark
-                clickListener: function(){
+                clickListener:()=> darkClickListener(btn_dark)
-                    if(FluTheme.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

@@ -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/FluBadge.qml

@@ -4,8 +4,9 @@ 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: {
@@ -14,7 +15,7 @@ Rectangle{
         if(count<10){
             return 20
         }else if(count<100){
-           return 30
+            return 30
         }
         return 40
     }
@@ -30,35 +31,41 @@ 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(isDot){
+            if(parent && topRight){
-                return -2.5
+                if(isDot){
+                    return -2.5
+                }
+                return -(control.width/2)
             }
-            return -(control.width/2)
+            return 0
         }
         topMargin: {
-            if(isDot){
+            if(parent && topRight){
-                return -2.5
+                if(isDot){
+                    return -2.5
+                }
+                return  -10
             }
-            return  -10
+            return 0
         }
     }
+    visible: {
+        if(showZero)
+            return true
+        return count!==0
+    }
     Text{
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)

src/imports/FluentUI/Controls/FluCheckBox.qml

@@ -24,13 +24,15 @@ Button {
     }
     id:control
     enabled: !disabled
-    padding:0
     onClicked: clickListener()
     background: Item{
         FluFocusRectangle{
+            radius: 4
             visible: control.activeFocus
         }
     }
+    horizontalPadding:2
+    verticalPadding: 2
     Accessible.role: Accessible.Button
     Accessible.name: control.text
     Accessible.description: contentDescription

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -24,7 +24,7 @@ ComboBox {
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
         palette.text: control.palette.text
         palette.highlightedText: control.palette.highlightedText
-        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        font.bold: control.currentIndex === index
         highlighted: control.highlightedIndex === index
         hoverEnabled: control.hoverEnabled
     }
@@ -37,7 +37,6 @@ ComboBox {
         iconSize: 15
         opacity: enabled ? 1 : 0.3
     }
-
     contentItem: T.TextField {
         property bool disabled: !control.editable
         leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
@@ -59,6 +58,7 @@ ComboBox {
         leftInset:1
         topInset:1
         bottomInset:1
+        focus: true
         rightInset:1
         background: FluTextBoxBackground{
             border.width: 0
@@ -74,7 +74,7 @@ ComboBox {
         visible: !control.flat || control.down
         radius: 4
         FluFocusRectangle{
-            visible: control.activeFocus
+            visible: control.visualFocus
             radius:4
             anchors.margins: -2
         }

src/imports/FluentUI/Controls/FluContentPage.qml

@@ -11,12 +11,14 @@ Item {
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
-    property int pageMode: FluNavigationView.Standard
+    property int pageMode: FluNavigationView.SingleTop
     property string url: ''
     id:control
     FluText{
         id:text_title
-        font: FluTextStyle.TitleLarge
+        visible: text !== ""
+        height: visible ? contentHeight : 0
+        font: FluTextStyle.Title
         anchors{
             top: parent.top
             topMargin: control.topPadding

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -17,6 +17,9 @@ TextEdit {
     bottomPadding: 0
     selectionColor: FluTheme.primaryColor.lightest
     font:FluTextStyle.Body
+    onSelectedTextChanged: {
+        control.forceActiveFocus()
+    }
     TapHandler {
         acceptedButtons: Qt.RightButton
         onTapped: control.echoMode !== TextInput.Password && menu.popup()

src/imports/FluentUI/Controls/FluDivider.qml

@@ -3,5 +3,5 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-    color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+   color: FluTheme.dark ? Qt.rgba(60/255,60/255,60/255,1) : Qt.rgba(210/255,210/255,210/255,1)
 }

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -30,7 +30,7 @@ Button {
         }
     }
     property var window : Window.window
-    property alias items: menu.content
+    default property alias contentData: menu.contentData
     Accessible.role: Accessible.Button
     Accessible.name: control.text
     Accessible.description: contentDescription
@@ -75,9 +75,9 @@ Button {
         color: control.textColor
     }
     onClicked: {
-        if(items && menu.getContainerCount()!==0){
+        if(items && menu.count !==0){
             var pos = control.mapToItem(null, 0, 0)
-            var containerHeight = menu.getContainerHeight()
+            var containerHeight = menu.height
             if(window.height>pos.y+control.height+containerHeight){
                 menu.y = control.height
             }else if(pos.y>containerHeight){

src/imports/FluentUI/Controls/FluExpander.qml

@@ -20,16 +20,6 @@ Item {
         radius: 4
         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)
         border.color: FluTheme.dark ?  Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
-        Behavior on border.color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
         MouseArea{
             id:control_mouse
             anchors.fill: parent
@@ -67,7 +57,7 @@ Item {
                 iconSize: 15
                 Behavior on rotation {
                     NumberAnimation{
-                        duration: 150
+                        duration: 167
                     }
                 }
             }

src/imports/FluentUI/Controls/FluHorizontalHeaderView.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Templates as T
+import FluentUI
+
+T.HorizontalHeaderView {
+    id: control
+    implicitWidth: syncView ? syncView.width : 0
+    implicitHeight: Math.max(1, contentHeight)
+    delegate: Rectangle {
+        readonly property real cellPadding: 8
+        implicitWidth: text.implicitWidth + (cellPadding * 2)
+        implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
+        color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+        border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+        FluText {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            height: parent.height
+            font.bold: true
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}

src/imports/FluentUI/Controls/FluMediaPlayer.qml

@@ -1,202 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtMultimedia
-import FluentUI
-
-Rectangle {
-    property url source
-    property bool showControl: false
-    property real volume: 30
-    id:control
-    width: 480
-    height: 270
-    color: FluColors.Black
-    clip: true
-    MouseArea{
-        anchors.fill: parent
-        preventStealing: true
-        onClicked: {
-            showControl = !showControl
-        }
-    }
-    MediaPlayer {
-        id: mediaplayer
-        property bool autoSeek:true
-        source: control.source
-        videoOutput: video_output
-        audioOutput: AudioOutput{
-            id:audio_output
-        }
-        onErrorStringChanged:
-            (error)=> {
-                console.debug(errorString)
-            }
-        onPositionChanged: {
-            if(autoSeek){
-                slider.seek(mediaplayer.position*slider.maxValue/mediaplayer.duration)
-            }
-        }
-        onMediaStatusChanged:
-            (status)=> {
-                if(status===2){
-                    slider.maxValue = mediaplayer.duration
-                    showControl = true
-                    mediaplayer.play()
-                }
-            }
-    }
-    onSourceChanged: {
-        slider.seek(0)
-    }
-    VideoOutput {
-        id:video_output
-        anchors.fill: parent
-    }
-    Item{
-        height: 100
-        y:showControl ? control.height - 110 : control.height
-        anchors{
-            horizontalCenter: parent.horizontalCenter
-        }
-        width: 460
-        opacity: showControl
-        MouseArea{
-            anchors.fill: parent
-        }
-        Behavior on opacity{
-            NumberAnimation{
-                duration: 150
-            }
-        }
-        Behavior on y{
-            NumberAnimation{
-                duration: 150
-            }
-        }
-        Rectangle{
-            anchors.fill: parent
-            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
-            radius: 5
-        }
-
-        FluSlider{
-            id:slider
-            size:parent.width-20
-            y:20
-            anchors.horizontalCenter: parent.horizontalCenter
-            tipEnabled:false
-            onPressed: {
-                mediaplayer.autoSeek = false
-                mediaplayer.pause()
-            }
-            value:mediaplayer.position
-            onReleased: {
-                mediaplayer.autoSeek = true
-                mediaplayer.play()
-            }
-            onValueChanged: {
-                if(mediaplayer.autoSeek == false){
-                    mediaplayer.position = value*mediaplayer.duration/slider.maxValue
-                }
-            }
-            onLineClickFunc:function(val){
-                mediaplayer.position = val*mediaplayer.duration/slider.maxValue
-            }
-        }
-        FluText{
-            id:start_time
-            anchors{
-                top: slider.bottom
-                topMargin: 10
-                left: slider.left
-            }
-            text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
-        }
-        FluText{
-            id:end_time
-            anchors{
-                top: slider.bottom
-                right: slider.right
-                topMargin: 10
-            }
-            text: formatDuration(mediaplayer.duration)
-        }
-        Row{
-            spacing: 10
-            anchors{
-                horizontalCenter: parent.horizontalCenter
-                bottom: parent.bottom
-                bottomMargin: 10
-            }
-            FluIconButton{
-                iconSize: 17
-                iconSource:  FluentIcons.SkipBack10
-                onClicked: {
-                    mediaplayer.position = Math.max(mediaplayer.position-10*1000,0)
-                }
-            }
-            FluIconButton{
-                iconSize: 15
-                iconSource: mediaplayer.playbackState === MediaPlayer.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
-                onClicked: {
-                    if(mediaplayer.playbackState === MediaPlayer.PlayingState){
-                        mediaplayer.pause()
-                    }else{
-                        mediaplayer.play()
-                    }
-                }
-            }
-            FluIconButton{
-                iconSize: 17
-                iconSource:  FluentIcons.SkipForward30
-                onClicked: {
-                    mediaplayer.position = Math.min(mediaplayer.position+30*1000,mediaplayer.duration)
-                }
-            }
-        }
-        FluIconButton{
-            id:btn_volume
-            iconSize: 17
-            iconSource:  audio_output.muted ? FluentIcons.Mute  :  FluentIcons.Volume
-            anchors{
-                left: parent.left
-                leftMargin: 5
-                bottom: parent.bottom
-                bottomMargin: 10
-            }
-            onClicked: {
-                audio_output.muted = !audio_output.muted
-            }
-        }
-        FluSlider{
-            id:slider_volume
-            size: 80
-            dotSize: 20
-            value:30
-            anchors{
-                left:btn_volume.right
-                verticalCenter: btn_volume.verticalCenter
-                leftMargin: 10
-            }
-            onValueChanged:{
-                audio_output.volume = value/100
-            }
-        }
-    }
-    function formatDuration(duration) {
-        const seconds = Math.floor(duration / 1000);
-        const hours = Math.floor(seconds / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const remainingSeconds = seconds % 60;
-        return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
-    }
-    function pad(value) {
-        return value.toString().padStart(2, '0');
-    }
-    function pause(){
-        mediaplayer.pause()
-    }
-    function play(){
-        mediaplayer.play()
-    }
-}

src/imports/FluentUI/Controls/FluMenu.qml

@@ -1,23 +1,26 @@
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-Menu {
+T.Menu {
-    default property alias content: container.data
+    id: control
-    property bool enableAnimation: true
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-    id: popup
+                            contentWidth + leftPadding + rightPadding)
-    width: 140
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-    height: container.height
+                             contentHeight + topPadding + bottomPadding)
-    modal:true
+    margins: 0
-    dim:false
+    overlap: 1
+    spacing: 0
+    delegate: FluMenuItem { }
     enter: Transition {
         reversible: true
         NumberAnimation {
             property: "opacity"
             from:0
             to:1
-            duration: enableAnimation ? 83 : 0
+            duration:  83
         }
     }
     exit:Transition {
@@ -25,38 +28,32 @@ Menu {
             property: "opacity"
             from:1
             to:0
-            duration: enableAnimation ? 83 : 0
+            duration: 83
         }
     }
-    background:Item{
+    contentItem: ListView {
-        FluShadow{
+        implicitHeight: contentHeight
-            radius: 5
+        model: control.contentModel
-        }
+        interactive: Window.window
-    }
+                     ? contentHeight + control.topPadding + control.bottomPadding > Window.window.height
-    contentItem: Item {
+                     : false
         clip: true
-        Rectangle{
+        currentIndex: control.currentIndex
-            anchors.fill: parent
+        ScrollIndicator.vertical: ScrollIndicator {}
-            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
-            border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-            border.width: 1
-            radius: 5
-        }
-        Column{
-            id:container
-            spacing: 5
-            topPadding: 5
-            bottomPadding: 5
-            width: popup.width
-            function closePopup(){
-                popup.close()
-            }
-        }
     }
-    function getContainerHeight(){
+    background: Rectangle {
-        return container.height
+        implicitWidth: 150
+        implicitHeight: 40
+        color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+        border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        border.width: 1
+        radius: 5
+        FluShadow{}
     }
-    function getContainerCount(){
+    T.Overlay.modal: Rectangle {
-        return container.children.length
+        color: Color.transparent(control.palette.shadow, 0.5)
+    }
+    T.Overlay.modeless: Rectangle {
+        color: Color.transparent(control.palette.shadow, 0.12)
     }
 }

src/imports/FluentUI/Controls/FluMenuBar.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.MenuBar {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+    delegate: FluMenuBarItem { }
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+    background: Item {
+        implicitHeight: 30
+    }
+}

src/imports/FluentUI/Controls/FluMenuBarItem.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import FluentUI
+
+T.MenuBarItem {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+    spacing: 6
+    padding: 6
+    leftPadding: 12
+    rightPadding: 16
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.buttonText
+    contentItem: FluText {
+        verticalAlignment: Text.AlignVCenter
+        text: control.text
+    }
+    background: Rectangle {
+        implicitWidth: 30
+        implicitHeight: 30
+        radius: 3
+        color: {
+            if(FluTheme.dark){
+                if(control.highlighted){
+                    return Qt.rgba(1,1,1,0.06)
+                }
+                if(control.hovered){
+                    return Qt.rgba(1,1,1,0.03)
+                }
+                return Qt.rgba(0,0,0,0)
+            }else{
+                if(control.highlighted){
+                    return Qt.rgba(0,0,0,0.06)
+                }
+                if(control.hovered){
+                    return Qt.rgba(0,0,0,0.03)
+                }
+                return Qt.rgba(0,0,0,0)
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluMenuItem.qml

@@ -1,53 +1,63 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-Item {
+T.MenuItem {
-    property string text: "MenuItem"
+    id: control
-    property var onClickFunc
+
-    signal clicked
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-    id:control
+                            implicitContentWidth + leftPadding + rightPadding)
-    width: {
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-        if(control.parent){
+                             implicitContentHeight + topPadding + bottomPadding,
-            return control.parent.width
+                             implicitIndicatorHeight + topPadding + bottomPadding)
-        }
+
-        return 140
+    padding: 6
+    spacing: 6
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.palette.windowText
+    height: visible ? implicitHeight : 0
+    contentItem: FluText {
+        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? indicatorPadding : arrowPadding
+        rightPadding: control.mirrored ? indicatorPadding : arrowPadding
+        verticalAlignment: Text.AlignVCenter
+        text: control.text
     }
-    height: 32
+    indicator: FluIcon {
-    Rectangle{
+        x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
-        anchors.centerIn: parent
+        y: control.topPadding + (control.availableHeight - height) / 2
-        width: control.width-40
+        visible: control.checked
-        height: 32
+        iconSource: FluentIcons.CheckMark
-        radius: 4
+    }
+    arrow: FluIcon {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        visible: control.subMenu
+        iconSource: FluentIcons.ChevronRightMed
+    }
+    background: Rectangle {
+        implicitWidth: 150
+        implicitHeight: 40
+        x: 1
+        y: 1
+        width: control.width - 2
+        height: control.height - 2
         color:{
             if(FluTheme.dark){
-                if(mouse_area.containsMouse){
+                if(control.highlighted){
-                    return Qt.rgba(1,1,1,0.05)
+                    return Qt.rgba(1,1,1,0.06)
                 }
                 return Qt.rgba(0,0,0,0)
             }else{
-                if(mouse_area.containsMouse){
+                if(control.highlighted){
-                    return Qt.rgba(0,0,0,0.05)
+                    return Qt.rgba(0,0,0,0.03)
                 }
                 return Qt.rgba(0,0,0,0)
             }
         }
-        FluText{
-            text: control.text
-            anchors.centerIn: parent
-        }
-        MouseArea{
-            id:mouse_area
-            hoverEnabled: true
-            anchors.fill: parent
-            onClicked: {
-                if(control.onClickFunc){
-                    control.onClickFunc()
-                    return
-                }
-                control.parent.closePopup()
-                control.clicked()
-            }
-        }
     }
 }

src/imports/FluentUI/Controls/FluMenuSeparator.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+import FluentUI
+
+T.MenuSeparator {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    padding: 0
+    verticalPadding: 0
+    contentItem: Rectangle {
+        implicitWidth: 188
+        implicitHeight: 1
+        color: FluTheme.dark ? Qt.rgba(60/255,60/255,60/255,1) : Qt.rgba(210/255,210/255,210/255,1)
+    }
+}

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -7,14 +7,15 @@ import FluentUI
 
 Item {
     enum DisplayMode {
-        Open,
+        Open = 0,
-        Compact,
+        Compact = 1,
-        Minimal,
+        Minimal = 2,
-        Auto
+        Auto = 3
     }
     enum PageModeFlag{
         Standard = 0,
-        SingleTask = 1
+        SingleTask = 1,
+        SingleTop = 2
     }
     property url logo
     property string title: ""
@@ -25,22 +26,12 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
+    signal loginClicked
     id:control
     QtObject{
         id:d
         property var stackItems: []
-        property int displayMode: {
+        property int displayMode: FluNavigationView.Open
-            if(control.displayMode !==FluNavigationView.Auto){
-                return control.displayMode
-            }
-            if(control.width<=700){
-                return FluNavigationView.Minimal
-            }else if(control.width<=900){
-                return FluNavigationView.Compact
-            }else{
-                return FluNavigationView.Open
-            }
-        }
         property bool enableNavigationPanel: false
         property bool isCompact: d.displayMode === FluNavigationView.Compact
         property bool isMinimal: d.displayMode === FluNavigationView.Minimal
@@ -50,16 +41,6 @@ Item {
         onIsCompactAndNotPanelChanged: {
             collapseAll()
         }
-        onDisplayModeChanged: {
-            if(d.displayMode === FluNavigationView.Compact){
-                collapseAll()
-            }
-            if(d.displayMode === FluNavigationView.Minimal){
-                anim_layout_list_x.enabled = false
-                d.enableNavigationPanel = false
-                timer_anim_x_enable.restart()
-            }
-        }
         function handleItems(){
             var idx = 0
             var data = []
@@ -95,6 +76,31 @@ Item {
             return data
         }
     }
+    Component.onCompleted: {
+        d.displayMode = Qt.binding(function(){
+            if(control.displayMode !==FluNavigationView.Auto){
+                return control.displayMode
+            }
+            if(control.width<=700){
+                return FluNavigationView.Minimal
+            }else if(control.width<=900){
+                return FluNavigationView.Compact
+            }else{
+                return FluNavigationView.Open
+            }
+        })
+    }
+    Connections{
+        target: d
+        function onDisplayModeChanged(){
+            if(d.displayMode === FluNavigationView.Compact){
+                collapseAll()
+            }
+            if(d.displayMode === FluNavigationView.Minimal){
+                d.enableNavigationPanel = false
+            }
+        }
+    }
     Component{
         id:com_panel_item_empty
         Item{
@@ -172,6 +178,33 @@ Item {
                     }
                     model.isExpand = !model.isExpand
                 }
+                Rectangle{
+                    color:Qt.rgba(255/255,77/255,79/255,1)
+                    width: 10
+                    height: 10
+                    radius: 5
+                    border.width: 1
+                    border.color: Qt.rgba(1,1,1,1)
+                    anchors{
+                        right: parent.right
+                        verticalCenter: parent.verticalCenter
+                        rightMargin: 3
+                        verticalCenterOffset: -8
+                    }
+                    visible: {
+                        if(!model.isExpand){
+
+                            for(var i=0;i<model.children.length;i++){
+                                var item = model.children[i]
+                                if(item.infoBadge && item.count !==0){
+                                    return true
+                                }
+                            }
+                        }
+                        return false
+                    }
+                }
+
                 Rectangle{
                     radius: 4
                     anchors.fill: parent
@@ -193,7 +226,9 @@ Item {
                             verticalCenter: parent.verticalCenter
                         }
                     }
+
                     FluIcon{
+                        id:item_icon_expand
                         rotation: model.isExpand?0:180
                         iconSource:FluentIcons.ChevronUp
                         iconSize: 15
@@ -202,18 +237,12 @@ Item {
                             right: parent.right
                             rightMargin: 12
                         }
-                        opacity: {
+                        visible: {
                             if(d.isCompactAndNotPanel){
                                 return false
                             }
                             return true
                         }
-                        visible:opacity
-                        Behavior on opacity {
-                            NumberAnimation{
-                                duration: 83
-                            }
-                        }
                         Behavior on rotation {
                             NumberAnimation{
                                 duration: 83
@@ -273,21 +302,17 @@ Item {
                     FluText{
                         id:item_title
                         text:model.title
-                        opacity: {
+                        visible: {
                             if(d.isCompactAndNotPanel){
                                 return false
                             }
                             return true
                         }
-                        visible:opacity
+                        elide: Text.ElideRight
-                        Behavior on opacity {
-                            NumberAnimation{
-                                duration: 83
-                            }
-                        }
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left:item_icon.right
+                            right: item_icon_expand.left
                         }
                         color:{
                             if(item_control.pressed){
@@ -429,18 +454,13 @@ Item {
                     FluText{
                         id:item_title
                         text:model.title
-                        opacity: {
+                        visible: {
                             if(d.isCompactAndNotPanel){
                                 return false
                             }
                             return true
                         }
-                        visible:opacity
+                        elide: Text.ElideRight
-                        Behavior on opacity {
-                            NumberAnimation{
-                                duration: 83
-                            }
-                        }
                         color:{
                             if(item_control.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
@@ -450,6 +470,31 @@ Item {
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left:item_icon.right
+                            right: item_dot_loader.left
+                        }
+                    }
+                    Loader{
+                        id:item_dot_loader
+                        property bool isDot: (item_dot_loader.item&&item_dot_loader.item.isDot)
+                        anchors{
+                            right: parent.right
+                            verticalCenter: parent.verticalCenter
+                            rightMargin: isDot ? 3 : 10
+                            verticalCenterOffset: isDot ? -8 : 0
+                        }
+                        sourceComponent: {
+                            if(model.infoBadge){
+                                return model.infoBadge
+                            }
+                            return undefined
+                        }
+                        Connections{
+                            target: d
+                           function onIsCompactAndNotPanelChanged(){
+                                if(item_dot_loader.item){
+                                    item_dot_loader.item.isDot = d.isCompactAndNotPanel
+                                }
+                            }
                         }
                     }
                 }
@@ -496,11 +541,18 @@ Item {
                 Layout.preferredWidth: d.isMinimal ? 30 : 0
                 Layout.preferredHeight: 30
                 Layout.alignment: Qt.AlignVCenter
+                clip: true
                 onClicked: {
                     d.enableNavigationPanel = !d.enableNavigationPanel
                 }
-                visible: d.isMinimal
+                visible: opacity
-                Behavior on Layout.preferredWidth{
+                opacity: d.isMinimal
+                Behavior on opacity{
+                    NumberAnimation{
+                        duration: 83
+                    }
+                }
+                Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
                         easing.type: Easing.BezierSpline
@@ -521,6 +573,12 @@ Item {
                 }
                 sourceSize: Qt.size(40,40)
                 Layout.alignment: Qt.AlignVCenter
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        loginClicked()
+                    }
+                }
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
@@ -547,11 +605,26 @@ Item {
     }
     Item{
         anchors{
-            left: d.isMinimal || d.isCompactAndPanel  ? parent.left : layout_list.right
+            left: parent.left
             top: nav_app_bar.bottom
             right: parent.right
             bottom: parent.bottom
-            leftMargin: d.isCompactAndPanel ? 50 : 0
+            leftMargin: {
+                if(d.isMinimal){
+                    return 0
+                }
+                if(d.isCompact){
+                    return 50
+                }
+                return 300
+            }
+        }
+        Behavior on anchors.leftMargin {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
         }
         StackView{
             id:nav_swipe
@@ -586,11 +659,12 @@ Item {
     MouseArea{
         anchors.fill: parent
         visible: d.isMinimalAndPanel||d.isCompactAndPanel
+        onWheel: {
+        }
         onClicked: {
             d.enableNavigationPanel = false
         }
     }
-
     Rectangle{
         id:layout_list
         width: {
@@ -599,21 +673,6 @@ Item {
             }
             return 300
         }
-        Behavior on width{
-            NumberAnimation{
-                duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
-            }
-        }
-        Behavior on x{
-            id:anim_layout_list_x
-            NumberAnimation{
-                duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
-            }
-        }
         anchors{
             top: parent.top
             bottom: parent.bottom
@@ -626,7 +685,22 @@ Item {
             }
             return "transparent"
         }
+        clip: true
         x: visible ? 0 : -width
+        Behavior on width {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
+        }
+        Behavior on x {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
+        }
         visible: {
             if(d.displayMode !== FluNavigationView.Minimal)
                 return true
@@ -656,27 +730,15 @@ Item {
                 id:loader_auto_suggest_box
                 anchors.centerIn: parent
                 sourceComponent: autoSuggestBox
-                opacity: {
+                visible: {
                     if(d.isCompactAndNotPanel){
                         return false
                     }
                     return true
                 }
-                visible: opacity
-                Behavior on opacity{
-                    NumberAnimation{
-                        duration: 83
-                    }
-                }
             }
             FluIconButton{
-                visible:opacity
+                visible:d.isCompactAndNotPanel
-                opacity:d.isCompactAndNotPanel
-                Behavior on opacity{
-                    NumberAnimation{
-                        duration: 83
-                    }
-                }
                 hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
                 pressedColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
                 normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
@@ -804,6 +866,14 @@ Item {
                 duration: 83
             }
         }
+        Connections{
+            target: d
+            function onIsCompactChanged(){
+                if(!d.isCompact){
+                    control_popup.close()
+                }
+           }
+        }
         padding: 0
         focus: true
         contentItem: Item{
@@ -816,7 +886,7 @@ Item {
                 ScrollBar.vertical: FluScrollBar {}
                 delegate:Button{
                     id:item_button
-                    width: 160
+                    width: 180
                     padding:10
                     focusPolicy:Qt.TabFocus
                     background: Rectangle{
@@ -830,9 +900,27 @@ Item {
                             visible: item_button.activeFocus
                             radius:4
                         }
+
+                        Loader{
+                            id:item_dot_loader
+                            anchors{
+                                right: parent.right
+                                verticalCenter: parent.verticalCenter
+                                rightMargin: 10
+                            }
+                            sourceComponent: {
+                                if(model.infoBadge){
+                                    return model.infoBadge
+                                }
+                                return undefined
+                            }
+                        }
+
                     }
                     contentItem: FluText{
                         text:modelData.title
+                        elide: Text.ElideRight
+                        rightPadding: item_dot_loader.width
                         anchors{
                             verticalCenter: parent.verticalCenter
                         }
@@ -854,7 +942,7 @@ Item {
             }
         }
         background: FluRectangle{
-            implicitWidth: 160
+            implicitWidth: 180
             implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
             radius: [4,4,4,4]
             FluShadow{
@@ -870,13 +958,6 @@ Item {
             control_popup.open()
         }
     }
-    Timer{
-        id:timer_anim_x_enable
-        interval: 150
-        onTriggered: {
-            anim_layout_list_x.enabled = true
-        }
-    }
     function collapseAll(){
         for(var i=0;i<nav_list.model.length;i++){
             var item = nav_list.model[i]
@@ -896,9 +977,6 @@ Item {
         return nav_list.model
     }
     function push(url,argument={}){
-        if(nav_swipe.currentItem && nav_swipe.currentItem.url === url){
-            return
-        }
         let page = nav_swipe.find(function(item) {
             return item.url === url;
         })
@@ -912,6 +990,11 @@ Item {
                     d.stackItems.pop()
                 }
                 return
+            case FluNavigationView.SingleTop:
+                if (nav_swipe.currentItem.url === url){
+                    return
+                }
+                break
             case FluNavigationView.Standard:
             default:
             }
@@ -922,6 +1005,12 @@ Item {
     function getCurrentIndex(){
         return nav_list.currentIndex
     }
+    function getCurrentUrl(){
+        if(nav_swipe.currentItem){
+            return nav_swipe.currentItem.url
+        }
+        return undefined
+    }
     function startPageByItem(data){
         var items = getItems()
         for(var i=0;i<items.length;i++){

src/imports/FluentUI/Controls/FluObject.qml

@@ -3,6 +3,6 @@ import QtQuick.Controls
 import FluentUI
 
 QtObject {
-    default property list<QtObject> children;
+    default property list<QtObject> children
-    id:flu_object;
+    id:control
 }

src/imports/FluentUI/Controls/FluPaneItem.qml

@@ -9,12 +9,14 @@ QtObject {
     property int order : 0
     property int icon
     property Component cusIcon
+    property Component infoBadge
     property bool recentlyAdded: false
     property bool recentlyUpdated: false
     property string desc
     property var image
     property var parent
     property int idx
+    property int count: 0
     signal tap
     property var tapFunc
 }

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -22,7 +22,8 @@ Button {
     Accessible.onPressAction: control.clicked()
     id:control
     enabled: !disabled
-    padding:0
+    horizontalPadding:2
+    verticalPadding: 2
     background: Item{
         FluFocusRectangle{
             visible: control.activeFocus

src/imports/FluentUI/Controls/FluRemoteLoader.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+FluStatusView {
+    property url source: ""
+    color:"transparent"
+    id:control
+    onErrorClicked: {
+        reload()
+    }
+    Loader{
+        id:loader
+        anchors.fill: parent
+        source: control.source
+        asynchronous: true
+        onStatusChanged: {
+            if(status === Loader.Error){
+                control.statusMode = FluStatusView.Error
+            }else if(status === Loader.Loading){
+                control.statusMode = FluStatusView.Loading
+            }else{
+                control.statusMode = FluStatusView.Success
+            }
+        }
+    }
+    function reload(){
+        var timestamp = Date.now();
+        loader.source = control.source+"?"+timestamp
+    }
+}

src/imports/FluentUI/Controls/FluScrollIndicator.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+
+    contentItem: Rectangle {
+        implicitWidth: 2
+        implicitHeight: 2
+
+        color: control.palette.mid
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges {
+                target: control
+                contentItem.opacity: 0.75
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 450
+                    }
+                    NumberAnimation {
+                        target: control.contentItem
+                        duration: 200
+                        property: "opacity"
+                        to: 0.0
+                    }
+                }
+            }
+        ]
+    }
+}

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -12,14 +12,14 @@ Item {
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
-    property int pageMode: FluNavigationView.Standard
+    property int pageMode: FluNavigationView.SingleTop
     property string url: ''
     id:control
     FluText{
         id:text_title
         font: FluTextStyle.Title
         visible: text !== ""
-        height: visible ? implicitHeight : 0
+        height: visible ? contentHeight : 0
         padding: 0
         anchors{
             top: parent.top

src/imports/FluentUI/Controls/FluSlider.qml

@@ -1,131 +1,68 @@
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Controls.impl
-import Qt5Compat.GraphicalEffects
+import QtQuick.Templates as T
 import FluentUI
 
-Item{
+T.Slider {
-    property int size: 180
+    property bool tooltipEnabled: true
-    property int dotSize: 24
+    id: control
-    property int value: 50
+    to:100
-    property int maxValue: 100
+    stepSize:1
-    property bool vertical: false
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-    property bool tipEnabled : true
+                            implicitHandleWidth + leftPadding + rightPadding)
-    property var onLineClickFunc
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-    signal pressed
+                             implicitHandleHeight + topPadding + bottomPadding)
-    signal released
+    padding: 6
-    id:root
+    handle: Rectangle {
-    height: control.height
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-    width: control.width
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
-    rotation: vertical ? 180 : 0
+        implicitWidth: 24
-    Component.onCompleted: {
+        implicitHeight: 24
-        seek(value)
+        radius: 12
-    }
-    MouseArea{
-        id:mouse_line
-        anchors.centerIn: control
-        width: vertical ? 10 : control.width
-        height: vertical ? control.height : 10
-        hoverEnabled: true
-        onClicked:
-            (mouse) => {
-                var val;
-                if(vertical){
-                    val = mouse.y*maxValue/control.height
-                }else{
-                    val = mouse.x*maxValue/control.width
-                }
-                if(onLineClickFunc){
-                    onLineClickFunc(val)
-                }else{
-                    seek(val)
-                }
-            }
-    }
-    Rectangle {
-        id: control
-        width: vertical ? 4 :size
-        height:  vertical ? size : 4
-        radius: 2
-        anchors.verticalCenter: parent.verticalCenter
-        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
-        Rectangle{
-            id:rect
-            radius: 2.5
-            width: vertical ? 5 : control.width*(value/maxValue)
-            height: vertical ? control.height*(value/maxValue) :  5
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
-        }
-    }
-    Rectangle{
-        id:dot
-        width: dotSize
-        height: dotSize
-        FluShadow{
-            radius: dotSize/2
-        }
-        radius: dotSize/2
-        anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
-        anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
         Rectangle{
-            width: dotSize
+            width: 24
-            height: dotSize
+            height: 24
-            radius: dotSize/2
+            radius: 12
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
             scale: {
-                if(control_mouse.pressed){
+                if(control.pressed){
                     return 4/10
                 }
-                return control_mouse.containsMouse || mouse_line.containsMouse  ? 6/10 : 5/10
+                return control.hovered ? 6/10 : 5/10
             }
             Behavior on scale {
                 NumberAnimation{
-                    duration: 150
+                    duration: 167
                 }
             }
         }
-        MouseArea{
-            id:control_mouse
-            anchors.fill: parent
-            hoverEnabled: true
-            drag {
-                target: dot
-                axis: vertical ? Drag.YAxis : Drag.XAxis
-                minimumX: vertical ? 0 : -dotSize/2
-                maximumX: vertical ? 0 : (control.width - dotSize/2)
-                minimumY: vertical ? -dotSize/2 : 0
-                maximumY: vertical ? (control.height - dotSize/2) : 0
-            }
-            onPressed: {
-                if(tipEnabled){
-                    tool_tip.visible  =  true
-                }
-                root.pressed()
-            }
-            onReleased: {
-                tool_tip.visible  =  false
-                root.released()
-            }
-        }
-        FluTooltip{
-            id:tool_tip
-            text:String(root.value)
-            y: vertical ? 32 : -40
-        }
     }
-    function seek(val){
+    FluTooltip{
-        if(vertical){
+        parent: control.handle
-            dot.y =val/maxValue*control.height - dotSize/2
+        visible: control.tooltipEnabled && control.pressed
-            root.value = Qt.binding(function(){
+        text:String(control.value)
-                return (dot.y+dotSize/2)/control.height*maxValue
+    }
-            })
+    background: Rectangle {
-        }else{
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
-            dot.x =val/maxValue*control.width - dotSize/2
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
-            root.value = Qt.binding(function(){
+        implicitWidth: control.horizontal ? 180 : 4
-                return (dot.x+dotSize/2)/control.width*maxValue
+        implicitHeight: control.horizontal ? 4 : 180
-            })
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        radius: 3
+        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        Rectangle {
+            y: control.horizontal ? 0 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 4
+            height: control.horizontal ? 4 : control.position * parent.height
+            radius: 2
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
     }
 }
-

src/imports/FluentUI/Controls/FluStatusView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts
 import FluentUI
 
 Item{
+    id:control
     enum StatusMode  {
         Loading,
         Empty,
@@ -12,6 +13,11 @@ Item{
     }
     default property alias content: container.data
     property int statusMode: FluStatusView.Loading
+    property string loadingText:"正在加载..."
+    property string emptyText: "空空如也"
+    property string errorText: "页面出错了.."
+    property string errorButtonText: "重新加载"
+    property color 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)
     signal errorClicked
     Item{
         id:container
@@ -27,6 +33,7 @@ Item{
         Behavior on opacity {
             NumberAnimation  { duration: 83 }
         }
+        color:control.color
         ColumnLayout{
             anchors.centerIn: parent
             visible: statusMode === FluStatusView.Loading
@@ -35,7 +42,7 @@ Item{
                 Layout.alignment: Qt.AlignHCenter
             }
             FluText{
-                text:"正在加载..."
+                text:control.loadingText
                 Layout.alignment: Qt.AlignHCenter
             }
         }
@@ -45,6 +52,7 @@ Item{
         border.width: 0
         anchors.fill: container
         visible: opacity
+        color:control.color
         opacity: statusMode === FluStatusView.Empty
         Behavior on opacity {
             NumberAnimation  { duration: 83 }
@@ -53,7 +61,7 @@ Item{
             anchors.centerIn: parent
             visible: statusMode === FluStatusView.Empty
             FluText{
-                text:"空空如也"
+                text:control.emptyText
                 font: FluTextStyle.BodyStrong
                 Layout.alignment: Qt.AlignHCenter
             }
@@ -64,6 +72,7 @@ Item{
         border.width: 0
         anchors.fill: container
         visible: opacity
+        color:control.color
         opacity: statusMode === FluStatusView.Error
         Behavior on opacity {
             NumberAnimation  { duration: 83 }
@@ -71,16 +80,16 @@ Item{
         ColumnLayout{
             anchors.centerIn: parent
             FluText{
-                text:"页面出错了..."
+                text:control.errorText
                 font: FluTextStyle.BodyStrong
                 Layout.alignment: Qt.AlignHCenter
             }
             FluFilledButton{
                 id:btn_error
                 Layout.alignment: Qt.AlignHCenter
-                text:"重新加载"
+                text:control.errorButtonText
                 onClicked:{
-                    errorClicked.call()
+                    control.errorClicked()
                 }
             }
         }

src/imports/FluentUI/Controls/FluTabView.qml

@@ -110,6 +110,11 @@ Item {
                         anchors.fill: parent
                         hoverEnabled: true
                     }
+                    FluTooltip{
+                        visible: item_mouse_hove.containsMouse
+                        text:item_text.text
+                        delay: 1000
+                    }
                     MouseArea{
                         id:item_mouse_drag
                         anchors.fill: parent
@@ -242,11 +247,6 @@ Item {
                             Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
                             elide: Text.ElideRight
                             Layout.alignment: Qt.AlignVCenter
-                            FluTooltip{
-                                visible: item_mouse_hove.containsMouse
-                                text:item_text.text
-                                delay: 1000
-                            }
                         }
                     }
                     FluIconButton{

src/imports/FluentUI/Controls/FluTableModelColumn.qml

@@ -0,0 +1,5 @@
+import Qt.labs.qmlmodels
+
+TableModelColumn{
+
+}

src/imports/FluentUI/Controls/FluTableView.qml

@@ -17,7 +17,7 @@ Item {
     implicitHeight: layout_table.height
     QtObject{
         id:d
-        property int columnsWidth: parent.width
+        property int columnsWidth: layout_table.headerItem.columnsWidth()
     }
     MouseArea{
         anchors.fill: parent
@@ -32,17 +32,87 @@ Item {
     onColumnsChanged: {
         model_columns.clear()
         model_columns.append(columns)
-        var w = 0
-        for(var i=0;i<model_columns.count;i++){
-            var item = model_columns.get(i)
-            w=w+item.width
-        }
-        d.columnsWidth = w
     }
     onDataSourceChanged: {
         model_data_source.clear()
         model_data_source.append(dataSource)
     }
+    Component{
+        id:header_columns
+        FluRectangle{
+            id:layout_columns
+            height: control.itemHeight
+            width: parent.width
+            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            radius: [5,5,0,0]
+            function columnsWidth(){
+                var w = 0
+                for(var i=0;i<repeater_columns.count;i++){
+                    var item = repeater_columns.itemAt(i)
+                    w=w+item.width
+                }
+                return w
+            }
+            function widthByColumnIndex(index){
+                return repeater_columns.itemAt(index).width
+            }
+            Row{
+                id:list_columns
+                spacing: 0
+                anchors.fill: parent
+                Repeater{
+                    id:repeater_columns
+                    model: model_columns
+                    delegate: Item{
+                        id:item_column
+                        property point clickPos: "0,0"
+                        height: list_columns.height
+                        width: model.width
+                        FluText{
+                            id:item_column_text
+                            text:model.title
+                            wrapMode: Text.WordWrap
+                            anchors{
+                                verticalCenter: parent.verticalCenter
+                                left: parent.left
+                                leftMargin: 14
+                            }
+                            font: FluTextStyle.BodyStrong
+                        }
+                        FluDivider{
+                            id:item_divider
+                            width: 1
+                            height: 40
+                            anchors.right: parent.right
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: index !== model_columns.count-1
+                        }
+                        MouseArea{
+                            height: 40
+                            width: 6
+                            anchors.centerIn: item_divider
+                            visible: item_divider.visible
+                            cursorShape: Qt.SplitHCursor
+                            onPressed:
+                                (mouse)=>{
+                                    clickPos = Qt.point(mouse.x, mouse.y)
+                                }
+                            preventStealing: true
+                            onPositionChanged:
+                                (mouse)=>{
+                                    var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                                    var minimumWidth = item_column_text.implicitWidth+28
+                                    if(model.minimumWidth){
+                                        minimumWidth = model.minimumWidth
+                                    }
+                                    item_column.width = Math.max(item_column.width+delta.x,minimumWidth)
+                                }
+                        }
+                    }
+                }
+            }
+        }
+    }
     Flickable{
         id:layout_flickable
         height: layout_table.height
@@ -66,44 +136,12 @@ Item {
             width: Math.max(layout_flickable.width,d.columnsWidth)
             clip:true
             interactive: false
-            header: FluRectangle{
+            removeDisplaced: Transition {
-                id:layout_columns
+                NumberAnimation { properties: "x,y"; duration: 167 }
-                height: control.itemHeight
-                width: parent.width
-                color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-                radius: [5,5,0,0]
-                Row{
-                    id:list_columns
-                    spacing: 0
-                    anchors.fill: parent
-                    Repeater{
-                        model: model_columns
-                        delegate: Item{
-                            height: list_columns.height
-                            width: model.width
-                            FluText{
-                                text:model.title
-                                wrapMode: Text.WordWrap
-                                anchors{
-                                    verticalCenter: parent.verticalCenter
-                                    left: parent.left
-                                    leftMargin: 14
-                                }
-                                font: FluTextStyle.BodyStrong
-                            }
-                            FluDivider{
-                                width: 1
-                                height: 40
-                                anchors.right: parent.right
-                                anchors.verticalCenter: parent.verticalCenter
-                                visible: index !== model_columns.count-1
-                            }
-                        }
-                    }
-                }
             }
+            header: header_columns
             footer: Item{
-                height: pageVisible ? 50 : 0
+                height: pageVisible ? 54 : 0
                 clip: true
                 width: layout_table.width
                 FluPagination{
@@ -135,7 +173,7 @@ Item {
             model:model_data_source
             delegate: Control{
                 id:item_control
-                height: table_row.maxHeight
+                height: maxHeight()
                 width: layout_table.width
                 property var model_values : getObjectValues(index)
                 property var itemObject: getObject(index)
@@ -149,42 +187,59 @@ Item {
                         return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
                     }
                 }
+                FluDivider{
+                    id:item_divider
+                    width: parent.width
+                    height: 1
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                }
                 Row{
                     id: table_row
                     spacing: 0
                     anchors.fill: parent
-                    property int maxHeight: itemHeight
                     Repeater{
+                        id:repeater_rows
                         model: model_values
-                        delegate:Item{
+                        delegate:FluControl{
-                            height: table_row.maxHeight
+                            id:item_row_control
-                            width: modelData.width
+                            width: layout_table.headerItem.widthByColumnIndex(index)
+                            height: item_control.height
+                            focusPolicy:Qt.TabFocus
+                            background: Item{
+                                FluFocusRectangle{
+                                    visible: item_row_control.activeFocus
+                                    radius:8
+                                }
+                            }
                             Loader{
+                                id:item_column_loader
                                 property var model : modelData
                                 property var dataModel : listModel
                                 property var dataObject : itemObject
-                                anchors.fill: parent
+                                property var tableView : control
+                                anchors.verticalCenter: parent.verticalCenter
+                                width: parent.width
                                 sourceComponent: {
                                     if(model.itemData instanceof Component){
                                         return model.itemData
                                     }
                                     return com_text
                                 }
-                                onHeightChanged:
+                            }
-                                {
+                            function columnHeight(){
-                                    table_row.maxHeight = Math.max(table_row.maxHeight,height,itemHeight)
+                                return item_column_loader.item.height
-                                    parent.height = table_row.maxHeight
-                                    table_row.parent.height = table_row.maxHeight
-                                }
                             }
                         }
                     }
                 }
-                FluDivider{
+                function maxHeight(){
-                    width: parent.width
+                    var h = 0
-                    height: 1
+                    for(var i=0;i<repeater_rows.count;i++){
-                    anchors.right: parent.right
+                        var item = repeater_rows.itemAt(i)
-                    anchors.bottom: parent.bottom
+                        h=Math.max(h,item.columnHeight())
+                    }
+                    return h
                 }
             }
         }
@@ -192,17 +247,18 @@ Item {
     Component{
         id:com_text
         Item{
+            height: table_value.implicitHeight + 20
             FluCopyableText{
                 id:table_value
                 text:String(model.itemData)
                 width: Math.min(parent.width - 14,implicitWidth)
                 wrapMode: Text.WordWrap
-                onImplicitHeightChanged: parent.parent.parent.height = Math.max(implicitHeight + 20,itemHeight)
                 anchors{
                     verticalCenter: parent.verticalCenter
                     left: parent.left
                     leftMargin: 14
                 }
+                rightPadding: 14
                 MouseArea{
                     id:item_mouse
                     hoverEnabled: true
@@ -232,4 +288,7 @@ Item {
         }
         return data;
     }
+    function remove(index){
+        model_data_source.remove(index)
+    }
 }

src/imports/FluentUI/Controls/FluTableView2.qml

@@ -0,0 +1,178 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import Qt.labs.qmlmodels
+import FluentUI
+
+
+Rectangle {
+
+    id:control
+
+    property var columnSource
+    property var dataSource
+    color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+    onColumnSourceChanged: {
+        if(columnSource.length!==0){
+            var com_column = Qt.createComponent("FluTableModelColumn.qml")
+            if (com_column.status === Component.Ready) {
+                var columns= []
+                columnSource.forEach(function(item){
+                    var column = com_column.createObject(table_model,{display:item.dataIndex});
+                    columns.push(column)
+                })
+                table_model.columns = columns
+            }
+        }
+    }
+
+    TableModel {
+        id:table_model
+    }
+
+    onDataSourceChanged: {
+        table_model.clear()
+        dataSource.forEach(function(item){
+            table_model.appendRow(item)
+        })
+    }
+
+    Component{
+        id:com_edit
+        FluTextBox {
+            anchors.fill: parent
+            text: display
+            verticalAlignment: TextInput.AlignVCenter
+            Component.onCompleted: selectAll()
+            TableView.onCommit: {
+                display = text
+            }
+        }
+    }
+
+    ScrollView{
+        id:scroll_table
+        anchors.left: header_vertical.right
+        anchors.top: header_horizontal.bottom
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+        TableView {
+            id:table_view
+            ListModel{
+                id:model_columns
+            }
+            boundsBehavior: Flickable.StopAtBounds
+            ScrollBar.horizontal: FluScrollBar{}
+            ScrollBar.vertical: FluScrollBar{}
+            selectionModel: ItemSelectionModel {}
+            columnWidthProvider: function(column) {
+                let w = explicitColumnWidth(column)
+                if (w >= 0){
+                    var minimumWidth = columnSource[column].minimumWidth
+                    var maximumWidth = columnSource[column].maximumWidth
+                    if(!minimumWidth){
+                        minimumWidth = 100
+                    }
+                    if(!maximumWidth){
+                        maximumWidth = 65535
+                    }
+
+                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
+                }
+                return implicitColumnWidth(column)
+            }
+            rowHeightProvider: function(row) {
+                let h = explicitRowHeight(row)
+                if (h >= 0){
+                    return Math.max(40, h)
+                }
+                return implicitRowHeight(row)
+            }
+            model: table_model
+            clip: true
+            delegate: Rectangle {
+                required property bool selected
+                required property bool current
+                color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
+                implicitHeight: 40
+                implicitWidth: columnSource[column].width
+                FluText {
+                    text: display
+                    anchors.fill: parent
+                    anchors.margins: 10
+                    elide: Text.ElideRight
+                    verticalAlignment: Text.AlignVCenter
+                }
+                TableView.editDelegate: {
+                    var obj =columnSource[column].editDelegate
+                    if(obj){
+                        return obj
+                    }
+                    return com_edit
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_handle
+        FluControl {
+            width: 24
+            height: 24
+            background: Rectangle{
+                radius: 12
+                color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+            }
+            visible: SelectionRectangle.control.active
+            FluShadow{
+                radius: 12
+            }
+            Rectangle{
+                width: 24
+                height: 24
+                radius: 12
+                scale: pressed?4/10:hovered?6/10:5/10
+                color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+                anchors.centerIn: parent
+                Behavior on scale {
+                    NumberAnimation{
+                        duration: 167
+                    }
+                }
+            }
+        }
+    }
+
+    SelectionRectangle {
+        target: table_view
+        bottomRightHandle:com_handle
+        topLeftHandle: com_handle
+    }
+
+
+    FluHorizontalHeaderView {
+        id: header_horizontal
+        textRole: "title"
+        model: columnSource
+        anchors.left: scroll_table.left
+        anchors.top: parent.top
+        syncView: table_view
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
+    }
+
+    FluVerticalHeaderView {
+        id: header_vertical
+        boundsBehavior: Flickable.StopAtBounds
+        anchors.top: scroll_table.top
+        anchors.left: parent.left
+        syncView: table_view
+        clip: true
+    }
+
+
+}
+

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -73,6 +73,5 @@ TextField{
         id:menu
         inputItem: control
     }
-
 }
 

src/imports/FluentUI/Controls/FluTextBoxMenu.qml

@@ -9,8 +9,7 @@ FluMenu{
     property string selectAllText : "全选"
     property var inputItem
     id:menu
-    focus:false
+    width: 120
-    enableAnimation:false
     onVisibleChanged: {
         if(visible){
             inputItem.forceActiveFocus()

src/imports/FluentUI/Controls/FluTimePicker.qml

@@ -5,7 +5,6 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-
     enum HourFormat {
         H,
         HH
@@ -16,7 +15,6 @@ Rectangle {
     property var window : Window.window
     property int hourFormat: FluTimePicker.H
     property int isH: hourFormat === FluTimePicker.H
-
     id:root
     color: {
         if(mouse_area.containsMouse){
@@ -29,7 +27,6 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
-
     MouseArea{
         id:mouse_area
         hoverEnabled: true

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -7,15 +7,16 @@ import FluentUI
 Button {
     property bool disabled: false
     property string contentDescription: ""
-    property color disableColor: checked ? FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(159/255,159/255,159/255,1) :FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+    property color disableColor: checked ? FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(233/255,233/255,233/255,1) :FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color checkColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(240/255,240/255,240/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
     property color borderNormalColor: FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color borderCheckColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color borderDisableColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
+    property color borderDisableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(200/255,200/255,200/255,1)
     property color dotNormalColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
     property color dotCheckColor: FluTheme.dark ? Qt.rgba(0/255,0/255,0/255,1) : Qt.rgba(255/255,255/255,255/255,1)
+    property color dotDisableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(150/255,150/255,150/255,1)
     property var clickListener : function(){
         checked = !checked
     }
@@ -76,6 +77,9 @@ Button {
                 scale: hovered&!disabled ? 7/10 : 6/10
                 anchors.verticalCenter: parent.verticalCenter
                 color: {
+                    if(disabled){
+                        return dotDisableColor
+                    }
                     if(checked){
                         return dotCheckColor
                     }

src/imports/FluentUI/Controls/FluTooltip.qml

@@ -1,18 +1,30 @@
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-ToolTip {
+T.ToolTip {
-    id:tool_tip
+    id: control
+    x: parent ? (parent.width - implicitWidth) / 2 : 0
+    y: -implicitHeight - 3
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+    margins: 6
+    padding: 6
+    font: FluTextStyle.Body
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
     contentItem: FluText {
-        text: tool_tip.text
+        text: control.text
-        padding: 4
+        font: control.font
-        wrapMode: Text.WrapAnywhere
+        wrapMode: Text.Wrap
     }
-    background: Rectangle{
+    background: Rectangle {
-        anchors.fill: parent
         color: FluTheme.dark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
-        radius: 5
+        radius: 3
-        FluShadow{}
+        FluShadow{
+            radius: 3
+        }
     }
 }

src/imports/FluentUI/Controls/FluVerticalHeaderView.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Templates as T
+import FluentUI
+
+T.VerticalHeaderView {
+    id: control
+    implicitWidth: Math.max(1, contentWidth)
+    implicitHeight: syncView ? syncView.height : 0
+    delegate: Rectangle {
+        readonly property real cellPadding: 8
+        implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
+        implicitHeight: text.implicitHeight + (cellPadding * 2)
+        color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+        border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+        FluText {
+            id: text
+            text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole]
+                                        : model[control.textRole])
+                                   : modelData
+            width: parent.width
+            font.bold: true
+            height: parent.height
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}

src/imports/FluentUI/Controls/FluWindowResize.qml

@@ -1,144 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-
-MouseArea {
-
-    property int border: 4
-    property var window: Window.window
-    property bool fixedSize: {
-        if(window == null)
-            return true
-        if(window.visibility === Window.Maximized || window.visibility === Window.FullScreen){
-            return true
-        }
-        return (window.minimumWidth === window.maximumWidth && window.minimumHeight === window.maximumHeight)
-    }
-
-    anchors.fill: parent
-    acceptedButtons: Qt.LeftButton
-    hoverEnabled: true
-    preventStealing: true
-    propagateComposedEvents: true
-    z: -65535
-
-    onPressed :
-        (mouse)=> {
-            if (fixedSize) {
-                return;
-            }
-
-            let e = 0;
-            if (ptInRect(0,0,border,border, mouse.x, mouse.y)) {
-                e = Qt.TopEdge | Qt.LeftEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(border,0,window.width-border*2,border, mouse.x, mouse.y)) {
-                e = Qt.TopEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(window.width-border,0,border,border, mouse.x, mouse.y)) {
-                e = Qt.TopEdge | Qt.RightEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(window.width-border,border,border,window.height-border*2, mouse.x, mouse.y)) {
-                e = Qt.RightEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(window.width-border,window.height-border,border,border, mouse.x, mouse.y)) {
-                e = Qt.BottomEdge | Qt.RightEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(border,window.height-border,window.width-border*2,border, mouse.x, mouse.y)) {
-                e = Qt.BottomEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(0,window.height-border,border,border, mouse.x, mouse.y)) {
-                e = Qt.BottomEdge | Qt.LeftEdge;
-                window.startSystemResize(e);
-                return;
-            }
-
-            if (ptInRect(0,border,border , window.height-border*2, mouse.x, mouse.y)) {
-                e = Qt.LeftEdge;
-                window.startSystemResize(e);
-                return;
-            }
-        }
-
-    onPositionChanged:
-        (mouse)=> {
-            if (fixedSize) {
-                cursorShape = Qt.ArrowCursor;
-                return;
-            }
-            if (ptInRect(0,0,border,border, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeFDiagCursor;
-                return;
-            }
-
-            if (ptInRect(border,0,window.width-border*2,border, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeVerCursor;
-                return;
-            }
-
-            if (ptInRect(window.width-border,0,border,border, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeBDiagCursor;
-                return;
-            }
-
-            if (ptInRect(window.width-border,border,border,window.height-border*2, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeHorCursor;
-                return;
-            }
-
-            if (ptInRect(window.width-border,window.height-border,border,border, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeFDiagCursor;
-                return;
-            }
-
-            if (ptInRect(border,window.height-border,window.width-border*2,border, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeVerCursor;
-                return;
-            }
-
-            if (ptInRect(0,window.height-border,border,border, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeBDiagCursor;
-                return;
-            }
-
-            if (ptInRect(0,border,border, window.height-border*2, mouse.x, mouse.y)) {
-                cursorShape = Qt.SizeHorCursor;
-                return;
-            }
-
-            cursorShape = Qt.ArrowCursor;
-        }
-
-    onExited: {
-        cursorShape = Qt.ArrowCursor;
-    }
-
-    function ptInRect(rcx,rcy,rcwidth,rcheight, x, y)
-    {
-        if ((rcx <= x && x <= (rcx + rcwidth)) &&
-                (rcy <= y && y <= (rcy + rcheight))) {
-            return true;
-        }
-        return false;
-    }
-
-}

src/imports/FluentUI/designer/fluentui.metainfo

@@ -1,144 +0,0 @@
-MetaInfo {
-
-	Type {
-        name: "FluentUI.Controls.FluTextButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluTextButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Text Button\")" }
-        }
-    }
-
-    Type {
-        name: "FluentUI.Controls.FluButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Standard Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluFilledButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluFilledButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Filled Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluToggleButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluToggleButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Toggle Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluIconButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluIconButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluDropDownButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluDropDownButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"DropDownButton\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluRadioButton"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluRadioButton"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Radio Button\")" }
-        }
-    }
-	
-	Type {
-        name: "FluentUI.Controls.FluCheckBox"
-        icon: "images/button-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluCheckBox"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/button-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A button with text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"CheckBox\")" }
-        }
-    }
-
-    Type {
-        name: "FluentUI.Controls.FluText"
-        icon: "images/label-icon16.png"
-
-        ItemLibraryEntry {
-            name: "FluText"
-            category: "FluentUI - Controls"
-            libraryIcon: "images/label-icon.png"
-            version: "1.0"
-            requiredImport: "FluentUI"
-            toolTip: qsTr("A text.")
-
-            Property { name: "text"; type: "binding"; value: "qsTr(\"Text\")" }
-        }
-    }
-	
-}