update

CMakeLists.txt

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

README.md

@@ -115,5 +115,9 @@ View more [`here`](doc/md/all_components.md)!
 
 This FluentUI library currently licensed under [MIT License](./License)
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
+
 ## ⚡ Visitor count
 ![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

example/CMakeLists.txt

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

example/qml/component/CodeExpander.qml

@@ -130,7 +130,10 @@ FluExpander{
                     "FluBreadcrumbBar",
                     "FluCopyableText",
                     "FluAcrylic",
-                    "FluRemoteLoader"
+                    "FluRemoteLoader",
+                    "FluMenuBar",
+                    "FluPagination",
+                    "FluRadioButtons"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/global/ItemsOriginal.qml

@@ -72,6 +72,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:{
@@ -253,9 +259,9 @@ FluObject{
             }
         }
         FluPaneItem{
-            title:"TableView2"
+            title:"Pagination"
             onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
+                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
             }
         }
         FluPaneItem{

example/qml/page/T_Acrylic.qml

@@ -58,6 +58,7 @@ FluScrollablePage{
         width: 100
         height: 100
         anchors.centerIn: parent
+    }
 }'
     }
 

example/qml/page/T_Buttons.qml

@@ -210,20 +210,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: {
+                    console.debug(parent.height)
                 }
-            ]
+            }
         }
         FluToggleSwitch{
             id:drop_down_button_switch
@@ -261,24 +262,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_CheckBox.qml

@@ -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_Expander.qml

@@ -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_Home.qml

@@ -17,7 +17,6 @@ FluScrollablePage{
             desc:"The latest FluentUI controls and styles for your applications."
             url:"https://github.com/zhuzichu520/FluentUI"
         }
-
     }
 
     Item{

example/qml/page/T_Menu.qml

@@ -9,6 +9,36 @@ 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_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_Progress.qml

@@ -33,10 +33,13 @@ FluScrollablePage{
                 indeterminate: false
             }
             FluSlider{
-                value:50
                 onValueChanged:{
-                    progress_bar.progress = value/100
-                    progress_ring.progress = value/100
+                    var progress = value/100
+                    progress_bar.progress = progress
+                    progress_ring.progress = progress
+                }
+                Component.onCompleted: {
+                    value = 50
                 }
             }
         }

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_Settings.qml

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

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

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

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

@@ -5,162 +5,12 @@ import QtQuick.Window
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluScrollablePage{
+FluContentPage{
 
     title:"TableView"
 
     Component.onCompleted: {
-        const columns = [
-                          {
-                              title: '姓名',
-                              dataIndex: 'name',
-                              width:100,
-
-                          },
-                          {
-                              title: '年龄',
-                              dataIndex: 'item_age',
-                              width:100,
-                              minimumWidth:100
-                          },
-                          {
-                              title: '住址',
-                              dataIndex: 'address',
-                              width:200
-                          },
-                          {
-                              title: '别名',
-                              dataIndex: 'nickname',
-                              width:100
-                          },
-                          {
-                              title: '操作',
-                              dataIndex: 'action',
-                              width:120
-                          },
-                      ];
-        table_view.columns = columns
-        loadData(1,10)
-    }
-
-    Component{
-        id:com_age
-        Item{
-            id:item_age
-            property var ageArr: [100,300,500,1000]
-            height: 60
-            FluComboBox{
-                width: 80
-                anchors{
-                    verticalCenter: parent.verticalCenter
-                    left: parent.left
-                    leftMargin: 10
-                }
-                model: ListModel {
-                    ListElement { text: 100 }
-                    ListElement { text: 300 }
-                    ListElement { text: 500 }
-                    ListElement { text: 1000 }
-                }
-                Component.onCompleted: {
-                    currentIndex=ageArr.findIndex((element) => element === dataModel.age)
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_action
-        Item{
-            height: 60
-            Row{
-                anchors.centerIn: parent
-                spacing: 10
-                FluFilledButton{
-                    text:"编辑"
-                    horizontalPadding: 6
-                    onClicked:{
-                        showError(JSON.stringify(dataObject))
-                    }
-                }
-                FluFilledButton{
-                    text:"删除"
-                    horizontalPadding: 6
-                    onClicked:{
-                        table_view.remove(dataModel.index)
-                    }
-                }
-            }
-        }
-    }
-
-    FluText{
-        Layout.topMargin: 20
-        text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。"
-    }
-
-    FluTableView{
-        id:table_view
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        pageCurrent:1
-        pageCount:10
-        itemCount: 1000
-        onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
-    }
-
-    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
-    }
-}'
+        loadData(1,2000)
     }
 
     function loadData(page,count){
@@ -188,13 +38,68 @@ FluScrollablePage{
         for(var i=0;i<count;i++){
             dataSource.push({
                                 name: getRandomName(),
-                                item_age: com_age,
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                action:com_action
+                                nickname: getRandomNickname()
                             })
         }
         table_view.dataSource = dataSource
     }
+
+    Component{
+        id:com_combobox
+
+        FluComboBox {
+            anchors.fill: parent
+            currentIndex: display
+            editable: true
+            model: ListModel {
+                ListElement { text: 100 }
+                ListElement { text: 300 }
+                ListElement { text: 500 }
+                ListElement { text: 1000 }
+            }
+            Component.onCompleted: {
+                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
+                selectAll()
+            }
+            TableView.onCommit: {
+                display = editText
+            }
+        }
+    }
+
+    FluTableView{
+        id:table_view
+        anchors.fill: parent
+        anchors.topMargin: 20
+        columnSource:[
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                width:100,
+                minimumWidth:50
+
+            },
+            {
+                title: '年龄',
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth: 100
+            },
+            {
+                title: '住址',
+                dataIndex: 'address',
+                width:200
+            },
+            {
+                title: '别名',
+                dataIndex: 'nickname',
+                width:100,
+
+            }
+        ]
+    }
 }

example/qml/page/T_TableView2.qml

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

example/qml/page/T_TextBox.qml

@@ -7,8 +7,9 @@ import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
-    title:"TextBox"
+    pageMode: FluNavigationView.SingleInstance
 
+    title:"TextBox"
     FluArea{
         Layout.fillWidth: true
         height: 68

example/qml/page/T_ToggleSwitch.qml

@@ -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_TreeView.qml

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

@@ -135,7 +135,7 @@ CustomWindow {
             FluRemoteLoader{
                 id:loader
                 anchors.fill: parent
-//                source: "http://localhost:9000/RemoteComponent.qml"
+                //                source: "http://localhost:9000/RemoteComponent.qml"
                 source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
             }
         }
@@ -219,7 +219,7 @@ CustomWindow {
             NumberAnimation {
                 target: canvas
                 property: "radius"
-                duration: 666
+                duration: 333
                 easing.type: Easing.OutCubic
             }
         }

example/qml/window/StandardWindow.qml

@@ -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模式的窗口，每次我都会创建一个新的窗口"

src/CMakeLists.txt

@@ -13,9 +13,10 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,4,0)
+add_definitions(-DVERSION=1,3,6,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
+qt_standard_project_setup()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -32,7 +33,7 @@ foreach(filepath ${QML_PATHS})
 endforeach(filepath)
 
 #遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.qsb *.metainfo)
+file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
 foreach(filepath ${RES_PATHS})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND resource_files ${filename})
@@ -57,26 +58,14 @@ qt_add_qml_module(fluentuiplugin
     SOURCES ${sources_files} fluentui.rc
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}
-    #支持designer
-    DESIGNER_SUPPORTED
 )
 
 #链接库
 target_link_libraries(fluentuiplugin PUBLIC
-    Qt::CorePrivate
-    Qt::QuickPrivate
-    Qt::QmlPrivate
+    Qt::Core
+    Qt::Quick
+    Qt::Qml
 )
 
-#链接库 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 ${QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)

src/FluApp.cpp

@@ -43,6 +43,10 @@ void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegist
     }
     QQmlEngine *engine = qmlEngine(appWindow);
     QQmlComponent component(engine, routes().value(route).toString());
+    if (component.isError()) {
+        qWarning() << component.errors();
+        return;
+    }
     QVariantMap properties;
     properties.insert("route",route);
     if(fluRegister){

src/FluTextStyle.cpp

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

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -76,20 +76,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{
-                id:btn_dark
-                checked: FluTheme.dark
-                clickListener:()=> darkClickListener(btn_dark)
-            }
+            text:darkText
+            textColor:root.textColor
+            checked: FluTheme.dark
+            textRight: false
+            clickListener:()=> darkClickListener(btn_dark)
         }
         FluIconButton{
             id:btn_minimize
@@ -147,4 +143,8 @@ Rectangle{
         return btn_close
     }
 
+    function darkButton(){
+        return btn_dark
+    }
+
 }

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/FluCheckBox.qml

@@ -19,6 +19,10 @@ Button {
     property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
     property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
+    property real size: 18
+    property alias textColor: btn_text.textColor
+    property bool textRight: true
+    property real textSpacing: 6
     property var clickListener : function(){
         checked = !checked
     }
@@ -39,13 +43,14 @@ Button {
     Accessible.onPressAction: control.clicked()
     focusPolicy:Qt.TabFocus
     contentItem: RowLayout{
-        spacing: 4
+        spacing: control.textSpacing
+        layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
         Rectangle{
-            width: 20
-            height: 20
+            width: control.size
+            height: control.size
             radius: 4
             border.color: {
-                if(disabled){
+                if(!enabled){
                     return borderDisableColor
                 }
                 if(checked){
@@ -62,7 +67,7 @@ Button {
             border.width: 1
             color: {
                 if(checked){
-                    if(disabled){
+                    if(!enabled){
                         return checkedDisableColor
                     }
                     if(pressed){
@@ -73,7 +78,7 @@ Button {
                     }
                     return checkedColor
                 }
-                if(disabled){
+                if(!enabled){
                     return disableColor
                 }
                 if(hovered){
@@ -100,8 +105,9 @@ Button {
             }
         }
         FluText{
+            id:btn_text
             text: control.text
-            Layout.leftMargin: 5
+            Layout.alignment: Qt.AlignVCenter
             visible: text !== ""
         }
     }

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -24,7 +24,6 @@ ComboBox {
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
         palette.text: control.palette.text
         palette.highlightedText: control.palette.highlightedText
-        font.bold: control.currentIndex === index
         highlighted: control.highlightedIndex === index
         hoverEnabled: control.hoverEnabled
     }

src/imports/FluentUI/Controls/FluContentPage.qml

@@ -4,15 +4,13 @@ import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
 
-Item {
+FluPage {
     property alias title: text_title.text
     default property alias content: container.data
     property int leftPadding: 10
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
-    property int pageMode: FluNavigationView.SingleTop
-    property string url: ''
     id:control
     FluText{
         id:text_title

src/imports/FluentUI/Controls/FluDivider.qml

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

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -12,7 +12,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){
@@ -20,7 +20,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){
@@ -30,7 +30,7 @@ Button {
         }
     }
     property var window : Window.window
-    property alias items: menu.content
+    default property alias contentData: menu.contentData
     Accessible.role: Accessible.Button
     Accessible.name: control.text
     Accessible.description: contentDescription
@@ -51,7 +51,7 @@ Button {
             radius:8
         }
         color:{
-            if(disabled){
+            if(!enabled){
                 return disableColor
             }
             return hovered ? hoverColor :normalColor
@@ -75,9 +75,9 @@ Button {
         color: control.textColor
     }
     onClicked: {
-        if(items && menu.getContainerCount()!==0){
+        if(items && menu.count !==0){
             var pos = control.mapToItem(null, 0, 0)
-            var containerHeight = menu.getContainerHeight()
+            var containerHeight = menu.count*36
             if(window.height>pos.y+control.height+containerHeight){
                 menu.y = control.height
             }else if(pos.y>containerHeight){
@@ -90,6 +90,7 @@ Button {
     }
     FluMenu{
         id:menu
+        modal:true
         width: control.width
     }
 }

src/imports/FluentUI/Controls/FluExpander.qml

@@ -79,8 +79,7 @@ Item {
         Behavior on height {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: expand ? [ 0, 0, 0, 1 ] : [ 1, 0, 0, 0 ]
+                easing.type: Easing.InCubic
             }
         }
     }

src/imports/FluentUI/Controls/FluFilledButton.qml

@@ -12,7 +12,7 @@ Button {
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
     property color textColor: {
         if(FluTheme.dark){
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(173/255,173/255,173/255,1)
             }
             return Qt.rgba(0,0,0,1)
@@ -38,7 +38,7 @@ Button {
             radius:4
         }
         color:{
-            if(disabled){
+            if(!enabled){
                 return disableColor
             }
             if(pressed){

src/imports/FluentUI/Controls/FluIconButton.qml

@@ -9,12 +9,12 @@ Button {
     property bool disabled: false
     property int radius:4
     property string contentDescription: ""
-    property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
-    property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+    property color pressedColor: FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
     property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property color color: {
-        if(disabled){
+        if(!enabled){
             return disableColor
         }
         if(pressed){
@@ -24,12 +24,12 @@ Button {
     }
     property color iconColor: {
         if(FluTheme.dark){
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(130/255,130/255,130/255,1)
             }
             return Qt.rgba(1,1,1,1)
         }else{
-            if(disabled){
+            if(!enabled){
                 return Qt.rgba(161/255,161/255,161/255,1)
             }
             return Qt.rgba(0,0,0,1)

src/imports/FluentUI/Controls/FluMenu.qml

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

src/imports/FluentUI/Controls/FluMenuBar.qml

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

src/imports/FluentUI/Controls/FluMenuBarItem.qml

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

src/imports/FluentUI/Controls/FluMenuItem.qml

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

src/imports/FluentUI/Controls/FluMenuSeparator.qml

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

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -14,7 +14,7 @@ TextArea{
     width: 300
     enabled: !disabled
     color: {
-        if(disabled){
+        if(!enabled){
             return disableColor
         }
         return normalColor
@@ -24,7 +24,7 @@ TextArea{
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: FluTheme.primaryColor.lightest
     placeholderTextColor: {
-        if(disabled){
+        if(!enabled){
             return placeholderDisableColor
         }
         if(focus){

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -15,7 +15,8 @@ Item {
     enum PageModeFlag{
         Standard = 0,
         SingleTask = 1,
-        SingleTop = 2
+        SingleTop = 2,
+        SingleInstance = 3
     }
     property url logo
     property string title: ""
@@ -30,6 +31,7 @@ Item {
     id:control
     QtObject{
         id:d
+        property var pageMap: ({})
         property var stackItems: []
         property int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
@@ -120,8 +122,7 @@ Item {
             Behavior on height {
                 NumberAnimation{
                     duration: 167
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
+                    easing.type: Easing.InCubic
                 }
             }
         }
@@ -138,8 +139,7 @@ Item {
             Behavior on height {
                 NumberAnimation{
                     duration: 167
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
+                    easing.type: Easing.InCubic
                 }
             }
             width: layout_list.width
@@ -331,8 +331,7 @@ Item {
             Behavior on height {
                 NumberAnimation{
                     duration: 167
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
+                    easing.type: Easing.InCubic
                 }
             }
             clip: true
@@ -490,7 +489,7 @@ Item {
                         }
                         Connections{
                             target: d
-                           function onIsCompactAndNotPanelChanged(){
+                            function onIsCompactAndNotPanelChanged(){
                                 if(item_dot_loader.item){
                                     item_dot_loader.item.isDot = d.isCompactAndNotPanel
                                 }
@@ -532,6 +531,20 @@ Item {
                         layout_footer.currentIndex = item.idx-(nav_list.count-layout_footer.count)
                     }
                     nav_list.currentIndex = item.idx
+                    if(nav_swipe.currentItem.pageMode === FluNavigationView.SingleInstance){
+                        var url = nav_swipe.currentItem.url
+                        var pageIndex = -1
+                        for(var i=0;i<nav_swipe2.children.length;i++){
+                            var obj =  nav_swipe2.children[i]
+                            if(obj.url === url){
+                                pageIndex = i
+                                break
+                            }
+                        }
+                        if(pageIndex !== -1){
+                            nav_swipe2.currentIndex = pageIndex
+                        }
+                    }
                 }
             }
             FluIconButton{
@@ -555,8 +568,7 @@ Item {
                 Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 0, 0, 0, 1 ]
+                        easing.type: Easing.InCubic
                     }
                 }
             }
@@ -622,39 +634,27 @@ Item {
         Behavior on anchors.leftMargin {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
+                easing.type: Easing.InCubic
             }
         }
         StackView{
             id:nav_swipe
             anchors.fill: parent
             clip: true
+            visible: !nav_swipe2.visible
             popEnter : Transition{}
-            popExit : Transition {
-                NumberAnimation {
-                    properties: "y"
-                    from: 0
-                    to: nav_swipe.height
-                    duration: dontPageAnimation ? 0 : 167
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: [ 1, 0, 0, 0 ]
-                }
-            }
-            pushEnter: Transition {
-                NumberAnimation {
-                    properties: "y";
-                    from: nav_swipe.height;
-                    to: 0
-                    duration: dontPageAnimation ? 0 : 167
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
-                }
-            }
+            popExit : Transition {}
+            pushEnter: Transition {}
             pushExit : Transition{}
             replaceEnter : Transition{}
             replaceExit : Transition{}
         }
+        StackLayout{
+            id:nav_swipe2
+            anchors.fill: nav_swipe
+            clip: true
+            visible: nav_swipe.currentItem.pageMode === FluNavigationView.SingleInstance
+        }
     }
     MouseArea{
         anchors.fill: parent
@@ -690,15 +690,13 @@ Item {
         Behavior on width {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
+                easing.type: Easing.InCubic
             }
         }
         Behavior on x {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
+                easing.type: Easing.InCubic
             }
         }
         visible: {
@@ -763,7 +761,7 @@ Item {
             clip: true
             ScrollBar.vertical: FluScrollBar {}
             model:d.handleItems()
-            highlightMoveDuration: 150
+            highlightMoveDuration: 167
             highlight: Item{
                 clip: true
                 Rectangle{
@@ -872,7 +870,7 @@ Item {
                 if(!d.isCompact){
                     control_popup.close()
                 }
-           }
+            }
         }
         padding: 0
         focus: true
@@ -887,14 +885,21 @@ Item {
                 delegate:Button{
                     id:item_button
                     width: 180
-                    padding:10
+                    height: 38
                     focusPolicy:Qt.TabFocus
                     background: Rectangle{
                         color:  {
-                            if(hovered){
-                                return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
+                            if(FluTheme.dark){
+                                if(item_button.hovered){
+                                    return Qt.rgba(1,1,1,0.06)
+                                }
+                                return Qt.rgba(0,0,0,0)
+                            }else{
+                                if(item_button.hovered){
+                                    return Qt.rgba(0,0,0,0.03)
+                                }
+                                return Qt.rgba(0,0,0,0)
                             }
-                            return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
                         }
                         FluFocusRectangle{
                             visible: item_button.activeFocus
@@ -921,6 +926,7 @@ Item {
                         text:modelData.title
                         elide: Text.ElideRight
                         rightPadding: item_dot_loader.width
+                        verticalAlignment: Qt.AlignVCenter
                         anchors{
                             verticalCenter: parent.verticalCenter
                         }
@@ -976,6 +982,16 @@ Item {
     function getItems(){
         return nav_list.model
     }
+
+
+    Component{
+        id:com_placeholder
+        Item{
+            property int pageMode: FluNavigationView.SingleInstance
+            property string url
+        }
+    }
+
     function push(url,argument={}){
         let page = nav_swipe.find(function(item) {
             return item.url === url;
@@ -999,8 +1015,35 @@ Item {
             default:
             }
         }
-        nav_swipe.push(url,Object.assign(argument,{url:url}))
-        d.stackItems.push(nav_list.model[nav_list.currentIndex])
+        var comp = Qt.createComponent(url)
+        if (comp.status === Component.Ready) {
+            //先判断nav_swipe2中是否有当前url数据
+            var pageIndex = -1
+            for(var i=0;i<nav_swipe2.children.length;i++){
+                var item =  nav_swipe2.children[i]
+                if(item.url === url){
+                    pageIndex = i
+                    break
+                }
+            }
+            var options = Object.assign(argument,{url:url})
+            if(pageIndex!==-1){
+                nav_swipe2.currentIndex = pageIndex
+                nav_swipe.push(com_placeholder,options)
+            }else{
+                var obj  = comp.createObject(nav_swipe,options)
+                if(obj.pageMode === FluNavigationView.SingleInstance){
+                    nav_swipe.push(com_placeholder,options)
+                    nav_swipe2.children.push(obj)
+                    nav_swipe2.currentIndex = nav_swipe2.count - 1
+                }else{
+                    nav_swipe.push(obj)
+                }
+            }
+            d.stackItems.push(nav_list.model[nav_list.currentIndex])
+        }else{
+            console.error(comp.errorString())
+        }
     }
     function getCurrentIndex(){
         return nav_list.currentIndex

src/imports/FluentUI/Controls/FluObject.qml

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

src/imports/FluentUI/Controls/FluPage.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI
+
+Item {
+    property int pageMode: FluNavigationView.SingleTop
+    property string url : ""
+    id: control
+    opacity: visible
+    visible: false
+    Behavior on opacity{
+        NumberAnimation{
+            duration: 83
+        }
+    }
+    Component.onCompleted: {
+        visible = true
+    }
+
+}

src/imports/FluentUI/Controls/FluPagination.qml

@@ -9,9 +9,9 @@ Item {
     property string nextText: "下一页>"
     property int pageCurrent: 0
     property int itemCount: 0
+    property int pageButtonCount: 5
     property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
     property int __itemPerPage: 10
-    property int pageButtonCount: 5
     property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
     id: control
     implicitHeight: 40
@@ -34,7 +34,6 @@ Item {
             FluToggleButton{
                 property int pageNumber:1
                 visible: control.pageCount>0
-                enabled: control.pageCurrent>1
                 checked: pageNumber === control.pageCurrent
                 text:String(pageNumber)
                 clickListener:function() {

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -15,7 +15,7 @@ TextField{
     width: 300
     enabled: !disabled
     color: {
-        if(disabled){
+        if(!enabled){
             return disableColor
         }
         return normalColor
@@ -25,7 +25,7 @@ TextField{
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: FluTheme.primaryColor.lightest
     placeholderTextColor: {
-        if(disabled){
+        if(!enabled){
             return placeholderDisableColor
         }
         if(focus){

src/imports/FluentUI/Controls/FluPivot.qml

@@ -27,7 +27,8 @@ Item {
         clip: true
         spacing: 20
         interactive: false
-        orientation:ListView.Horizontal
+        orientation: ListView.Horizontal
+        highlightMoveDuration: 167
         highlight: Item{
             clip: true
             Rectangle{
@@ -38,7 +39,8 @@ Item {
                 y:37
                 Behavior on width {
                     NumberAnimation{
-                        duration: 150
+                        duration: 167
+                        easing.type: Easing.InCubic
                     }
                 }
             }
@@ -61,11 +63,6 @@ Item {
                         return normalColor
                     }
                 }
-                transitions: Transition {
-                    NumberAnimation{
-                        duration: 400;
-                    }
-                }
             }
             onClicked: {
                 nav_list.currentIndex = index

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -13,6 +13,9 @@ Button {
     property color hoverColor: checked ? FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1) : FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(222/255,222/255,222/255,1)
     property color disableColor: checked ? FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(159/255,159/255,159/255,1)  : FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(222/255,222/255,222/255,1)
     property alias textColor: btn_text.textColor
+    property real size: 18
+    property bool textRight: true
+    property real textSpacing: 6
     property var clickListener : function(){
         checked = !checked
     }
@@ -33,28 +36,30 @@ Button {
     font:FluTextStyle.Body
     onClicked: clickListener()
     contentItem: RowLayout{
+        spacing: control.textSpacing
+        layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
         Rectangle{
             id:rect_check
-            width: 20
-            height: 20
-            radius: 10
+            width: control.size
+            height: control.size
+            radius: size/2
             border.width: {
-                if(checked&&disabled){
-                    return 4
+                if(checked&&!enabled){
+                    return 3
                 }
                 if(pressed){
-                    if(checked){
-                        return 5
-                    }
-                    return 1
-                }
-                if(hovered){
                     if(checked){
                         return 4
                     }
                     return 1
                 }
-                return checked ? 5 : 1
+                if(hovered){
+                    if(checked){
+                        return 3
+                    }
+                    return 1
+                }
+                return checked ? 4 : 1
             }
             Behavior on border.width {
                 NumberAnimation{
@@ -64,13 +69,13 @@ Button {
                 }
             }
             border.color: {
-                if(disabled){
+                if(!enabled){
                     return borderDisableColor
                 }
                 return  borderNormalColor
             }
             color:{
-                if(disabled){
+                if(!enabled){
                     return disableColor
                 }
                 if(hovered){

src/imports/FluentUI/Controls/FluRadioButtons.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import FluentUI
+
+ColumnLayout {
+    default property alias buttons: control.data
+    property int currentIndex : -1
+    id:control
+    onCurrentIndexChanged: {
+        for(var i = 0;i<buttons.length;i++){
+            buttons[i].checked = false
+        }
+        buttons[currentIndex].checked = true
+    }
+    Component.onCompleted: {
+        for(var i = 0;i<buttons.length;i++){
+            buttons[i].clickListener = function(){
+                for(var i = 0;i<buttons.length;i++){
+                    var button = buttons[i]
+                    if(this === button){
+                        currentIndex = i
+                    }
+                }
+            }
+        }
+        currentIndex = 0
+    }
+}

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -4,7 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
 
-Item {
+FluPage {
     property alias title: text_title.text
     default property alias content: container.data
     property int spacing : 0
@@ -12,8 +12,6 @@ Item {
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
-    property int pageMode: FluNavigationView.SingleTop
-    property string url: ''
     id:control
     FluText{
         id:text_title

src/imports/FluentUI/Controls/FluSlider.qml

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

src/imports/FluentUI/Controls/FluTabView.qml

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

src/imports/FluentUI/Controls/FluTableView.qml

@@ -2,295 +2,163 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import QtQuick.Layouts
+import Qt.labs.qmlmodels
 import FluentUI
 
-Item {
-    property var columns : []
-    property var dataSource : []
-    property int pageCurrent: 1
-    property int itemCount: 1000
-    property int pageCount: 10
-    property int itemHeight: 56
-    property bool pageVisible: true
-    signal requestPage(int page,int count)
+Rectangle {
+    property var columnSource
+    property var dataSource
     id:control
-    implicitHeight: layout_table.height
-    QtObject{
-        id:d
-        property int columnsWidth: layout_table.headerItem.columnsWidth()
-    }
-    MouseArea{
-        anchors.fill: parent
-        preventStealing: true
-    }
-    ListModel{
-        id:model_columns
-    }
-    ListModel{
-        id:model_data_source
-    }
-    onColumnsChanged: {
-        model_columns.clear()
-        model_columns.append(columns)
+    color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+    onColumnSourceChanged: {
+        if(columnSource.length!==0){
+            var com_column = Qt.createComponent("FluTableModelColumn.qml")
+            if (com_column.status === Component.Ready) {
+                var columns= []
+                columnSource.forEach(function(item){
+                    var column = com_column.createObject(table_model,{display:item.dataIndex});
+                    columns.push(column)
+                })
+                table_model.columns = columns
+            }
+        }
     }
     onDataSourceChanged: {
-        model_data_source.clear()
-        model_data_source.append(dataSource)
+        table_model.clear()
+        dataSource.forEach(function(item){
+            table_model.appendRow(item)
+        })
+    }
+    TableModel {
+        id:table_model
     }
-
     Component{
-        id:header_columns
-        FluRectangle{
-            id:layout_columns
-            height: control.itemHeight
-            width: parent.width
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            radius: [5,5,0,0]
-            function columnsWidth(){
-                var w = 0
-                for(var i=0;i<repeater_columns.count;i++){
-                    var item = repeater_columns.itemAt(i)
-                    w=w+item.width
-                }
-                return w
+        id:com_edit
+        FluTextBox {
+            anchors.fill: parent
+            text: display
+            verticalAlignment: TextInput.AlignVCenter
+            Component.onCompleted: selectAll()
+            TableView.onCommit: {
+                display = text
             }
-            function widthByColumnIndex(index){
-                return repeater_columns.itemAt(index).width
+        }
+    }
+    ScrollView{
+        id:scroll_table
+        anchors.left: header_vertical.right
+        anchors.top: header_horizontal.bottom
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+        TableView {
+            id:table_view
+            ListModel{
+                id:model_columns
             }
-            Row{
-                id:list_columns
-                spacing: 0
-                anchors.fill: parent
-                Repeater{
-                    id:repeater_columns
-                    model: model_columns
-                    delegate: Item{
-                        id:item_column
-                        property point clickPos: "0,0"
-                        height: list_columns.height
-                        width: model.width
-                        FluText{
-                            id:item_column_text
-                            text:model.title
-                            wrapMode: Text.WordWrap
-                            anchors{
-                                verticalCenter: parent.verticalCenter
-                                left: parent.left
-                                leftMargin: 14
-                            }
-                            font: FluTextStyle.BodyStrong
-                        }
-                        FluDivider{
-                            id:item_divider
-                            width: 1
-                            height: 40
-                            anchors.right: parent.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            visible: index !== model_columns.count-1
-                        }
-                        MouseArea{
-                            height: 40
-                            width: 6
-                            anchors.centerIn: item_divider
-                            visible: item_divider.visible
-                            cursorShape: Qt.SplitHCursor
-                            onPressed:
-                                (mouse)=>{
-                                    clickPos = Qt.point(mouse.x, mouse.y)
-                                }
-                            preventStealing: true
-                            onPositionChanged:
-                                (mouse)=>{
-                                    var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
-                                    var minimumWidth = item_column_text.implicitWidth+28
-                                    if(model.minimumWidth){
-                                        minimumWidth = model.minimumWidth
-                                    }
-                                    item_column.width = Math.max(item_column.width+delta.x,minimumWidth)
-                                }
-                        }
+            boundsBehavior: Flickable.StopAtBounds
+            ScrollBar.horizontal: FluScrollBar{}
+            ScrollBar.vertical: FluScrollBar{}
+            selectionModel: ItemSelectionModel {}
+            columnWidthProvider: function(column) {
+                let w = explicitColumnWidth(column)
+                if (w >= 0){
+                    var minimumWidth = columnSource[column].minimumWidth
+                    var maximumWidth = columnSource[column].maximumWidth
+                    if(!minimumWidth){
+                        minimumWidth = 100
                     }
+                    if(!maximumWidth){
+                        maximumWidth = 65535
+                    }
+
+                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
+                }
+                return implicitColumnWidth(column)
+            }
+            rowHeightProvider: function(row) {
+                let h = explicitRowHeight(row)
+                if (h >= 0){
+                    return Math.max(40, h)
+                }
+                return implicitRowHeight(row)
+            }
+            model: table_model
+            clip: true
+            delegate: Rectangle {
+                required property bool selected
+                required property bool current
+                color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
+                implicitHeight: 40
+                implicitWidth: columnSource[column].width
+                FluText {
+                    text: display
+                    anchors.fill: parent
+                    anchors.margins: 10
+                    elide: Text.ElideRight
+                    verticalAlignment: Text.AlignVCenter
+                }
+                TableView.editDelegate: {
+                    var obj =columnSource[column].editDelegate
+                    if(obj){
+                        return obj
+                    }
+                    return com_edit
                 }
             }
         }
     }
-
-    Flickable{
-        id:layout_flickable
-        height: layout_table.height
-        anchors{
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        contentWidth: layout_table.width
-        clip:true
-        ScrollBar.horizontal: FluScrollBar {
-        }
-        Rectangle{
-            anchors.fill: layout_table
-            radius: 5
-            color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-        }
-        ListView{
-            id:layout_table
-            height: contentHeight
-            width: Math.max(layout_flickable.width,d.columnsWidth)
-            clip:true
-            interactive: false
-            removeDisplaced: Transition {
-                NumberAnimation { properties: "x,y"; duration: 167 }
-            }
-            header: header_columns
-            footer: Item{
-                height: pageVisible ? 54 : 0
-                clip: true
-                width: layout_table.width
-                FluPagination{
-                    id:pagination
-                    height: 40
-                    pageCurrent: control.pageCurrent
-                    onPageCurrentChanged: control.pageCurrent = pageCurrent
-                    itemCount: control.itemCount
-                    pageCount: control.pageCount
-                    onRequestPage:
-                        (page,count)=> {
-                            control.requestPage(page,count)
-                        }
-                    anchors{
-                        top: parent.top
-                        right: parent.right
-                    }
-                    Connections{
-                        target: control
-                        function onPageCurrentChanged(){
-                            if (control.pageCurrent!==pagination.pageCurrent)
-                            {
-                                pagination.calcNewPage(control.pageCurrent)
-                            }
-                        }
-                    }
-                }
-            }
-            model:model_data_source
-            delegate: Control{
-                id:item_control
-                height: maxHeight()
-                width: layout_table.width
-                property var model_values : getObjectValues(index)
-                property var itemObject: getObject(index)
-                property var listModel: model
-                Rectangle{
-                    anchors.fill: parent
-                    color: {
-                        if(item_control.hovered){
-                            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-                        }
-                        return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
-                    }
-                }
-                FluDivider{
-                    id:item_divider
-                    width: parent.width
-                    height: 1
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-                }
-                Row{
-                    id: table_row
-                    spacing: 0
-                    anchors.fill: parent
-                    Repeater{
-                        id:repeater_rows
-                        model: model_values
-                        delegate:FluControl{
-                            id:item_row_control
-                            width: layout_table.headerItem.widthByColumnIndex(index)
-                            height: item_control.height
-                            focusPolicy:Qt.TabFocus
-                            background: Item{
-                                FluFocusRectangle{
-                                    visible: item_row_control.activeFocus
-                                    radius:8
-                                }
-                            }
-                            Loader{
-                                id:item_column_loader
-                                property var model : modelData
-                                property var dataModel : listModel
-                                property var dataObject : itemObject
-                                anchors.verticalCenter: parent.verticalCenter
-                                width: parent.width
-                                sourceComponent: {
-                                    if(model.itemData instanceof Component){
-                                        return model.itemData
-                                    }
-                                    return com_text
-                                }
-                            }
-                            function columnHeight(){
-                                return item_column_loader.item.height
-                            }
-                        }
-                    }
-                }
-                function maxHeight(){
-                    var h = 0
-                    for(var i=0;i<repeater_rows.count;i++){
-                        var item = repeater_rows.itemAt(i)
-                        h=Math.max(h,item.columnHeight())
-                    }
-                    return h
-                }
-            }
-        }
-    }
-
     Component{
-        id:com_text
-        Item{
-            height: table_value.implicitHeight + 20
-            FluCopyableText{
-                id:table_value
-                text:String(model.itemData)
-                width: Math.min(parent.width - 14,implicitWidth)
-                wrapMode: Text.WordWrap
-                anchors{
-                    verticalCenter: parent.verticalCenter
-                    left: parent.left
-                    leftMargin: 14
-                }
-                rightPadding: 14
-                MouseArea{
-                    id:item_mouse
-                    hoverEnabled: true
-                    anchors.fill: parent
-                    cursorShape: Qt.IBeamCursor
-                    acceptedButtons: Qt.NoButton
-                }
-                FluTooltip{
-                    visible: item_mouse.containsMouse
-                    text:parent.text
-                    delay: 1000
+        id:com_handle
+        FluControl {
+            width: 24
+            height: 24
+            background: Rectangle{
+                radius: 12
+                color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+            }
+            visible: SelectionRectangle.control.active
+            FluShadow{
+                radius: 12
+            }
+            Rectangle{
+                width: 24
+                height: 24
+                radius: 12
+                scale: pressed?4/10:hovered?6/10:5/10
+                color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+                anchors.centerIn: parent
+                Behavior on scale {
+                    NumberAnimation{
+                        duration: 167
+                    }
                 }
             }
         }
     }
-    function getObject(index){
-        return model_data_source.get(index)
+    SelectionRectangle {
+        target: table_view
+        bottomRightHandle:com_handle
+        topLeftHandle: com_handle
     }
-    function getObjectValues(index) {
-        var obj = model_data_source.get(index)
-        if(!obj)
-            return
-        var data = []
-        for(var i=0;i<model_columns.count;i++){
-            var item = model_columns.get(i)
-            data.push({itemData:obj[item.dataIndex],width:item.width})
-        }
-        return data;
+    FluHorizontalHeaderView {
+        id: header_horizontal
+        textRole: "title"
+        model: columnSource
+        anchors.left: scroll_table.left
+        anchors.top: parent.top
+        syncView: table_view
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
     }
-    function remove(index){
-        model_data_source.remove(index)
+    FluVerticalHeaderView {
+        id: header_vertical
+        boundsBehavior: Flickable.StopAtBounds
+        anchors.top: scroll_table.top
+        anchors.left: parent.left
+        syncView: table_view
+        clip: true
     }
 }
+

src/imports/FluentUI/Controls/FluTableView2.qml

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

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -15,7 +15,7 @@ TextField{
     width: 300
     enabled: !disabled
     color: {
-        if(disabled){
+        if(!enabled){
             return disableColor
         }
         return normalColor
@@ -24,7 +24,7 @@ TextField{
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: FluTheme.primaryColor.lightest
     placeholderTextColor: {
-        if(disabled){
+        if(!enabled){
             return placeholderDisableColor
         }
         if(focus){
@@ -73,6 +73,5 @@ TextField{
         id:menu
         inputItem: control
     }
-
 }
 

src/imports/FluentUI/Controls/FluTextBoxMenu.qml

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

src/imports/FluentUI/Controls/FluTextButton.qml

@@ -10,9 +10,13 @@ Button {
     property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.15) : Qt.lighter(normalColor,1.15)
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
     property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color backgroundHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+    property color backgroundPressedColor: FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
+    property color backgroundNormalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
+    property color backgroundDisableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property bool textBold: true
     property color textColor: {
-        if(disabled){
+        if(!enabled){
             return disableColor
         }
         if(pressed){
@@ -21,12 +25,25 @@ Button {
         return hovered ? hoverColor :normalColor
     }
     id: control
-    horizontalPadding:2
+    horizontalPadding:6
     enabled: !disabled
-    Keys.onSpacePressed: control.visualFocus&&clicked()
-    background: Item{
+    font:FluTextStyle.Body
+    background: Rectangle{
         implicitWidth: 28
         implicitHeight: 28
+        radius: 4
+        color: {
+            if(!enabled){
+                return backgroundDisableColor
+            }
+            if(pressed){
+                return backgroundPressedColor
+            }
+            if(hovered){
+                return backgroundHoverColor
+            }
+            return backgroundNormalColor
+        }
         FluFocusRectangle{
             visible: control.visualFocus
             radius:8
@@ -40,9 +57,9 @@ Button {
     contentItem: FluText {
         id:btn_text
         text: control.text
+        font: control.font
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-        font.bold: control.textBold
         color: control.textColor
     }
 }

src/imports/FluentUI/Controls/FluTimePicker.qml

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

src/imports/FluentUI/Controls/FluToggleButton.qml

@@ -51,7 +51,7 @@ Button {
             radius:8
         }
         color:{
-            if(disabled){
+            if(!enabled){
                 return disableColor
             }
             if(checked){
@@ -69,7 +69,7 @@ Button {
         color: {
             if(checked){
                 if(FluTheme.dark){
-                    if(disabled){
+                    if(!enabled){
                         return Qt.rgba(173/255,173/255,173/255,1)
                     }
                     return Qt.rgba(0,0,0,1)
@@ -78,7 +78,7 @@ Button {
                 }
             }else{
                 if(FluTheme.dark){
-                    if(disabled){
+                    if(!enabled){
                         return Qt.rgba(131/255,131/255,131/255,1)
                     }
                     if(!checked){
@@ -88,7 +88,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(!checked){

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -7,15 +7,19 @@ import FluentUI
 Button {
     property bool disabled: false
     property string contentDescription: ""
-    property color disableColor: checked ? FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(159/255,159/255,159/255,1) :FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color checkColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(240/255,240/255,240/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
     property color borderNormalColor: FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color borderCheckColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color borderDisableColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
+    property color borderDisableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(200/255,200/255,200/255,1)
     property color dotNormalColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
     property color dotCheckColor: FluTheme.dark ? Qt.rgba(0/255,0/255,0/255,1) : Qt.rgba(255/255,255/255,255/255,1)
+    property color dotDisableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(150/255,150/255,150/255,1)
+    property real textSpacing: 6
+    property bool textRight: true
+    property alias textColor: btn_text.textColor
     property var clickListener : function(){
         checked = !checked
     }
@@ -31,7 +35,8 @@ Button {
     onClicked: clickListener()
     contentItem: Item{}
     background : RowLayout{
-        spacing: 0
+        spacing: control.textSpacing
+        layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
         Rectangle {
             id:control_backgound
             width: 40
@@ -42,7 +47,7 @@ Button {
                 radius: 20
             }
             color: {
-                if(disabled){
+                if(!enabled){
                     return disableColor
                 }
                 if(checked){
@@ -55,7 +60,7 @@ Button {
             }
             border.width: 1
             border.color: {
-                if(disabled){
+                if(!enabled){
                     return borderDisableColor
                 }
                 if(checked){
@@ -73,9 +78,12 @@ Button {
                 }
                 height: 20
                 radius: 10
-                scale: hovered&!disabled ? 7/10 : 6/10
+                scale: hovered&enabled ? 7/10 : 6/10
                 anchors.verticalCenter: parent.verticalCenter
                 color: {
+                    if(!enabled){
+                        return dotDisableColor
+                    }
                     if(checked){
                         return dotCheckColor
                     }
@@ -92,28 +100,25 @@ Button {
                     NumberAnimation {
                         duration: 167
                         easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 1, 0, 0, 0 ]
+                        easing.bezierCurve: [ 0, 0, 0, 1 ]
                     }
                 }
                 Behavior on width {
                     NumberAnimation {
                         duration: 167
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 1, 0, 0, 0 ]
                     }
                 }
                 Behavior on scale {
                     NumberAnimation {
                         duration: 167
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 1, 0, 0, 0 ]
                     }
                 }
             }
         }
         FluText{
+            id:btn_text
             text: control.text
-            Layout.leftMargin: 5
+            Layout.alignment: Qt.AlignVCenter
             visible: text !== ""
         }
     }

src/imports/FluentUI/Controls/FluTooltip.qml

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

src/imports/FluentUI/designer/fluentui.metainfo

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