update framelesshelper

Add Svg module to resolve unsupported image format error.

CMakeLists.txt

@@ -1,7 +1,33 @@
-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)
+option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
+
+#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
+set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
+if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
+    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
+endif()
+
 add_subdirectory(src)
-add_subdirectory(example)
-add_subdirectory(framelesshelper)
+
+if (FLUENTUI_BUILD_EXAMPLES)
+    add_subdirectory(example)
+endif ()
+
+if (FLUENTUI_BUILD_FRAMELESSHEPLER)
+    set(FRAMELESSHELPER_BUILD_STATIC ON)
+    set(FRAMELESSHELPER_NO_SUMMARY OFF)
+    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT OFF)
+    set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
+    add_subdirectory(framelesshelper)
+endif ()
+
+message("------------------------ FluentUI ------------------------")
+message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
+message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")
+message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
+message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")

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,14 +1,18 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(example VERSION 0.1 LANGUAGES CXX)
 
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
+#判断FluentUI库类型
+if(FLUENTUI_BUILD_STATIC_LIB)
+    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
+endif()
+
 #设置可执行文件输出目录
 if(CMAKE_BUILD_TYPE STREQUAL "Debug")
     set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
@@ -20,9 +24,17 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,2,1)
+add_definitions(-DVERSION=1,3,7,4)
 
-find_package(Qt6 REQUIRED COMPONENTS Quick REQUIRED)
+find_package(Qt6 REQUIRED COMPONENTS Quick Svg)
+
+if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
+    qt_standard_project_setup()
+else()
+    set(CMAKE_AUTOMOC ON)
+    set(CMAKE_AUTORCC ON)
+    set(CMAKE_AUTOUIC ON)
+endif()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -91,14 +103,28 @@ set_target_properties(example PROPERTIES
 )
 
 #链接库
-target_link_libraries(example PRIVATE
-    Qt6::Quick
-    fluentuiplugin
-    FramelessHelper::Core
-    FramelessHelper::Quick
-)
+if (FLUENTUI_BUILD_STATIC_LIB)
+    target_link_libraries(example PRIVATE
+        Qt6::Quick
+        Qt::Svg
+        fluentui
+        fluentuiplugin
+        FramelessHelper::Core
+        FramelessHelper::Quick
+    )
+else()
+    target_link_libraries(example PRIVATE
+        Qt6::Quick
+        Qt::Svg
+        fluentuiplugin
+        FramelessHelper::Core
+        FramelessHelper::Quick
+    )
+endif()
 
 #安装
 install(TARGETS example
     BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

example/qml/App.qml

@@ -5,15 +5,17 @@ import QtQuick.Layouts
 import FluentUI
 
 Window {
-    id:app
+    id: app
+    flags: Qt.SplashScreen
     Component.onCompleted: {
         FluApp.init(app)
         FluTheme.darkMode = FluDarkMode.System
+        FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"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",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.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
-                }
-            }
         }
     }
 
@@ -42,11 +37,6 @@ FluExpander{
             rightMargin: 5
             topMargin: 5
         }
-        onActiveFocusChanged: {
-            if(activeFocus){
-                control.expand = true
-            }
-        }
         onClicked:{
             FluTools.clipText(content.text)
             showSuccess("复制成功")
@@ -134,13 +124,16 @@ FluExpander{
                     "FluPasswordBox",
                     "FluBreadcrumbBar",
                     "FluCopyableText",
-                    "FluAcrylic"
+                    "FluAcrylic",
+                    "FluRemoteLoader",
+                    "FluMenuBar",
+                    "FluPagination",
+                    "FluRadioButtons",
+                    "FluImage",
+                    "FluSpinBox"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");
         return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
     }
-
-
-
 }

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,20 +27,39 @@ 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")
             }
         }
+        FluPaneItem{
+            title:"Image"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
+            }
+        }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
@@ -58,6 +78,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
             }
         }
+        FluPaneItem{
+            title:"RadioButton"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
+            }
+        }
         FluPaneItem{
             title:"ToggleSwitch"
             onTap:{
@@ -167,8 +193,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 +264,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_TableView.qml")
             }
         }
+        FluPaneItem{
+            title:"Pagination"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
+            }
+        }
         FluPaneItem{
             title:"MultiWindow"
             onTap:{
@@ -279,16 +318,25 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:lang.media
-        icon:FluentIcons.Media
+        title:lang.other
+        icon:FluentIcons.Shop
         FluPaneItem{
-            title:"MediaPlayer"
-            image:"qrc:/example/res/image/control/MediaPlayerElement.png"
-            recentlyAdded:true
-            order:0
-            desc:"A control to display video and image content."
+            id:item_other
+            title:"RemoteLoader"
+            count: 99
+            infoBadge:FluBadge{
+                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")
+            }
+        }
+        FluPaneItem{
+            title:"HotLoader"
+            tapFunc:function(){
+                 FluApp.navigate("/hotload")
             }
         }
     }

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{
 
@@ -58,6 +58,7 @@ FluScrollablePage{
         width: 100
         height: 100
         anchors.centerIn: parent
+    }
 }'
     }
 

example/qml/page/T_Awesome.qml

@@ -33,6 +33,7 @@ FluContentPage {
         cellWidth: 80
         cellHeight: 80
         clip: true
+        boundsBehavior: GridView.StopAtBounds
         model:FluApp.awesomelist()
         ScrollBar.vertical: FluScrollBar {}
         anchors{

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{
 
@@ -24,6 +24,7 @@ FluScrollablePage{
         FluTextButton{
             disabled:text_button_switch.checked
             text:"Text Button"
+            contentDescription: "文本按钮"
             onClicked: {
                 showInfo("点击Text Button")
             }
@@ -210,20 +211,21 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            items:[
-                FluMenuItem{
-                    text:"Menu_1"
-                },
-                FluMenuItem{
-                    text:"Menu_2"
-                },
-                FluMenuItem{
-                    text:"Menu_3"
-                },
-                FluMenuItem{
-                    text:"Menu_4"
+            FluMenuItem{
+                text:"Menu_1"
+            }
+            FluMenuItem{
+                text:"Menu_2"
+            }
+            FluMenuItem{
+                text:"Menu_3"
+            }
+            FluMenuItem{
+                text:"Menu_4"
+                onClicked: {
+
                 }
-            ]
+            }
         }
         FluToggleSwitch{
             id:drop_down_button_switch
@@ -239,20 +241,18 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluDropDownButton{
     text:"DropDownButton"
-    items:[
-        FluMenuItem{
-            text:"Menu_1"
-        },
-        FluMenuItem{
-            text:"Menu_2"
-        },
-        FluMenuItem{
-            text:"Menu_3"
-        },
-        FluMenuItem{
-            text:"Menu_4"
-        }
-    ]
+    FluMenuItem{
+        text:"Menu_1"
+    },
+    FluMenuItem{
+        text:"Menu_2"
+    },
+    FluMenuItem{
+        text:"Menu_3"
+    },
+    FluMenuItem{
+        text:"Menu_4"
+    }
 }'
     }
 
@@ -261,24 +261,23 @@ FluScrollablePage{
         height: 100
         paddings: 10
         Layout.topMargin: 20
-        ColumnLayout{
+        FluRadioButtons{
             spacing: 8
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            Repeater{
-                id:repeater
-                property int selecIndex : 0
-                model: 3
-                delegate:  FluRadioButton{
-                    checked : repeater.selecIndex===index
-                    disabled:radio_button_switch.checked
-                    text:"Radio Button_"+index
-                    clickListener:function(){
-                        repeater.selecIndex = index
-                    }
-                }
+            FluRadioButton{
+                disabled:radio_button_switch.checked
+                text:"Radio Button_1"
+            }
+            FluRadioButton{
+                disabled:radio_button_switch.checked
+                text:"Radio Button_2"
+            }
+            FluRadioButton{
+                disabled:radio_button_switch.checked
+                text:"Radio Button_3"
             }
         }
         FluToggleSwitch{

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{
 
@@ -22,7 +22,12 @@ FluScrollablePage{
             }
             FluCheckBox{
                 disabled: check_box_switch.checked
-                text:"Text"
+                text:"Right"
+            }
+            FluCheckBox{
+                disabled: check_box_switch.checked
+                text:"Left"
+                textRight: false
             }
         }
         FluToggleSwitch{

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{
 
@@ -23,8 +23,6 @@ FluScrollablePage{
                 text:"此颜色组件是Github上的开源项目"
             }
             FluTextButton{
-                leftPadding: 0
-                rightPadding: 0
                 text:"https://github.com/rshest/qml-colorpicker"
                 onClicked: {
                     Qt.openUrlExternally(text)

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})
-                }
             }
         }
     }
@@ -50,6 +46,7 @@ FluScrollablePage{
             }
             FluComboBox {
                 editable: true
+                font:FluTextStyle.BodyStrong
                 model: ListModel {
                     id: model_2
                     ListElement { text: "Banana" }

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{
 
@@ -23,6 +23,9 @@ FluScrollablePage{
                 text:"showYear=true"
             }
             FluDatePicker{
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleDateString())
+                }
             }
         }
     }
@@ -50,7 +53,9 @@ FluScrollablePage{
 
             FluDatePicker{
                 showYear:false
-
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleDateString())
+                }
             }
         }
     }

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{
 
@@ -27,7 +27,7 @@ FluScrollablePage{
                 Layout.topMargin: 20
                 Item{
                     anchors.fill: parent
-                    ColumnLayout{
+                    FluRadioButtons{
                         spacing: 8
                         anchors{
                             top: parent.top
@@ -35,17 +35,14 @@ FluScrollablePage{
                             topMargin: 15
                             leftMargin: 15
                         }
-                        Repeater{
-                            id:repeater
-                            property int selecIndex : 0
-                            model: 3
-                            delegate:  FluRadioButton{
-                                checked : repeater.selecIndex===index
-                                text:"Radio Button_"+index
-                                clickListener:function() {
-                                    repeater.selecIndex = index
-                                }
-                            }
+                        FluRadioButton{
+                            text:"Radio Button_1"
+                        }
+                        FluRadioButton{
+                            text:"Radio Button_2"
+                        }
+                        FluRadioButton{
+                            text:"Radio Button_3"
                         }
                     }
                 }

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{
 
@@ -76,7 +76,6 @@ FluScrollablePage{
                 Image{
                     source: "qrc:/example/res/image/banner_1.jpg"
                     asynchronous: true
-                    sourceSize: Qt.size(400,300)
                     fillMode:Image.PreserveAspectCrop
                 }
                 Image{

example/qml/page/T_Home.qml

@@ -2,12 +2,13 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 import FluentUI
 
 FluScrollablePage{
 
-    pageMode: FluNavigationView.SingleTask
+    launchMode: FluPage.SingleTask
+    animDisabled: true
 
     ListModel{
         id:model_header
@@ -17,7 +18,6 @@ FluScrollablePage{
             desc:"The latest FluentUI controls and styles for your applications."
             url:"https://github.com/zhuzichu520/FluentUI"
         }
-
     }
 
     Item{

example/qml/page/T_Image.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Image"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 260
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluImage{
+                width: 384
+                height: 240
+                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
+                onStatusChanged:{
+                    if(status === Image.Error){
+                        showError("图片加载失败，请重新加载")
+                    }
+                }
+                clickErrorListener: function(){
+                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluImage{
+    width: 400
+    height: 300
+    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
+}'
+    }
+
+}

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{
 
@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 200
+        height: 240
         paddings: 10
         ColumnLayout{
             spacing: 14
@@ -44,6 +44,12 @@ FluScrollablePage{
                     showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
                 }
             }
+            FluButton{
+                text:"Loading"
+                onClicked: {
+                    showLoading()
+                }
+            }
         }
     }
     CodeExpander{

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,42 @@ 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")
+            onTriggered: {
+                showError("Quit")
+            }
+        }
+        Action {
+            text: qsTr("Disable")
+            enabled:false
+            onTriggered: {
+                showError("Disable")
+            }
+        }
+        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 +52,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 +90,78 @@ menu.popup()
 '
     }
 
-    FluMenu{
-        id:menu
-        FluMenuItem{
-            text:"删除"
-            onClicked: {
-                showError("删除")
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
             }
-        }
-        FluMenuItem{
-            text:"修改"
-            onClicked: {
-                showInfo("修改")
+
+            FluText{
+                text:"MenuBar"
             }
+
+            FluMenuBar {
+                id:menu_bar
+                FluMenu {
+                    title: qsTr("File")
+                    Action { text: qsTr("New...") }
+                    Action { text: qsTr("Open...") }
+                    Action { text: qsTr("Save") }
+                    FluMenuSeparator { }
+                    Action { text: qsTr("Quit") }
+                    Action {
+                        text: qsTr("Disable")
+                        enabled:false
+                    }
+                    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_Pagination.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///example/qml/component"
+import FluentUI
+
+FluScrollablePage{
+
+    title:"Pagination"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 200
+        paddings: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluPagination{
+                pageCurrent: 1
+                pageButtonCount: 5
+                itemCount: 5000
+            }
+            FluPagination{
+                pageCurrent: 2
+                itemCount: 5000
+                pageButtonCount: 7
+            }
+            FluPagination{
+                pageCurrent: 3
+                itemCount: 5000
+                pageButtonCount: 9
+            }
+        }
+
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluPagination{
+    pageCurrent: 1
+    itemCount: 1000
+    pageButtonCount: 9
+}'
+    }
+
+
+}

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{
 
@@ -76,5 +76,4 @@ 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{
 
@@ -12,33 +12,22 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 260
+        height: 110
         paddings: 10
+
         ColumnLayout{
-            spacing: 20
+            spacing: 10
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
+            FluText{
+                text: "indeterminate = true"
+            }
             FluProgressBar{
             }
             FluProgressRing{
             }
-            FluProgressBar{
-                id:progress_bar
-                indeterminate: false
-            }
-            FluProgressRing{
-                id:progress_ring
-                indeterminate: false
-            }
-            FluSlider{
-                value:50
-                onValueChanged:{
-                    progress_bar.progress = value/100
-                    progress_ring.progress = value/100
-                }
-            }
         }
     }
     CodeExpander{
@@ -47,20 +36,65 @@ FluScrollablePage{
         code:'FluProgressBar{
 
 }
-
 FluProgressRing{
 
 }
+'
+    }
 
-FluProgressBar{
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 230
+        paddings: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: "indeterminate = false"
+            }
+            FluProgressBar{
+                indeterminate: false
+                progress: slider.value/100
+            }
+            FluProgressRing{
+                indeterminate: false
+                progress: slider.value/100
+            }
+            FluProgressBar{
+                indeterminate: false
+                progressVisible: true
+                progress: slider.value/100
+            }
+            FluProgressRing{
+                indeterminate: false
+                progressVisible: true
+                progress: slider.value/100
+            }
+            FluSlider{
+                id:slider
+                Component.onCompleted: {
+                    value = 50
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluProgressBar{
     indeterminate: false
 }
-
 FluProgressRing{
     indeterminate: false
-}'
+    progressVisible: true
+}
+'
     }
 
 
-
 }

example/qml/page/T_RadioButton.qml

@@ -0,0 +1,101 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"RadioButton"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        Row{
+            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+            }
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+                text:"Right"
+            }
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+                text:"Left"
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id:radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluRadioButton{
+    text:"Text"
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        FluRadioButtons{
+            spacing: 8
+            anchors.verticalCenter: parent.verticalCenter
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluRadioButton{
+                disabled: radio_button_switch2.checked
+                text:"Radio Button_1"
+            }
+            FluRadioButton{
+                disabled: radio_button_switch2.checked
+                text:"Radio Button_2"
+            }
+            FluRadioButton{
+                disabled: radio_button_switch2.checked
+                text:"Radio Button_3"
+            }
+        }
+        FluToggleSwitch{
+            id:radio_button_switch2
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluRadioButtons{
+    spacing: 8
+    FluRadioButton{
+        text:"Radio Button_1"
+    }
+    FluRadioButton{
+        text:"Radio Button_2"
+    }
+    FluRadioButton{
+        text:"Radio Button_3"
+    }
+}'
+    }
+
+}

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{
-                number:10
+            FluRatingControl {}
+            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{
 
@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 480
+        height: 460
         paddings: 10
 
         Column{

example/qml/page/T_RemoteLoader.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluPage{
+    launchMode: FluPage.SingleTop
+    FluRemoteLoader{
+        anchors.fill: parent
+        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 "../component"
+import "qrc:///example/qml/global"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -13,11 +13,11 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 136
+        height: 128
         paddings: 10
 
         ColumnLayout{
-            spacing: 10
+            spacing: 5
             anchors{
                 top: parent.top
                 left: parent.left
@@ -43,16 +43,15 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 168
+        height: 160
         paddings: 10
 
         ColumnLayout{
-            spacing: 10
+            spacing: 5
             anchors{
                 top: parent.top
                 left: parent.left
             }
-
             FluText{
                 text:lang.navigation_view_display_mode
                 font: FluTextStyle.BodyStrong

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
         }
     }
@@ -27,17 +26,14 @@ FluScrollablePage{
 }'
     }
 
-
     FluArea{
         Layout.fillWidth: true
         height: 200
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
-            vertical:true
+            orientation: Qt.Vertical
             anchors.left: parent.left
-            anchors.leftMargin: 20
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -45,7 +41,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{
-                        text:"Loading"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Loading
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Empty"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Empty
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Error"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Error
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Success"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Success
-                        }
+                FluMenuItem{
+                    text:"Loading"
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusView.Loading
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Empty"
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusView.Empty
+                    }
+                }
+                FluMenuItem{
+                    text:"Error"
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusView.Error
+                    }
+                }
+                FluMenuItem{
+                    text:"Success"
+                    onClicked: {
+                        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{
-                        text:"Equal"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"SizeToContent"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Compact"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.Compact
-                        }
+                FluMenuItem{
+                    text:"Equal"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabView.Equal
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"SizeToContent"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                    }
+                }
+                FluMenuItem{
+                    text:"Compact"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabView.Compact
+                    }
+                }
             }
             FluDropDownButton{
                 id:btn_close_button_visibility
                 text:"Always"
                 Layout.preferredWidth: 120
-                items:[
-                    FluMenuItem{
-                        text:"Nerver"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.Nerver
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Always"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.Always
-                        }
-                    },
-                    FluMenuItem{
-                        text:"OnHover"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.OnHover
-                        }
+                FluMenuItem{
+                    text:"Nerver"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabView.Nerver
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Always"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabView.Always
+                    }
+                }
+                FluMenuItem{
+                    text:"OnHover"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabView.OnHover
+                    }
+                }
             }
         }
     }

example/qml/page/T_TableView.qml

@@ -3,143 +3,175 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
-FluScrollablePage{
+FluContentPage{
 
     title:"TableView"
 
     Component.onCompleted: {
-        const columns = [
-                          {
-                              title: '姓名',
-                              dataIndex: 'name',
-                              width:100
-                          },
-                          {
-                              title: '年龄',
-                              dataIndex: 'age',
-                              width:100
-                          },
-                          {
-                              title: '住址',
-                              dataIndex: 'address',
-                              width:200
-                          },
-                          {
-                              title: '别名',
-                              dataIndex: 'nickname',
-                              width:100
-                          },
-                          {
-                              title: '操作',
-                              dataIndex: 'action',
-                              width:120
-                          },
-                      ];
-        table_view.columns = columns
-        loadData(1,10)
-    }
-
-    FluTableView{
-        id:table_view
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        pageCurrent:1
-        pageCount:10
-        itemCount: 1000
-        onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
+        loadData(1,1000)
     }
 
     Component{
         id:com_action
         Item{
-            Row{
+            RowLayout{
                 anchors.centerIn: parent
-                spacing: 10
-                FluFilledButton{
-                    text:"编辑"
-                    horizontalPadding: 6
-                    onClicked:{
-                        showSuccess(JSON.stringify(dataObject))
+                FluButton{
+                    text:"删除"
+                    onClicked: {
+                        table_view.closeEditor()
+                        tableModel.removeRow(row)
                     }
                 }
                 FluFilledButton{
-                    text:"删除"
-                    horizontalPadding: 6
-                    onClicked:{
-                        showError(JSON.stringify(dataObject))
+                    text:"编辑"
+                    onClicked: {
+                        showSuccess(JSON.stringify(tableModel.getRow(row)))
                     }
                 }
             }
         }
     }
 
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        code:'FluTableView{
-    id:table_view
-    Layout.fillWidth: true
-    Layout.topMargin: 20
-    pageCurrent:1
-    pageCount:10
-    itemCount: 1000
-    onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
-    Component.onCompleted: {
-        const columns = [
-                          {
-                              title: "姓名",
-                              dataIndex: "name",
-                              width:100
-                          },
-                          {
-                              title: "年龄",
-                              dataIndex: "age",
-                              width:100
-                          },
-                          {
-                              title: "住址",
-                              dataIndex: "address",
-                              width:200
-                          },
-                          {
-                              title: "别名",
-                              dataIndex: "nickname",
-                              width:100
-                          }
-                      ];
-        table_view.columns = columns
-        const dataSource = [
-                {
-                    name: "孙悟空”,
-                    age: 500,
-                    address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                    nickname:"齐天大圣"
-                }
-        ];
-        table_view.dataSource = columns
-    }
-}'
-    }
-
     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)),
-                                age: 500,
-                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                                nickname: "齐天大圣",
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                height:42,
+                                minimumHeight:42,
+                                maximumHeight:300,
                                 action:com_action
                             })
         }
         table_view.dataSource = dataSource
     }
+
+    Component{
+        id:com_combobox
+        FluComboBox {
+            anchors.fill: parent
+            focus: true
+            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()
+            }
+            onCommit: {
+                display = editText
+                tableView.closeEditor()
+            }
+        }
+    }
+
+    FluTableView{
+        id:table_view
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: gagination.top
+        }
+        anchors.topMargin: 20
+        columnSource:[
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                width:100,
+                minimumWidth:80,
+                maximumWidth:200,
+                readOnly:true
+            },
+            {
+                title: '年龄',
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
+            },
+            {
+                title: '住址',
+                dataIndex: 'address',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
+            },
+            {
+                title: '别名',
+                dataIndex: 'nickname',
+                width:100,
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: '长字符串',
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                width:160,
+                minimumWidth:160,
+                maximumWidth:160
+            }
+        ]
+    }
+
+    FluPagination{
+        id:gagination
+        anchors{
+            bottom: parent.bottom
+            left: parent.left
+        }
+        pageCurrent: 1
+        itemCount: 100000
+        pageButtonCount: 7
+        __itemPerPage: 1000
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+
+
 }

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,12 +3,13 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
-    title:"TextBox"
+    launchMode: FluPage.SingleInstance
 
+    title:"TextBox"
     FluArea{
         Layout.fillWidth: true
         height: 68
@@ -165,6 +166,41 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluSpinBox{
+            Layout.topMargin: 20
+            disabled: spin_box_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:spin_box_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluSpinBox{
+
+}'
+    }
 
     function generateRandomNames(numNames) {
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

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{
 
@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 210
+        height: 270
         paddings: 10
         ColumnLayout{
             spacing:0
@@ -72,6 +72,17 @@ FluScrollablePage{
                     FluTheme.nativeText = !FluTheme.nativeText
                 }
             }
+            FluText{
+                text:"开启动画效果"
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.enableAnimation
+                onClicked: {
+                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                }
+            }
         }
     }
     CodeExpander{

example/qml/page/T_TimePicker.qml

@@ -3,12 +3,12 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"TimePicker"
-
+    launchMode: FluPage.SingleInstance
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -27,6 +27,9 @@ FluScrollablePage{
             }
 
             FluTimePicker{
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
             }
 
         }
@@ -53,11 +56,14 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.H"
+                text:"hourFormat=FluTimePicker.HH"
             }
 
             FluTimePicker{
-                 hourFormat:FluTimePicker.HH
+                hourFormat:FluTimePicker.HH
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
             }
 
         }

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{
 
@@ -22,6 +22,12 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 disabled: toggle_switch.checked
+                text:"Right"
+            }
+            FluToggleSwitch{
+                disabled: toggle_switch.checked
+                text:"Left"
+                textRight: false
             }
         }
         FluToggleSwitch{

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{
-                        text:"None"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Single"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Muiltple"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.Compact
-                        }
+                FluMenuItem{
+                    text:"None"
+                    onClicked: {
+                        btn_selection_model.text = text
+                        tree_view.selectionMode = FluTabView.Equal
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Single"
+                    onClicked: {
+                        btn_selection_model.text = text
+                        tree_view.selectionMode = FluTabView.SizeToContent
+                    }
+                }
+                FluMenuItem{
+                    text:"Muiltple"
+                    onClicked: {
+                        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/HotloadWindow.qml

@@ -0,0 +1,85 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import example
+import "qrc:///example/qml/component"
+
+CustomWindow {
+
+    id:window
+    title:"热加载"
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindow.SingleTask
+    FileWatcher{
+        id:watcher
+        onFileChanged: {
+            loader.reload()
+        }
+    }
+    FluArea{
+        anchors.fill: parent
+        FluRemoteLoader{
+            id:loader
+            anchors.fill: parent
+            statusMode: FluStatusView.Success
+            lazy: true
+            errorItem: Item{
+                FluText{
+                    text:loader.itemLodaer().sourceComponent.errorString()
+                    color:"red"
+                    anchors.fill: parent
+                    wrapMode: Text.WrapAnywhere
+                    padding: 20
+                    verticalAlignment: Qt.AlignVCenter
+                    horizontalAlignment: Qt.AlignHCenter
+                }
+            }
+        }
+        FluText{
+            text:"拖入qml文件"
+            font.pixelSize: 26
+            anchors.centerIn: parent
+            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusView.Success
+        }
+        Rectangle{
+            radius: 4
+            anchors.fill: parent
+            color: "#33333333"
+            visible: drop_area.containsDrag
+        }
+        DropArea{
+            id:drop_area
+            anchors.fill: parent
+            onEntered:
+                (event)=>{
+                    if(!event.hasUrls){
+                        event.accepted = false
+                        return
+                    }
+                    if (event.urls.length !== 1) {
+                        event.accepted = false
+                        return
+                    }
+                    var url = event.urls[0].toString()
+                    var fileExtension = url.substring(url.lastIndexOf(".") + 1)
+                    if (fileExtension !== "qml") {
+                        event.accepted = false
+                        return
+                    }
+                    return true
+                }
+            onDropped:
+                (event)=>{
+                    var path = event.urls[0].toString()
+                    loader.source = path
+                    watcher.path = path
+                    loader.reload()
+                }
+        }
+    }
+
+}

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,9 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
-import "../component"
-import "qrc:///example/qml/global/"
+import example
+import "qrc:///example/qml/component"
+import "qrc:///example/qml/global"
 
 CustomWindow {
 
@@ -15,15 +16,19 @@ CustomWindow {
     height: 640
     closeDestory:false
     minimumWidth: 520
-    minimumHeight: 460
+    minimumHeight: 200
     appBarVisible: false
     launchMode: FluWindow.SingleTask
 
     closeFunc:function(event){
-        close_app.open()
+        dialog_close.open()
         event.accepted = false
     }
 
+    Component.onCompleted: {
+        FluTools.setQuitOnLastWindowClosed(false)
+    }
+
     Connections{
         target: appInfo
         function onActiveWindow(){
@@ -58,7 +63,7 @@ CustomWindow {
     }
 
     FluContentDialog{
-        id:close_app
+        id:dialog_close
         title:"退出"
         message:"确定要退出程序吗？"
         negativeText:"最小化"
@@ -76,48 +81,178 @@ CustomWindow {
         }
     }
 
-    FluAppBar {
-        id: title_bar
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
+    Flipable{
+        id:flipable
+        anchors.fill: parent
+        property bool flipped: false
+        property real flipAngle: 0
+        transform: Rotation {
+            id: rotation
+            origin.x: flipable.width/2
+            origin.y: flipable.height/2
+            axis { x: 0; y: 1; z: 0 }
+            angle: flipable.flipAngle
+
+        }
+        states: State {
+            PropertyChanges { target: flipable; flipAngle: 180 }
+            when: flipable.flipped
+        }
+        transitions: Transition {
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
+        }
+        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
+                anchors{
+                    top: parent.top
+                    left: parent.left
+                    topMargin: FluTools.isMacos() ? 20 : 5
+                    leftMargin: 5
+                }
+                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
+                lazy: true
+                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
+                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
+                //                 pageMode: FluNavigationView.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+//                pageMode: FluNavigationView.NoStack
+                items: ItemsOriginal
+                footerItems:ItemsFooter
+                topPadding:FluTools.isMacos() ? 20 : 5
+                displayMode:MainEvent.displayMode
+                logo: "qrc:/example/res/image/favicon.ico"
+                title:"FluentUI"
+                onLogoClicked:{
+                    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{
-        id:nav_view
-        anchors{
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        z:999
-        items: ItemsOriginal
-        footerItems:ItemsFooter
-        topPadding:FluTools.isMacos() ? 20 : 5
-        displayMode:MainEvent.displayMode
-        logo: "qrc:/example/res/image/favicon.ico"
-        title:"FluentUI"
-        autoSuggestBox:FluAutoSuggestBox{
-            width: 280
-            anchors.centerIn: parent
-            iconSource: FluentIcons.Search
-            items: ItemsOriginal.getSearchData()
-            placeholderText: lang.search
-            onItemClicked:
-                (data)=>{
-                    ItemsOriginal.startPageByItem(data)
-                }
-        }
-        Component.onCompleted: {
-            ItemsOriginal.navigationView = nav_view
-            ItemsFooter.navigationView = nav_view
-            setCurrentIndex(0)
+    CircularReveal{
+        id:reveal
+        target:window.contentItem
+        anchors.fill: parent
+        onImageChanged: {
+            changeDark()
         }
     }
+
+    function distance(x1,y1,x2,y2){
+        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
+    }
+
+    function handleDarkChanged(button){
+        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+            changeDark()
+        }else{
+            var target = window.contentItem
+            var pos = button.mapToItem(target,0,0)
+            var mouseX = pos.x
+            var mouseY = pos.y
+            var radius = 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))
+            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
+        }
+    }
+
+    function changeDark(){
+        if(FluTheme.dark){
+            FluTheme.darkMode = FluDarkMode.Light
+        }else{
+            FluTheme.darkMode = FluDarkMode.Dark
+        }
+    }
+
+    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/component/CircularReveal.cpp

@@ -0,0 +1,47 @@
+#include "CircularReveal.h"
+#include <QGuiApplication>
+#include <QQuickItemGrabResult>
+#include <QPainterPath>
+
+CircularReveal::CircularReveal(QQuickItem* parent) : QQuickPaintedItem(parent)
+{
+    setVisible(false);
+    _anim = new QPropertyAnimation(this, "radius", this);
+    _anim->setDuration(333);
+    _anim->setEasingCurve(QEasingCurve::OutCubic);
+    connect(_anim, &QPropertyAnimation::finished,this,[=](){
+        setVisible(false);
+    });
+    connect(this,&CircularReveal::radiusChanged,this,[=](){
+        update();
+    });
+}
+
+void CircularReveal::paint(QPainter* painter)
+{
+    painter->save();
+    painter->eraseRect(boundingRect());
+    painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), _source);
+    QPainterPath path;
+    path.moveTo(_center.x(),_center.y());
+    path.addEllipse(QPointF(_center.x(),_center.y()), _radius, _radius);
+    painter->setCompositionMode(QPainter::CompositionMode_Clear);
+    painter->fillPath(path, Qt::black);
+    painter->restore();
+}
+
+void CircularReveal::start(int w,int h,const QPoint& center,int radius){
+    _anim->setStartValue(0);
+    _anim->setEndValue(radius);
+    _center = center;
+    _grabResult = _target->grabToImage(QSize(w,h));
+    connect(_grabResult.data(), &QQuickItemGrabResult::ready, this, &CircularReveal::handleGrabResult);
+}
+
+void CircularReveal::handleGrabResult(){
+    _grabResult.data()->image().swap(_source);
+    update();
+    setVisible(true);
+    Q_EMIT imageChanged();
+    _anim->start();
+}

example/src/component/CircularReveal.h

@@ -0,0 +1,28 @@
+#ifndef CIRCULARREVEAL_H
+#define CIRCULARREVEAL_H
+
+#include <QQuickItem>
+#include <QQuickPaintedItem>
+#include <QPainter>
+#include <QPropertyAnimation>
+#include "src/stdafx.h"
+
+class CircularReveal : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QQuickItem*,target)
+    Q_PROPERTY_AUTO(int,radius)
+public:
+    CircularReveal(QQuickItem* parent = nullptr);
+    void paint(QPainter* painter) override;
+    Q_INVOKABLE void start(int w,int h,const QPoint& center,int radius);
+    Q_SIGNAL void imageChanged();
+    Q_SLOT void handleGrabResult();
+private:
+    QImage _source;
+    QPropertyAnimation* _anim;
+    QPoint _center;
+    QSharedPointer<QQuickItemGrabResult>  _grabResult;
+};
+
+#endif // CIRCULARREVEAL_H

example/src/component/FileWatcher.cpp

@@ -0,0 +1,24 @@
+#include "FileWatcher.h"
+
+FileWatcher::FileWatcher(QObject *parent)
+    : QObject{parent}
+{
+    connect(&_watcher, &QFileSystemWatcher::fileChanged, this, [=](const QString &path){
+        Q_EMIT fileChanged();
+        clean();
+        _watcher.addPath(_path);
+    });
+    connect(this,&FileWatcher::pathChanged,this,[=](){
+        clean();
+        _watcher.addPath(_path.replace("file:///",""));
+    });
+    if(!_path.isEmpty()){
+        _watcher.addPath(_path);
+    }
+}
+
+void FileWatcher::clean(){
+    foreach (const QString &item,  _watcher.files()) {
+        _watcher.removePath(item);
+    }
+}

example/src/component/FileWatcher.h

@@ -0,0 +1,21 @@
+#ifndef FILEWATCHER_H
+#define FILEWATCHER_H
+
+#include <QObject>
+#include <QFileSystemWatcher>
+#include "src/stdafx.h"
+
+class FileWatcher : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,path);
+public:
+    explicit FileWatcher(QObject *parent = nullptr);
+    Q_SIGNAL void fileChanged();
+private:
+    void clean();
+private:
+    QFileSystemWatcher _watcher;
+};
+
+#endif // FILEWATCHER_H

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("其他");
 }

example/src/main.cpp

@@ -6,11 +6,13 @@
 #include <QProcess>
 #include <FramelessHelper/Quick/framelessquickmodule.h>
 #include <FramelessHelper/Core/private/framelessconfig_p.h>
+#include "src/component/CircularReveal.h"
+#include "src/component/FileWatcher.h"
 #include "AppInfo.h"
 
 FRAMELESSHELPER_USE_NAMESPACE
 
-int main(int argc, char *argv[])
+    int main(int argc, char *argv[])
 {
     //将样式设置为Basic，不然会导致组件显示异常
     qputenv("QT_QUICK_CONTROLS_STYLE","Basic");
@@ -34,9 +36,13 @@ int main(int argc, char *argv[])
     if(!appInfo->isOwnerProcess(&ipc)){
         return 0;
     }
-    app.setQuitOnLastWindowClosed(false);
     QQmlApplicationEngine engine;
     FramelessHelper::Quick::registerTypes(&engine);
+#ifdef FLUENTUI_BUILD_STATIC_LIB
+    engine.addImportPath("qrc:/"); // 让静态资源可以被QML引擎搜索到
+#endif
+    qmlRegisterType<CircularReveal>("example", 1, 0, "CircularReveal");
+    qmlRegisterType<FileWatcher>("example", 1, 0, "FileWatcher");
     appInfo->init(&engine);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,

src/CMakeLists.txt

@@ -1,21 +1,28 @@
-cmake_minimum_required(VERSION 3.16)
-
-project(fluentuiplugin LANGUAGES CXX)
+cmake_minimum_required(VERSION 3.20)
 
+if (FLUENTUI_BUILD_STATIC_LIB)
+    project(fluentui LANGUAGES CXX)
+else()
+    project(fluentuiplugin LANGUAGES CXX)
+endif()
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
-#设置QML插件输出目录->D:\Qt\6.4.3\msvc2019_64\qml\FluentUI
-set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
-
 #设置版本号
-add_definitions(-DVERSION=1,3,2,1)
+add_definitions(-DVERSION=1,3,7,4)
 
-find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml ShaderTools)
+find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
+
+if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
+    qt_standard_project_setup()
+else()
+    set(CMAKE_AUTOMOC ON)
+    set(CMAKE_AUTORCC ON)
+    set(CMAKE_AUTOUIC ON)
+endif()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -32,7 +39,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 qmldir)
 foreach(filepath ${RES_PATHS})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND resource_files ${filename})
@@ -45,36 +52,44 @@ foreach(filepath IN LISTS qml_files resource_files)
 endforeach()
 
 #添加qml模块
-qt_add_library(fluentuiplugin SHARED)
-qt_add_qml_module(fluentuiplugin
-    #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
-    PLUGIN_TARGET fluentuiplugin
-    OUTPUT_DIRECTORY ${QML_PLUGIN_DIRECTORY}
-    VERSION 1.0
-    URI "FluentUI"
-    SOURCES ${sources_files} fluentui.rc
-    QML_FILES ${qml_files}
-    RESOURCES ${resource_files}
-    #支持designer
-    DESIGNER_SUPPORTED
-)
+if (FLUENTUI_BUILD_STATIC_LIB)
+    set(LIB_TYPE "STATIC")
+else()
+    set(LIB_TYPE "SHARED")
+endif()
+qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
+if (FLUENTUI_BUILD_STATIC_LIB)
+    qt_add_qml_module(${PROJECT_NAME}
+        #在静态库编译中使用PLUGIN_TARGET会导致链接失败
+        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
+        VERSION 1.0
+        URI "FluentUI"
+        TYPEINFO "plugins.qmltypes"
+        SOURCES ${sources_files} fluentui.rc
+        QML_FILES ${qml_files}
+        RESOURCES ${resource_files}
+    )
+else()
+    qt_add_qml_module(${PROJECT_NAME}
+        #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
+        PLUGIN_TARGET fluentuiplugin
+        OUTPUT_DIRECTORY ${FLUENTUI_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}
+    )
+endif()
 
 #链接库
-target_link_libraries(fluentuiplugin PUBLIC
+target_link_libraries(${PROJECT_NAME} PUBLIC
     Qt::CorePrivate
     Qt::QuickPrivate
     Qt::QmlPrivate
 )
 
-#链接库 win32库 不然mingw会编译错误
-if(WIN32)
-    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)
-
-
+#安装
+install(DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)

src/Def.h

@@ -7,9 +7,9 @@
 namespace Fluent_DarkMode {
 Q_NAMESPACE
 enum Fluent_DarkModeType {
-    System      = 0x0,
-    Light    = 0x1,
-    Dark     = 0x2,
+    System = 0x0,
+    Light = 0x1,
+    Dark = 0x2,
 };
 Q_ENUM_NS(Fluent_DarkModeType)
 QML_NAMED_ELEMENT(FluDarkMode)

src/FluApp.cpp

@@ -38,11 +38,15 @@ void FluApp::run(){
 
 void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegister* fluRegister){
     if(!routes().contains(route)){
-        qErrnoWarning("没有找到当前路由");
+        qCritical()<<"No route found "<<route;
         return;
     }
     QQmlEngine *engine = qmlEngine(appWindow);
     QQmlComponent component(engine, routes().value(route).toString());
+    if (component.isError()) {
+        qCritical() << component.errors();
+        return;
+    }
     QVariantMap properties;
     properties.insert("route",route);
     if(fluRegister){
@@ -105,3 +109,11 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
 void FluApp::closeApp(){
     qApp->exit(0);
 }
+
+void FluApp::deleteWindow(QQuickWindow* window){
+    if(window){
+        wnds.remove(window->winId());
+        window->deleteLater();
+        window = nullptr;
+    }
+}

src/FluApp.h

@@ -73,6 +73,8 @@ public:
      */
     Q_INVOKABLE void closeApp();
 
+    Q_INVOKABLE void deleteWindow(QQuickWindow* window);
+
 public:
     /**
      * @brief wnds

src/FluTextStyle.cpp

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

src/FluTheme.cpp

@@ -31,6 +31,7 @@ FluTheme::FluTheme(QObject *parent)
     });
     primaryColor(FluColors::getInstance()->Blue());
     nativeText(false);
+    enableAnimation(false);
     darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);
     _systemDark = systemDark();
     qApp->installEventFilter(this);

src/FluTheme.h

@@ -32,6 +32,11 @@ class FluTheme : public QObject
      */
     Q_PROPERTY_AUTO(bool,nativeText);
 
+    /**
+     * @brief 是否开启动画效果
+     */
+    Q_PROPERTY_AUTO(bool,enableAnimation);
+
     QML_NAMED_ELEMENT(FluTheme)
     QML_SINGLETON
 private:

src/FluTools.cpp

@@ -2,6 +2,7 @@
 #include <QGuiApplication>
 #include <QClipboard>
 #include <QUuid>
+#include <QCursor>
 
 FluTools* FluTools::m_instance = nullptr;
 
@@ -63,6 +64,33 @@ bool FluTools::isWin(){
 #endif
 }
 
+int FluTools::qtMajor(){
+    const QString qtVersion = QString::fromLatin1(qVersion());
+    const QStringList versionParts = qtVersion.split('.');
+    return versionParts[0].toInt();
+}
+
+int FluTools::qtMinor(){
+    const QString qtVersion = QString::fromLatin1(qVersion());
+    const QStringList versionParts = qtVersion.split('.');
+    return versionParts[1].toInt();
+}
+
 void FluTools::setQuitOnLastWindowClosed(bool val){
     qApp->setQuitOnLastWindowClosed(val);
 }
+
+void FluTools::setOverrideCursor(Qt::CursorShape shape){
+    qApp->setOverrideCursor(QCursor(shape));
+}
+
+void FluTools::restoreOverrideCursor(){
+    qApp->restoreOverrideCursor();
+}
+
+void FluTools::deleteItem(QObject *p){
+    if(p){
+        delete p;
+        p = nullptr;
+    }
+}

src/FluTools.h

@@ -50,6 +50,15 @@ public:
 
     Q_INVOKABLE void setQuitOnLastWindowClosed(bool val);
 
+    Q_INVOKABLE int qtMajor();
+
+    Q_INVOKABLE int qtMinor();
+
+    Q_INVOKABLE void setOverrideCursor(Qt::CursorShape shape);
+
+    Q_INVOKABLE void restoreOverrideCursor();
+
+    Q_INVOKABLE void deleteItem(QObject *p);
 };
 
 #endif // FLUTOOLS_H

src/WindowHelper.cpp

@@ -1,7 +1,6 @@
 #include "WindowHelper.h"
 
 #include "FluRegister.h"
-#include "FluApp.h"
 
 WindowHelper::WindowHelper(QObject *parent)
     : QObject{parent}
@@ -19,10 +18,3 @@ QVariant WindowHelper::createRegister(QQuickWindow* window,const QString& path){
     p->path(path);
     return  QVariant::fromValue(p);
 }
-
-void WindowHelper::deleteWindow(){
-    if(this->window){
-        FluApp::getInstance()->wnds.remove(this->window->winId());
-        this->window->deleteLater();
-    }
-}

src/WindowHelper.h

@@ -24,11 +24,6 @@ public:
      */
     Q_INVOKABLE void initWindow(QQuickWindow* window);
 
-    /**
-     * @brief deleteWindow 销毁窗口，释放资源，QML中的Window close并不会销毁窗口，只是把窗口隐藏了
-     */
-    Q_INVOKABLE void deleteWindow();
-
     /**
      * @brief createRegister 创建一个FluRegsiter对象，在FluWindow中registerForWindowResult方法调用
      * @param window

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -19,9 +19,31 @@ Rectangle{
     property color closeNormalColor: Qt.rgba(0,0,0,0)
     property color closeHoverColor:  Qt.rgba(251/255,115/255,115/255,1)
     property bool showDark: false
+    property bool showClose: true
+    property bool showMinimize: true
+    property bool showMaximize: true
     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
@@ -57,25 +79,16 @@ Rectangle{
         anchors.right: parent.right
         height: root.height
         spacing: 0
-        RowLayout{
+        FluToggleSwitch{
+            id:btn_dark
             Layout.alignment: Qt.AlignVCenter
             Layout.rightMargin: 5
             visible: showDark
-            spacing: 5
-            FluText{
-                text:darkText
-                color:root.textColor
-            }
-            FluToggleSwitch{
-                checked: FluTheme.dark
-                clickListener: function(){
-                    if(FluTheme.dark){
-                        FluTheme.darkMode = FluDarkMode.Light
-                    }else{
-                        FluTheme.darkMode = FluDarkMode.Dark
-                    }
-                }
-            }
+            text:darkText
+            textColor:root.textColor
+            checked: FluTheme.dark
+            textRight: false
+            clickListener:()=> darkClickListener(btn_dark)
         }
         FluIconButton{
             id:btn_minimize
@@ -86,12 +99,10 @@ Rectangle{
             iconSize: 11
             text:minimizeText
             radius: 0
-            visible: !isMac
+            visible: !isMac && showMinimize
             iconColor: root.textColor
             color: hovered ? minimizeHoverColor : minimizeNormalColor
-            onClicked: {
-                d.win.visibility = Window.Minimized
-            }
+            onClicked: minClickListener()
         }
         FluIconButton{
             id:btn_maximize
@@ -100,17 +111,12 @@ Rectangle{
             iconSource : d.isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
             color: hovered ? maximizeHoverColor : maximizeNormalColor
             Layout.alignment: Qt.AlignVCenter
-            visible: d.resizable && !isMac
+            visible: d.resizable && !isMac && showMaximize
             radius: 0
             iconColor: root.textColor
             text:d.isRestore?restoreText:maximizeText
             iconSize: 11
-            onClicked: {
-                if (d.win.visibility === Window.Maximized)
-                    d.win.visibility = Window.Windowed
-                else
-                    d.win.visibility = Window.Maximized
-            }
+            onClicked: maxClickListener()
         }
         FluIconButton{
             id:btn_close
@@ -119,14 +125,12 @@ Rectangle{
             text:closeText
             width: 40
             height: 30
-            visible: !isMac
+            visible: !isMac && showClose
             radius: 0
             iconSize: 10
             iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
             color:hovered ? closeHoverColor : closeNormalColor
-            onClicked: {
-                d.win.close()
-            }
+            onClicked: closeClickListener()
         }
     }
 
@@ -142,4 +146,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/FluAutoSuggestBox.qml

@@ -22,33 +22,29 @@ FluTextBox{
         id:control_popup
         y:control.height
         focus: false
+//        modal: true
+//        Overlay.modal: Item{}
+
+        padding: 0
         enter: Transition {
             NumberAnimation {
                 property: "opacity"
                 from:0
                 to:1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
-        onVisibleChanged: {
-            if(visible){
-                list_view.currentIndex = -1
-            }
-        }
-        background: Rectangle{
-            id:container
-            width: control.width
-            radius: 4
+        contentItem: FluRectangle{
+            radius: [4,4,4,4]
             FluShadow{
                 radius: 4
             }
             color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-            height: 38*Math.min(Math.max(list_view.count,1),8)
             ListView{
                 id:list_view
                 anchors.fill: parent
                 clip: true
-                currentIndex: -1
+                boundsBehavior: ListView.StopAtBounds
                 ScrollBar.vertical: FluScrollBar {}
                 header: Item{
                     width: control.width
@@ -63,53 +59,39 @@ FluTextBox{
                         }
                     }
                 }
-                delegate:Control{
+                delegate:FluControl{
+                    id:item_control
+                    height: 38
                     width: control.width
-                    padding:10
+                    onClicked:{
+                        handleClick(modelData)
+                    }
                     background: Rectangle{
+                        FluFocusRectangle{
+                            visible: item_control.activeFocus
+                            radius:4
+                        }
                         color:  {
-                            if(list_view.currentIndex === index){
-                                return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
-                            }
                             if(hovered){
                                 return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
                             }
                             return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
                         }
-                        MouseArea{
-                            id:mouse_area
-                            anchors.fill: parent
-                            Connections{
-                                target: control
-                                function onHandleClicked(){
-                                    if((list_view.currentIndex === index)){
-                                        handleClick(modelData)
-                                    }
-                                }
-                            }
-                            onClicked: handleClick(modelData)
-                        }
-                        Rectangle{
-                            width: 3
-                            color:FluTheme.primaryColor.dark
-                            visible: list_view.currentIndex === index
-                            radius: 3
-                            height: 20
-                            anchors{
-                                left: parent.left
-                                verticalCenter: parent.verticalCenter
-                            }
-                        }
                     }
                     contentItem: FluText{
                         text:modelData.title
-                        anchors{
-                            verticalCenter: parent.verticalCenter
-                        }
+                        leftPadding: 10
+                        rightPadding: 10
+                        verticalAlignment : Qt.AlignVCenter
                     }
                 }
             }
         }
+        background: Item{
+            id:container
+            implicitWidth: control.width
+            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
+        }
     }
     onTextChanged: {
         loadData()

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){
-                return -2.5
+            if(parent && topRight){
+                if(isDot){
+                    return -2.5
+                }
+                return -(control.width/2)
             }
-            return -(control.width/2)
+            return 0
         }
         topMargin: {
-            if(isDot){
-                return -2.5
+            if(parent && topRight){
+                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/FluBreadcrumbBar.qml

@@ -33,7 +33,7 @@ Item {
                 properties: "opacity"
                 from: 1
                 to: 0
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         add: Transition {
@@ -41,7 +41,7 @@ Item {
                 properties: "opacity"
                 from: 0
                 to: 1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         delegate: Item{

src/imports/FluentUI/Controls/FluButton.qml

@@ -11,7 +11,7 @@ Button {
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
     property color textColor: {
         if(FluTheme.dark){
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(131/255,131/255,131/255,1)
             }
             if(pressed){
@@ -19,7 +19,7 @@ Button {
             }
             return Qt.rgba(1,1,1,1)
         }else{
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(160/255,160/255,160/255,1)
             }
             if(pressed){
@@ -44,7 +44,7 @@ Button {
         border.width: 1
         radius: 4
         color:{
-            if(disabled){
+            if(!enabled){
                 return disableColor
             }
             return hovered ? hoverColor :normalColor

src/imports/FluentUI/Controls/FluCalendarPicker.qml

@@ -65,7 +65,7 @@ Rectangle {
                 property: "opacity"
                 from:0
                 to:1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         exit:Transition {
@@ -73,7 +73,7 @@ Rectangle {
                 property: "opacity"
                 from:1
                 to:0
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         contentItem: Item{

src/imports/FluentUI/Controls/FluCalendarView.qml

@@ -243,8 +243,6 @@ Item {
             }
             FluTextButton{
                 id:title
-                leftPadding: 0
-                rightPadding: 0
                 anchors{
                     verticalCenter: parent.verticalCenter
                     left: parent.left