update framelesshelper

Add Svg module to resolve unsupported image format error.

CMakeLists.txt

@@ -4,6 +4,13 @@ project(FluentUI VERSION 0.1 LANGUAGES CXX)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
 option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
+option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
+
+#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
+set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
+if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
+    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
+endif()
 
 add_subdirectory(src)
 
@@ -12,11 +19,15 @@ if (FLUENTUI_BUILD_EXAMPLES)
 endif ()
 
 if (FLUENTUI_BUILD_FRAMELESSHEPLER)
-    add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
+    set(FRAMELESSHELPER_BUILD_STATIC ON)
-    add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
+    set(FRAMELESSHELPER_NO_SUMMARY OFF)
+    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT OFF)
+    set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
     add_subdirectory(framelesshelper)
 endif ()
 
 message("------------------------ FluentUI ------------------------")
 message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
 message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")
+message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
+message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")

example/CMakeLists.txt

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

example/qml/App.qml

@@ -5,14 +5,17 @@ import QtQuick.Layouts
 import FluentUI
 
 Window {
-    id:app
+    id: app
+    flags: Qt.SplashScreen
     Component.onCompleted: {
         FluApp.init(app)
         FluTheme.darkMode = FluDarkMode.System
+        FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
             "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"

example/qml/component/CodeExpander.qml

@@ -37,11 +37,6 @@ FluExpander{
             rightMargin: 5
             topMargin: 5
         }
-        onActiveFocusChanged: {
-            if(activeFocus){
-                control.expand = true
-            }
-        }
         onClicked:{
             FluTools.clipText(content.text)
             showSuccess("复制成功")
@@ -133,13 +128,12 @@ FluExpander{
                     "FluRemoteLoader",
                     "FluMenuBar",
                     "FluPagination",
-                    "FluRadioButtons"
+                    "FluRadioButtons",
+                    "FluImage",
+                    "FluSpinBox"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");
         return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
     }
-
-
-
 }

example/qml/global/ItemsOriginal.qml

@@ -54,6 +54,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Text.qml")
             }
         }
+        FluPaneItem{
+            title:"Image"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
+            }
+        }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
@@ -327,6 +333,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
             }
         }
+        FluPaneItem{
+            title:"HotLoader"
+            tapFunc:function(){
+                 FluApp.navigate("/hotload")
+            }
+        }
     }
 
     function getRecentlyAddedData(){

example/qml/page/T_Awesome.qml

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

example/qml/page/T_Buttons.qml

@@ -24,6 +24,7 @@ FluScrollablePage{
         FluTextButton{
             disabled:text_button_switch.checked
             text:"Text Button"
+            contentDescription: "文本按钮"
             onClicked: {
                 showInfo("点击Text Button")
             }
@@ -222,7 +223,7 @@ FluScrollablePage{
             FluMenuItem{
                 text:"Menu_4"
                 onClicked: {
-                    console.debug(parent.height)
+
                 }
             }
         }
@@ -240,20 +241,18 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluDropDownButton{
     text:"DropDownButton"
-    items:[
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_1"
-            text:"Menu_1"
+    },
-        },
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_2"
-            text:"Menu_2"
+    },
-        },
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_3"
-            text:"Menu_3"
+    },
-        },
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_4"
-            text:"Menu_4"
+    }
-        }
-    ]
 }'
     }
 

example/qml/page/T_ColorPicker.qml

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

example/qml/page/T_ComboBox.qml

@@ -46,6 +46,7 @@ FluScrollablePage{
             }
             FluComboBox {
                 editable: true
+                font:FluTextStyle.BodyStrong
                 model: ListModel {
                     id: model_2
                     ListElement { text: "Banana" }

example/qml/page/T_DatePicker.qml

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

example/qml/page/T_FlipView.qml

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

example/qml/page/T_Home.qml

@@ -7,7 +7,8 @@ import FluentUI
 
 FluScrollablePage{
 
-    pageMode: FluNavigationView.SingleTask
+    launchMode: FluPage.SingleTask
+    animDisabled: true
 
     ListModel{
         id:model_header

example/qml/page/T_Image.qml

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

example/qml/page/T_InfoBar.qml

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

example/qml/page/T_Pivot.qml

@@ -76,5 +76,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml/page/T_Progress.qml

@@ -12,32 +12,71 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 260
+        height: 110
         paddings: 10
+
         ColumnLayout{
-            spacing: 20
+            spacing: 10
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
+            FluText{
+                text: "indeterminate = true"
+            }
             FluProgressBar{
             }
             FluProgressRing{
             }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluProgressBar{
+
+}
+FluProgressRing{
+
+}
+'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 230
+        paddings: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: "indeterminate = false"
+            }
             FluProgressBar{
-                id:progress_bar
                 indeterminate: false
+                progress: slider.value/100
             }
             FluProgressRing{
-                id:progress_ring
                 indeterminate: false
+                progress: slider.value/100
+            }
+            FluProgressBar{
+                indeterminate: false
+                progressVisible: true
+                progress: slider.value/100
+            }
+            FluProgressRing{
+                indeterminate: false
+                progressVisible: true
+                progress: slider.value/100
             }
             FluSlider{
-                onValueChanged:{
+                id:slider
-                    var progress = value/100
-                    progress_bar.progress = progress
-                    progress_ring.progress = progress
-                }
                 Component.onCompleted: {
                     value = 50
                 }
@@ -48,22 +87,14 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluProgressBar{
-
-}
-
-FluProgressRing{
-
-}
-
-FluProgressBar{
     indeterminate: false
 }
-
 FluProgressRing{
     indeterminate: false
-}'
+    progressVisible: true
+}
+'
     }
 
 
-
 }

example/qml/page/T_Rectangle.qml

@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 480
+        height: 460
         paddings: 10
 
         Column{

example/qml/page/T_RemoteLoader.qml

@@ -5,8 +5,10 @@ import QtQuick.Controls
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluRemoteLoader{
+FluPage{
-    property int pageMode: FluNavigationView.SingleTop
+    launchMode: FluPage.SingleTop
-    property string url: ''
+    FluRemoteLoader{
-    source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+        anchors.fill: parent
+        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+    }
 }

example/qml/page/T_TableView.qml

@@ -10,7 +10,29 @@ FluContentPage{
     title:"TableView"
 
     Component.onCompleted: {
-        loadData(1,2000)
+        loadData(1,1000)
+    }
+
+    Component{
+        id:com_action
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluButton{
+                    text:"删除"
+                    onClicked: {
+                        table_view.closeEditor()
+                        tableModel.removeRow(row)
+                    }
+                }
+                FluFilledButton{
+                    text:"编辑"
+                    onClicked: {
+                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                    }
+                }
+            }
+        }
     }
 
     function loadData(page,count){
@@ -40,7 +62,12 @@ FluContentPage{
                                 name: getRandomName(),
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
-                                nickname: getRandomNickname()
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                height:42,
+                                minimumHeight:42,
+                                maximumHeight:300,
+                                action:com_action
                             })
         }
         table_view.dataSource = dataSource
@@ -48,9 +75,9 @@ FluContentPage{
 
     Component{
         id:com_combobox
-
         FluComboBox {
             anchors.fill: parent
+            focus: true
             currentIndex: display
             editable: true
             model: ListModel {
@@ -63,23 +90,30 @@ FluContentPage{
                 currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
                 selectAll()
             }
-            TableView.onCommit: {
+            onCommit: {
                 display = editText
+                tableView.closeEditor()
             }
         }
     }
 
     FluTableView{
         id:table_view
-        anchors.fill: parent
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: gagination.top
+        }
         anchors.topMargin: 20
         columnSource:[
             {
                 title: '姓名',
                 dataIndex: 'name',
                 width:100,
-                minimumWidth:50
+                minimumWidth:80,
-
+                maximumWidth:200,
+                readOnly:true
             },
             {
                 title: '年龄',
@@ -87,19 +121,57 @@ FluContentPage{
                 editDelegate:com_combobox,
                 width:100,
                 minimumWidth:100,
-                maximumWidth: 100
+                maximumWidth:100
             },
             {
                 title: '住址',
                 dataIndex: 'address',
-                width:200
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
             },
             {
                 title: '别名',
                 dataIndex: 'nickname',
                 width:100,
-
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: '长字符串',
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
+            {
+                title: '操作',
+                dataIndex: 'action',
+                width:160,
+                minimumWidth:160,
+                maximumWidth:160
             }
         ]
     }
+
+    FluPagination{
+        id:gagination
+        anchors{
+            bottom: parent.bottom
+            left: parent.left
+        }
+        pageCurrent: 1
+        itemCount: 100000
+        pageButtonCount: 7
+        __itemPerPage: 1000
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+
+
 }

example/qml/page/T_TextBox.qml

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

example/qml/page/T_Theme.qml

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

example/qml/page/T_TimePicker.qml

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

example/qml/window/HotloadWindow.qml

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

example/qml/window/MainWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
+import example
 import "qrc:///example/qml/component"
 import "qrc:///example/qml/global"
 
@@ -15,15 +16,19 @@ CustomWindow {
     height: 640
     closeDestory:false
     minimumWidth: 520
-    minimumHeight: 460
+    minimumHeight: 200
     appBarVisible: false
     launchMode: FluWindow.SingleTask
 
     closeFunc:function(event){
-        close_app.open()
+        dialog_close.open()
         event.accepted = false
     }
 
+    Component.onCompleted: {
+        FluTools.setQuitOnLastWindowClosed(false)
+    }
+
     Connections{
         target: appInfo
         function onActiveWindow(){
@@ -58,7 +63,7 @@ CustomWindow {
     }
 
     FluContentDialog{
-        id:close_app
+        id:dialog_close
         title:"退出"
         message:"确定要退出程序吗？"
         negativeText:"最小化"
@@ -94,7 +99,7 @@ CustomWindow {
             when: flipable.flipped
         }
         transitions: Transition {
-            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
         }
         back: Item{
             anchors.fill: flipable
@@ -112,6 +117,12 @@ CustomWindow {
             }
             Row{
                 z:8
+                anchors{
+                    top: parent.top
+                    left: parent.left
+                    topMargin: FluTools.isMacos() ? 20 : 5
+                    leftMargin: 5
+                }
                 FluIconButton{
                     iconSource: FluentIcons.ChromeBack
                     width: 30
@@ -134,6 +145,7 @@ CustomWindow {
 
             FluRemoteLoader{
                 id:loader
+                lazy: true
                 anchors.fill: parent
                 //                source: "http://localhost:9000/RemoteComponent.qml"
                 source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
@@ -160,19 +172,17 @@ CustomWindow {
                 width: parent.width
                 height: parent.height
                 z:999
+                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
+                //                 pageMode: FluNavigationView.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+//                pageMode: FluNavigationView.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
                 topPadding:FluTools.isMacos() ? 20 : 5
                 displayMode:MainEvent.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
-                Behavior on rotation {
+                onLogoClicked:{
-                    NumberAnimation{
-                        duration: 167
-                    }
-                }
-                transformOrigin: Item.Center
-                onLoginClicked:{
                     clickCount += 1
                     if(clickCount === 1){
                         loader.reload()
@@ -200,54 +210,12 @@ CustomWindow {
         }
     }
 
-    Image{
+    CircularReveal{
-        id:img_cache
+        id:reveal
-        visible: false
+        target:window.contentItem
         anchors.fill: parent
-    }
+        onImageChanged: {
-
+            changeDark()
-    Canvas{
-        id:canvas
-        anchors.fill: parent
-        property int centerX: canvas.width / 2
-        property int centerY: canvas.height / 2
-        property real radius: 0
-        property int maxRadius: 0
-        property url imageUrl
-        Behavior on radius{
-            id:anim_radius
-            NumberAnimation {
-                target: canvas
-                property: "radius"
-                duration: 333
-                easing.type: Easing.OutCubic
-            }
-        }
-        onRadiusChanged: {
-            canvas.requestPaint()
-        }
-        onPaint: {
-            var ctx = canvas.getContext("2d");
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
-            ctx.save()
-            if(img_cache.source.toString().length!==0){
-                try{
-                    ctx.drawImage(img_cache, 0, 0,  canvasSize.width, canvasSize.height, 0, 0,  canvasSize.width, canvasSize.height)
-                }catch(e){
-                    img_cache.source = ""
-                }
-            }
-            clearArc(ctx, centerX, centerY, radius)
-            ctx.restore()
-        }
-        function clearArc(ctx,x, y, radius, startAngle, endAngle) {
-            ctx.beginPath()
-            ctx.globalCompositeOperation = 'destination-out'
-            ctx.fillStyle = 'black'
-            ctx.arc(x, y, radius, 0, 2*Math.PI);
-            ctx.fill();
-            ctx.closePath();
         }
     }
 
@@ -256,32 +224,23 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        var changeDark = function(){
+        if(FluTools.isMacos() || !FluTheme.enableAnimation){
-            if(FluTheme.dark){
+            changeDark()
-                FluTheme.darkMode = FluDarkMode.Light
+        }else{
-            }else{
-                FluTheme.darkMode = FluDarkMode.Dark
-            }
-        }
-        if(FluTools.isWin()){
             var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y
-            canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
-            target.grabToImage(function(result) {
+            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
-                img_cache.source = result.url
+        }
-                canvas.requestPaint()
+    }
-                changeDark()
+
-                canvas.centerX = mouseX
+    function changeDark(){
-                canvas.centerY = mouseY
+        if(FluTheme.dark){
-                anim_radius.enabled = false
+            FluTheme.darkMode = FluDarkMode.Light
-                canvas.radius = 0
-                anim_radius.enabled = true
-                canvas.radius = canvas.maxRadius
-            },canvas.canvasSize)
         }else{
-            changeDark()
+            FluTheme.darkMode = FluDarkMode.Dark
         }
     }
 

example/src/component/CircularReveal.cpp

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

example/src/component/CircularReveal.h

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

example/src/component/FileWatcher.cpp

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

example/src/component/FileWatcher.h

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

example/src/main.cpp

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

src/CMakeLists.txt

@@ -1,22 +1,28 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(fluentuiplugin LANGUAGES CXX)
+if (FLUENTUI_BUILD_STATIC_LIB)
-
+    project(fluentui LANGUAGES CXX)
+else()
+    project(fluentuiplugin LANGUAGES CXX)
+endif()
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
-#设置QML插件输出目录->D:\Qt\6.4.3\msvc2019_64\qml\FluentUI
-set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
-
 #设置版本号
-add_definitions(-DVERSION=1,3,6,0)
+add_definitions(-DVERSION=1,3,7,4)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
-qt_standard_project_setup()
+
+if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
+    qt_standard_project_setup()
+else()
+    set(CMAKE_AUTOMOC ON)
+    set(CMAKE_AUTORCC ON)
+    set(CMAKE_AUTOUIC ON)
+endif()
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -33,7 +39,7 @@ foreach(filepath ${QML_PATHS})
 endforeach(filepath)
 
 #遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
+file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
 foreach(filepath ${RES_PATHS})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND resource_files ${filename})
@@ -46,26 +52,44 @@ foreach(filepath IN LISTS qml_files resource_files)
 endforeach()
 
 #添加qml模块
-qt_add_library(fluentuiplugin SHARED)
+if (FLUENTUI_BUILD_STATIC_LIB)
-qt_add_qml_module(fluentuiplugin
+    set(LIB_TYPE "STATIC")
-    #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
+else()
-    PLUGIN_TARGET fluentuiplugin
+    set(LIB_TYPE "SHARED")
-    OUTPUT_DIRECTORY ${QML_PLUGIN_DIRECTORY}
+endif()
-    VERSION 1.0
+qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
-    URI "FluentUI"
+if (FLUENTUI_BUILD_STATIC_LIB)
-    #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
+    qt_add_qml_module(${PROJECT_NAME}
-    TYPEINFO "plugins.qmltypes"
+        #在静态库编译中使用PLUGIN_TARGET会导致链接失败
-    SOURCES ${sources_files} fluentui.rc
+        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
-    QML_FILES ${qml_files}
+        VERSION 1.0
-    RESOURCES ${resource_files}
+        URI "FluentUI"
-)
+        TYPEINFO "plugins.qmltypes"
+        SOURCES ${sources_files} fluentui.rc
+        QML_FILES ${qml_files}
+        RESOURCES ${resource_files}
+    )
+else()
+    qt_add_qml_module(${PROJECT_NAME}
+        #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
+        PLUGIN_TARGET fluentuiplugin
+        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
+        VERSION 1.0
+        URI "FluentUI"
+        #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
+        TYPEINFO "plugins.qmltypes"
+        SOURCES ${sources_files} fluentui.rc
+        QML_FILES ${qml_files}
+        RESOURCES ${resource_files}
+    )
+endif()
 
 #链接库
-target_link_libraries(fluentuiplugin PUBLIC
+target_link_libraries(${PROJECT_NAME} PUBLIC
-    Qt::Core
+    Qt::CorePrivate
-    Qt::Quick
+    Qt::QuickPrivate
-    Qt::Qml
+    Qt::QmlPrivate
 )
 
 #安装
-install(DIRECTORY ${QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)
+install(DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY} DESTINATION ${CMAKE_INSTALL_PREFIX}/imports)

src/Def.h

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

src/FluApp.cpp

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

src/FluApp.h

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

src/FluTextStyle.cpp

@@ -12,7 +12,7 @@ FluTextStyle::FluTextStyle(QObject *parent)
     Body(body);
 
     QFont bodyStrong;
-    bodyStrong.setPixelSize(14);
+    bodyStrong.setPixelSize(13);
     bodyStrong.setBold(true);
     BodyStrong(bodyStrong);
 

src/FluTheme.cpp

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

src/FluTheme.h

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

src/FluTools.cpp

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

src/FluTools.h

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

src/WindowHelper.cpp

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

src/WindowHelper.h

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

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -19,6 +19,9 @@ Rectangle{
     property color closeNormalColor: Qt.rgba(0,0,0,0)
     property color closeHoverColor:  Qt.rgba(251/255,115/255,115/255,1)
     property bool showDark: false
+    property bool showClose: true
+    property bool showMinimize: true
+    property bool showMaximize: true
     property bool titleVisible: true
     property bool isMac: FluTools.isMacos()
     property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
@@ -96,7 +99,7 @@ Rectangle{
             iconSize: 11
             text:minimizeText
             radius: 0
-            visible: !isMac
+            visible: !isMac && showMinimize
             iconColor: root.textColor
             color: hovered ? minimizeHoverColor : minimizeNormalColor
             onClicked: minClickListener()
@@ -108,7 +111,7 @@ Rectangle{
             iconSource : d.isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
             color: hovered ? maximizeHoverColor : maximizeNormalColor
             Layout.alignment: Qt.AlignVCenter
-            visible: d.resizable && !isMac
+            visible: d.resizable && !isMac && showMaximize
             radius: 0
             iconColor: root.textColor
             text:d.isRestore?restoreText:maximizeText
@@ -122,7 +125,7 @@ Rectangle{
             text:closeText
             width: 40
             height: 30
-            visible: !isMac
+            visible: !isMac && showClose
             radius: 0
             iconSize: 10
             iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor

src/imports/FluentUI/Controls/FluAutoSuggestBox.qml

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

src/imports/FluentUI/Controls/FluBreadcrumbBar.qml

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

src/imports/FluentUI/Controls/FluCalendarPicker.qml

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

src/imports/FluentUI/Controls/FluCalendarView.qml

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

src/imports/FluentUI/Controls/FluCheckBox.qml

@@ -87,6 +87,7 @@ Button {
                 return normalColor
             }
             Behavior on color {
+                enabled: FluTheme.enableAnimation
                 ColorAnimation{
                     duration: 83
                 }
@@ -98,6 +99,7 @@ Button {
                 visible: checked
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
+                    enabled: FluTheme.enableAnimation
                     NumberAnimation{
                         duration: 83
                     }

src/imports/FluentUI/Controls/FluColorPicker.qml

@@ -50,7 +50,7 @@ Button{
                 property: "opacity"
                 from:0
                 to:1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
 
@@ -59,7 +59,7 @@ Button{
                 property: "opacity"
                 from:1
                 to:0
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         function showPopup() {

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -6,6 +6,7 @@ import QtQuick.Templates as T
 
 ComboBox {
     id: control
+    signal commit
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
@@ -15,7 +16,7 @@ ComboBox {
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding,
                              implicitIndicatorHeight + topPadding + bottomPadding)
-
+    font: FluTextStyle.Body
     leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
     rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
     enabled: !disabled
@@ -23,6 +24,7 @@ ComboBox {
         width: ListView.view.width
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
         palette.text: control.palette.text
+        font: control.font
         palette.highlightedText: control.palette.highlightedText
         highlighted: control.highlightedIndex === index
         hoverEnabled: control.hoverEnabled
@@ -38,16 +40,17 @@ ComboBox {
     }
     contentItem: T.TextField {
         property bool disabled: !control.editable
-        leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
+        leftPadding: !control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1
-        rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
+        rightPadding: control.mirrored ? 10 : control.editable && activeFocus ? 3 : 1
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTheme.primaryColor.lightest
+        selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+        selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
         autoScroll: control.editable
-        font:FluTextStyle.Body
+        font:control.font
         readOnly: control.down
         color: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
         inputMethodHints: control.inputMethodHints
@@ -57,17 +60,24 @@ ComboBox {
         leftInset:1
         topInset:1
         bottomInset:1
-        focus: true
         rightInset:1
         background: FluTextBoxBackground{
             border.width: 0
             inputItem: contentItem
         }
+        Component.onCompleted: {
+            forceActiveFocus()
+        }
+        Keys.onEnterPressed: (event)=> handleCommit(event)
+        Keys.onReturnPressed:(event)=> handleCommit(event)
+        function handleCommit(event){
+            control.commit()
+        }
     }
 
     background: Rectangle {
         implicitWidth: 140
-        implicitHeight: 28
+        implicitHeight: 32
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         visible: !control.flat || control.down
@@ -104,7 +114,7 @@ ComboBox {
                 property: "opacity"
                 from:0
                 to:1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         exit:Transition {
@@ -112,7 +122,7 @@ ComboBox {
                 property: "opacity"
                 from:1
                 to:0
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         background:Rectangle{

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -11,6 +11,7 @@ FluPopup {
     property string neutralText: "Neutral"
     property string negativeText: "Negative"
     property string positiveText: "Positive"
+    property int delayTime: 100
     signal neutralClicked
     signal negativeClicked
     signal positiveClicked
@@ -88,7 +89,8 @@ FluPopup {
                     text: neutralText
                     onClicked: {
                         popup.close()
-                        neutralClicked()
+                        timer_delay.targetFlags = FluContentDialog.NeutralButton
+                        timer_delay.restart()
                     }
                 }
                 FluButton{
@@ -99,7 +101,8 @@ FluPopup {
                     text: negativeText
                     onClicked: {
                         popup.close()
-                        negativeClicked()
+                        timer_delay.targetFlags = FluContentDialog.NegativeButton
+                        timer_delay.restart()
                     }
                 }
                 FluFilledButton{
@@ -110,10 +113,27 @@ FluPopup {
                     text: positiveText
                     onClicked: {
                         popup.close()
-                        positiveClicked()
+                        timer_delay.targetFlags = FluContentDialog.PositiveButton
+                        timer_delay.restart()
                     }
                 }
             }
         }
     }
+    Timer{
+        property int targetFlags
+        id:timer_delay
+        interval: popup.delayTime
+        onTriggered: {
+            if(targetFlags === FluContentDialog.NegativeButton){
+                negativeClicked()
+            }
+            if(targetFlags === FluContentDialog.NeutralButton){
+                neutralClicked()
+            }
+            if(targetFlags === FluContentDialog.PositiveButton){
+                positiveClicked()
+            }
+        }
+    }
 }

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -14,15 +14,19 @@ TextEdit {
     leftPadding: 0
     rightPadding: 0
     topPadding: 0
+    selectByMouse: true
+    selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()
     }
-    TapHandler {
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{
         id:menu

src/imports/FluentUI/Controls/FluDatePicker.qml

@@ -8,11 +8,9 @@ Rectangle {
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property var window : Window.window
     property bool showYear: true
-    property bool changeFlag: true
+    property var current
-    readonly property var rowData: ["","",""]
+    id:control
-    id:root
     color: {
         if(mouse_area.containsMouse){
             return hoverColor
@@ -24,6 +22,13 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
+    Item{
+        id:d
+        property var window: Window.window
+        property bool changeFlag: true
+        property var rowData: ["","",""]
+        visible: false
+    }
     MouseArea{
         id:mouse_area
         hoverEnabled: true
@@ -96,7 +101,7 @@ Rectangle {
                 property: "opacity"
                 from:0
                 to:1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         exit:Transition {
@@ -104,7 +109,7 @@ Rectangle {
                 property: "opacity"
                 from:1
                 to:0
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         background:Item{
@@ -317,8 +322,19 @@ Rectangle {
                         }
                         text: "确定"
                         onClicked: {
-                            changeFlag = false
+                            d.changeFlag = false
                             popup.close()
+                            const year = text_year.text
+                            const month = text_month.text
+                            const day = text_day.text
+                            const date = new Date()
+                            date.setFullYear(parseInt(year));
+                            date.setMonth(parseInt(month) - 1);
+                            date.setDate(parseInt(day));
+                            date.setHours(0);
+                            date.setMinutes(0);
+                            date.setSeconds(0);
+                            current = date
                         }
                     }
                 }
@@ -326,10 +342,10 @@ Rectangle {
         }
         y:35
         function showPopup() {
-            changeFlag = true
+            d.changeFlag = true
-            rowData[0] = text_year.text
+            d.rowData[0] = text_year.text
-            rowData[1] = text_month.text
+            d.rowData[1] = text_month.text
-            rowData[2] = text_day.text
+            d.rowData[2] = text_day.text
             const now = new Date();
             var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text);
             var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text);
@@ -342,21 +358,21 @@ Rectangle {
             list_view_3.model = generateMonthDaysArray(year,month)
             list_view_3.currentIndex = list_view_3.model.indexOf(day)
             text_day.text = day
-            var pos = root.mapToItem(null, 0, 0)
+            var pos = control.mapToItem(null, 0, 0)
-            if(window.height>pos.y+root.height+container.height){
+            if(d.window.height>pos.y+control.height+container.height){
-                popup.y = root.height
+                popup.y = control.height
             } else if(pos.y>container.height){
                 popup.y = -container.height
             } else {
-                popup.y = window.height-(pos.y+container.height)
+                popup.y = d.window.height-(pos.y+container.height)
             }
             popup.open()
         }
         onClosed: {
-            if(changeFlag){
+            if(d.changeFlag){
-                text_year.text = rowData[0]
+                text_year.text = d.rowData[0]
-                text_month.text = rowData[1]
+                text_month.text = d.rowData[1]
-                text_day.text = rowData[2]
+                text_day.text = d.rowData[2]
             }
         }
     }

src/imports/FluentUI/Controls/FluDivider.qml

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

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -75,7 +75,7 @@ Button {
         color: control.textColor
     }
     onClicked: {
-        if(items && menu.count !==0){
+        if(menu.count !==0){
             var pos = control.mapToItem(null, 0, 0)
             var containerHeight = menu.count*36
             if(window.height>pos.y+control.height+containerHeight){

src/imports/FluentUI/Controls/FluExpander.qml

@@ -9,10 +9,8 @@ Item {
     property int contentHeight : 300
     default property alias content: container.data
     id:control
-    height: layout_header.height + container.height
+    implicitHeight: Math.max((layout_header.height + container.height),layout_header.height)
-    width: 400
+    implicitWidth: 400
-    implicitWidth: width
-    implicitHeight: height
     Rectangle{
         id:layout_header
         width: parent.width
@@ -56,31 +54,69 @@ Item {
                 iconSource:FluentIcons.ChevronUp
                 iconSize: 15
                 Behavior on rotation {
+                    enabled: FluTheme.enableAnimation
                     NumberAnimation{
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
         }
     }
-    Rectangle{
+    Item{
-        id:container
-        width: parent.width
-        clip: true
         anchors{
             top: layout_header.bottom
             topMargin: -1
             left: layout_header.left
         }
-        radius: 4
+        width: parent.width
-        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        clip: true
-        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        visible: contentHeight+container.y !== 0
-        height: expand ? contentHeight : 0
+        height: contentHeight+container.y
-        Behavior on height {
+        Rectangle{
-            NumberAnimation{
+            id:container
-                duration: 167
+            width: parent.width
-                easing.type: Easing.InCubic
+            height: parent.height
-            }
+            radius: 4
+            color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            y: -contentHeight
+            states: [
+                State{
+                    name:"expand"
+                    when: control.expand
+                    PropertyChanges {
+                        target: container
+                        y:0
+                    }
+                },
+                State{
+                    name:"collapsed"
+                    when: !control.expand
+                    PropertyChanges {
+                        target: container
+                        y:-contentHeight
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    to:"expand"
+                    NumberAnimation {
+                        properties: "y"
+                        duration: FluTheme.enableAnimation ? 167 : 0
+                        easing.type: Easing.OutCubic
+                    }
+                },
+                Transition {
+                    to:"collapsed"
+                    NumberAnimation {
+                        properties: "y"
+                        duration: FluTheme.enableAnimation ? 167 : 0
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            ]
         }
     }
 }

src/imports/FluentUI/Controls/FluImage.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Image {
+    property string errorButtonText: "重新加载"
+    property var clickErrorListener : function(){
+        image.source = ""
+        image.source = control.source
+    }
+    property Component errorItem : com_error
+    property Component loadingItem: com_loading
+    id: control
+    Loader{
+        anchors.fill: parent
+        sourceComponent: {
+            if(control.status === Image.Loading){
+                return com_loading
+            }else if(control.status == Image.Error){
+                return com_error
+            }else{
+                return undefined
+            }
+        }
+    }
+    Component{
+        id:com_loading
+        Rectangle{
+            color: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+            FluProgressRing{
+                anchors.centerIn: parent
+                visible: control.status === Image.Loading
+            }
+        }
+    }
+    Component{
+        id:com_error
+        Rectangle{
+            color: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+            FluFilledButton{
+                text: control.errorButtonText
+                anchors.centerIn: parent
+                visible: control.status === Image.Error
+                onClicked: clickErrorListener()
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluInfoBar.qml

@@ -49,7 +49,11 @@ FluObject {
                 spacing: 20
                 width: parent.width
                 move: Transition {
-                    NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
+                    NumberAnimation {
+                        properties: "y"
+                        easing.type: Easing.OutCubic
+                        duration: FluTheme.enableAnimation ? 333 : 0
+                    }
                 }
                 onChildrenChanged: if(children.length === 0)  destroy();
                 function getLastloader(){
@@ -89,9 +93,10 @@ FluObject {
                     scale: item ? 1 : 0;
                     asynchronous: true
                     Behavior on scale {
+                        enabled: FluTheme.enableAnimation
                         NumberAnimation {
-                            easing.type: Easing.OutBack;
+                            easing.type: Easing.OutCubic
-                            duration: 100
+                            duration: 167
                         }
                     }
                     sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;

src/imports/FluentUI/Controls/FluItem.qml

@@ -31,7 +31,6 @@ Item{
             var y = 0;
             var w = control.width;
             var h = control.height;
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.save();
             ctx.beginPath();

src/imports/FluentUI/Controls/FluMenu.qml

@@ -5,7 +5,7 @@ import QtQuick.Templates as T
 import FluentUI
 
 T.Menu {
-    property bool animEnabled: true
+    property bool enableAnimation: true
     id: control
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             contentWidth + leftPadding + rightPadding)
@@ -20,7 +20,7 @@ T.Menu {
             property: "opacity"
             from:0
             to:1
-            duration: animEnabled ? 83 : 0
+            duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
         }
     }
     exit:Transition {
@@ -28,7 +28,7 @@ T.Menu {
             property: "opacity"
             from:1
             to:0
-            duration: animEnabled ? 83 : 0
+            duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0
         }
     }
     contentItem: ListView {

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextArea{
+    signal commit
     property bool disabled: false
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
@@ -21,8 +22,11 @@ TextArea{
     }
     font:FluTextStyle.Body
     wrapMode: Text.WrapAnywhere
+    padding: 8
+    leftPadding: padding+2
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectedTextColor: color
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -34,9 +38,23 @@ TextArea{
     }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
-    TapHandler {
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            if(event.modifiers & Qt.ControlModifier){
+                insert(control.cursorPosition, "\n")
+                return
+            }
+            control.commit()
+        }
+    }
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
         acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
     }
     FluTextBoxMenu{
         id:menu

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -12,28 +12,27 @@ Item {
         Minimal = 2,
         Auto = 3
     }
-    enum PageModeFlag{
+    enum PageMode {
-        Standard = 0,
+        Stack = 0,
-        SingleTask = 1,
+        NoStack = 1
-        SingleTop = 2,
-        SingleInstance = 3
     }
     property url logo
     property string title: ""
     property FluObject items
     property FluObject footerItems
-    property bool dontPageAnimation: false
     property int displayMode: FluNavigationView.Auto
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
-    signal loginClicked
+    property int navWidth: 300
+    property int pageMode: FluNavigationView.Stack
+    signal logoClicked
     id:control
     QtObject{
         id:d
-        property var pageMap: ({})
+        property bool animDisabled:false
         property var stackItems: []
-        property int displayMode: FluNavigationView.Open
+        property int displayMode: control.displayMode
         property bool enableNavigationPanel: false
         property bool isCompact: d.displayMode === FluNavigationView.Compact
         property bool isMinimal: d.displayMode === FluNavigationView.Minimal
@@ -44,21 +43,21 @@ Item {
             collapseAll()
         }
         function handleItems(){
-            var idx = 0
+            var _idx = 0
             var data = []
             if(items){
                 for(var i=0;i<items.children.length;i++){
                     var item = items.children[i]
-                    item.idx = idx
+                    item._idx = _idx
                     data.push(item)
-                    idx++
+                    _idx++
                     if(item instanceof FluPaneItemExpander){
                         for(var j=0;j<item.children.length;j++){
                             var itemChild = item.children[j]
                             itemChild.parent = item
-                            itemChild.idx = idx
+                            itemChild._idx = _idx
                             data.push(itemChild)
-                            idx++
+                            _idx++
                         }
                     }
                 }
@@ -67,10 +66,10 @@ Item {
                     for(var k=0;k<footerItems.children.length;k++){
                         var itemFooter = footerItems.children[k]
                         if (comEmpty.status === Component.Ready) {
-                            var objEmpty = comEmpty.createObject(items,{idx:idx});
+                            var objEmpty = comEmpty.createObject(items,{_idx:_idx});
-                            itemFooter.idx = idx;
+                            itemFooter._idx = _idx;
                             data.push(objEmpty)
-                            idx++
+                            _idx++
                         }
                     }
                 }
@@ -91,6 +90,14 @@ Item {
                 return FluNavigationView.Open
             }
         })
+        timer_anim_delay.restart()
+    }
+    Timer{
+        id:timer_anim_delay
+        interval: 200
+        onTriggered: {
+            d.animDisabled = true
+        }
     }
     Connections{
         target: d
@@ -119,12 +126,6 @@ Item {
                 }
                 return 1
             }
-            Behavior on height {
-                NumberAnimation{
-                    duration: 167
-                    easing.type: Easing.InCubic
-                }
-            }
         }
     }
     Component{
@@ -137,9 +138,9 @@ Item {
                 return 30
             }
             Behavior on height {
+                enabled: FluTheme.enableAnimation && d.animDisabled
                 NumberAnimation{
-                    duration: 167
+                    duration: 83
-                    easing.type: Easing.InCubic
                 }
             }
             width: layout_list.width
@@ -204,7 +205,6 @@ Item {
                         return false
                     }
                 }
-
                 Rectangle{
                     radius: 4
                     anchors.fill: parent
@@ -216,7 +216,7 @@ Item {
                         visible: {
                             for(var i=0;i<model.children.length;i++){
                                 var item = model.children[i]
-                                if(item.idx === nav_list.currentIndex && !model.isExpand){
+                                if(item._idx === nav_list.currentIndex && !model.isExpand){
                                     return true
                                 }
                             }
@@ -226,7 +226,6 @@ Item {
                             verticalCenter: parent.verticalCenter
                         }
                     }
-
                     FluIcon{
                         id:item_icon_expand
                         rotation: model.isExpand?0:180
@@ -244,14 +243,16 @@ Item {
                             return true
                         }
                         Behavior on rotation {
+                            enabled: FluTheme.enableAnimation && d.animDisabled
                             NumberAnimation{
-                                duration: 83
+                                duration: 167
+                                easing.type: Easing.OutCubic
                             }
                         }
                     }
                     color: {
                         if(FluTheme.dark){
-                            if((nav_list.currentIndex === idx)&&type===0){
+                            if((nav_list.currentIndex === _idx)&&type===0){
                                 return Qt.rgba(1,1,1,0.06)
                             }
                             if(item_control.hovered){
@@ -259,7 +260,7 @@ Item {
                             }
                             return Qt.rgba(0,0,0,0)
                         }else{
-                            if(nav_list.currentIndex === idx&&type===0){
+                            if(nav_list.currentIndex === _idx&&type===0){
                                 return Qt.rgba(0,0,0,0.06)
                             }
                             if(item_control.hovered){
@@ -329,9 +330,9 @@ Item {
         id:com_panel_item
         Item{
             Behavior on height {
+                enabled: FluTheme.enableAnimation && d.animDisabled
                 NumberAnimation{
-                    duration: 167
+                    duration: 83
-                    easing.type: Easing.InCubic
                 }
             }
             clip: true
@@ -365,7 +366,7 @@ Item {
                         if(model.tapFunc){
                             model.tapFunc()
                         }else{
-                            nav_list.currentIndex = idx
+                            nav_list.currentIndex = _idx
                             layout_footer.currentIndex = -1
                             model.tap()
                             if(d.isMinimal || d.isCompact){
@@ -376,8 +377,8 @@ Item {
                         if(model.tapFunc){
                             model.tapFunc()
                         }else{
-                            nav_list.currentIndex = nav_list.count-layout_footer.count+idx
+                            nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
-                            layout_footer.currentIndex = idx
+                            layout_footer.currentIndex = _idx
                             model.tap()
                             if(d.isMinimal || d.isCompact){
                                 d.enableNavigationPanel = false
@@ -391,11 +392,11 @@ Item {
                     color: {
                         if(FluTheme.dark){
                             if(type===0){
-                                if(nav_list.currentIndex === idx){
+                                if(nav_list.currentIndex === _idx){
                                     return Qt.rgba(1,1,1,0.06)
                                 }
                             }else{
-                                if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
+                                if(nav_list.currentIndex === (nav_list.count-layout_footer.count+_idx)){
                                     return Qt.rgba(1,1,1,0.06)
                                 }
                             }
@@ -405,11 +406,11 @@ Item {
                             return Qt.rgba(0,0,0,0)
                         }else{
                             if(type===0){
-                                if(nav_list.currentIndex === idx){
+                                if(nav_list.currentIndex === _idx){
                                     return Qt.rgba(0,0,0,0.06)
                                 }
                             }else{
-                                if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
+                                if(nav_list.currentIndex === (nav_list.count-layout_footer.count+_idx)){
                                     return Qt.rgba(0,0,0,0.06)
                                 }
                             }
@@ -519,31 +520,39 @@ Item {
                 Layout.preferredWidth: 30
                 Layout.preferredHeight: 30
                 Layout.alignment: Qt.AlignVCenter
-                disabled:  nav_swipe.depth <= 1
+                disabled:  {
+                    return d.stackItems.length <= 1
+                }
                 iconSize: 13
                 onClicked: {
-                    nav_swipe.pop()
+                    d.stackItems = d.stackItems.slice(0, -1)
-                    d.stackItems.pop()
                     var item = d.stackItems[d.stackItems.length-1]
-                    if(item.idx<(nav_list.count - layout_footer.count)){
+                    if(item._idx<(nav_list.count - layout_footer.count)){
                         layout_footer.currentIndex = -1
                     }else{
-                        layout_footer.currentIndex = item.idx-(nav_list.count-layout_footer.count)
+                        layout_footer.currentIndex = item._idx-(nav_list.count-layout_footer.count)
                     }
-                    nav_list.currentIndex = item.idx
+                    nav_list.currentIndex = item._idx
-                    if(nav_swipe.currentItem.pageMode === FluNavigationView.SingleInstance){
+                    if(pageMode === FluNavigationView.Stack){
-                        var url = nav_swipe.currentItem.url
+                        var nav_stack = loader_content.item.navStack()
-                        var pageIndex = -1
+                        var nav_stack2 = loader_content.item.navStack2()
-                        for(var i=0;i<nav_swipe2.children.length;i++){
+                        nav_stack.pop()
-                            var obj =  nav_swipe2.children[i]
+                        if(nav_stack.currentItem.launchMode === FluPage.SingleInstance){
-                            if(obj.url === url){
+                            var url = nav_stack.currentItem.url
-                                pageIndex = i
+                            var pageIndex = -1
-                                break
+                            for(var i=0;i<nav_stack2.children.length;i++){
+                                var obj =  nav_stack2.children[i]
+                                if(obj.url === url){
+                                    pageIndex = i
+                                    break
+                                }
+                            }
+                            if(pageIndex !== -1){
+                                nav_stack2.currentIndex = pageIndex
                             }
                         }
-                        if(pageIndex !== -1){
+                    }else if(pageMode === FluNavigationView.NoStack){
-                            nav_swipe2.currentIndex = pageIndex
+                        loader_content.setSource(item._ext.url,item._ext.argument)
-                        }
                     }
                 }
             }
@@ -561,14 +570,16 @@ Item {
                 visible: opacity
                 opacity: d.isMinimal
                 Behavior on opacity{
+                    enabled: FluTheme.enableAnimation && d.animDisabled
                     NumberAnimation{
                         duration: 83
                     }
                 }
                 Behavior on Layout.preferredWidth {
+                    enabled: FluTheme.enableAnimation && d.animDisabled
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
@@ -588,7 +599,7 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     onClicked: {
-                        loginClicked()
+                        logoClicked()
                     }
                 }
             }
@@ -615,7 +626,39 @@ Item {
             }
         }
     }
-    Item{
+
+    Component{
+        id:com_stack_content
+        Item{
+            StackView{
+                id:nav_stack
+                anchors.fill: parent
+                clip: true
+                visible: !nav_stack2.visible
+                popEnter : Transition{}
+                popExit : Transition {}
+                pushEnter: Transition {}
+                pushExit : Transition{}
+                replaceEnter : Transition{}
+                replaceExit : Transition{}
+            }
+            StackLayout{
+                id:nav_stack2
+                anchors.fill: nav_stack
+                clip: true
+                visible: nav_stack.currentItem?.launchMode === FluPage.SingleInstance
+            }
+            function navStack(){
+                return nav_stack
+            }
+            function navStack2(){
+                return nav_stack2
+            }
+        }
+    }
+
+    Loader{
+        id:loader_content
         anchors{
             left: parent.left
             top: nav_app_bar.bottom
@@ -628,33 +671,17 @@ Item {
                 if(d.isCompact){
                     return 50
                 }
-                return 300
+                return control.navWidth
             }
         }
         Behavior on anchors.leftMargin {
+            enabled: FluTheme.enableAnimation && d.animDisabled
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
-        StackView{
+        sourceComponent: com_stack_content
-            id:nav_swipe
-            anchors.fill: parent
-            clip: true
-            visible: !nav_swipe2.visible
-            popEnter : Transition{}
-            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
@@ -671,7 +698,7 @@ Item {
             if(d.isCompactAndNotPanel){
                 return 50
             }
-            return 300
+            return control.navWidth
         }
         anchors{
             top: parent.top
@@ -685,18 +712,19 @@ Item {
             }
             return "transparent"
         }
-        clip: true
         x: visible ? 0 : -width
         Behavior on width {
+            enabled: FluTheme.enableAnimation && d.animDisabled
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         Behavior on x {
+            enabled: FluTheme.enableAnimation && d.animDisabled
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         visible: {
@@ -705,7 +733,7 @@ Item {
             return d.isMinimalAndPanel  ? true : false
         }
         FluAcrylic {
-            sourceItem:nav_swipe
+            sourceItem:loader_content
             anchors.fill: layout_list
             color: {
                 if(d.isMinimalAndPanel || d.isCompactAndPanel){
@@ -756,27 +784,8 @@ Item {
                 }
             }
         }
-        ListView{
+        Flickable{
-            id:nav_list
+            id:layout_flickable
-            clip: true
-            ScrollBar.vertical: FluScrollBar {}
-            model:d.handleItems()
-            highlightMoveDuration: 167
-            highlight: Item{
-                clip: true
-                Rectangle{
-                    height: 18
-                    radius: 1.5
-                    color: FluTheme.primaryColor.dark
-                    width: 3
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                        left: parent.left
-                        leftMargin: 6
-                    }
-                }
-            }
-            currentIndex: -1
             anchors{
                 top: layout_header.bottom
                 topMargin: 6
@@ -784,29 +793,58 @@ Item {
                 right: parent.right
                 bottom: layout_footer.top
             }
-            delegate: Loader{
+            boundsBehavior: ListView.StopAtBounds
-                property var model: modelData
+            clip: true
-                property var idx: index
+            contentHeight: nav_list.contentHeight
-                property int type: 0
+            ScrollBar.vertical: FluScrollBar {}
-                sourceComponent: {
+            ListView{
-                    if(modelData instanceof FluPaneItem){
+                id:nav_list
-                        return com_panel_item
+                clip: true
+                anchors.fill: parent
+                model:d.handleItems()
+                boundsBehavior: ListView.StopAtBounds
+                highlightMoveDuration: FluTheme.enableAnimation && d.animDisabled ? 167 : 0
+                highlight: Item{
+                    clip: true
+                    Rectangle{
+                        height: 18
+                        radius: 1.5
+                        color: FluTheme.primaryColor.dark
+                        width: 3
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left: parent.left
+                            leftMargin: 6
+                        }
                     }
-                    if(modelData instanceof FluPaneItemHeader){
+                }
-                        return com_panel_item_header
+                currentIndex: -1
-                    }
+
-                    if(modelData instanceof FluPaneItemSeparator){
+                delegate: Loader{
-                        return com_panel_item_separatorr
+                    property var model: modelData
-                    }
+                    property var _idx: index
-                    if(modelData instanceof FluPaneItemExpander){
+                    property int type: 0
-                        return com_panel_item_expander
+                    sourceComponent: {
-                    }
+                        if(modelData instanceof FluPaneItem){
-                    if(modelData instanceof FluPaneItemEmpty){
+                            return com_panel_item
-                        return com_panel_item_empty
+                        }
+                        if(modelData instanceof FluPaneItemHeader){
+                            return com_panel_item_header
+                        }
+                        if(modelData instanceof FluPaneItemSeparator){
+                            return com_panel_item_separatorr
+                        }
+                        if(modelData instanceof FluPaneItemExpander){
+                            return com_panel_item_expander
+                        }
+                        if(modelData instanceof FluPaneItemEmpty){
+                            return com_panel_item_empty
+                        }
                     }
                 }
             }
         }
+
         ListView{
             id:layout_footer
             clip: true
@@ -814,6 +852,7 @@ Item {
             height: childrenRect.height
             anchors.bottom: parent.bottom
             interactive: false
+            boundsBehavior: ListView.StopAtBounds
             currentIndex: -1
             model: {
                 if(footerItems){
@@ -837,7 +876,7 @@ Item {
             }
             delegate: Loader{
                 property var model: modelData
-                property var idx: index
+                property var _idx: index
                 property int type: 1
                 sourceComponent: {
                     if(modelData instanceof FluPaneItem){
@@ -936,7 +975,7 @@ Item {
                             modelData.tapFunc()
                         }else{
                             modelData.tap()
-                            nav_list.currentIndex = idx
+                            nav_list.currentIndex = _idx
                             layout_footer.currentIndex = -1
                             if(d.isMinimal || d.isCompact){
                                 d.enableNavigationPanel = false
@@ -955,7 +994,6 @@ Item {
                 radius: 4
             }
             color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-
         }
         function showPopup(pos,model){
             control_popup.x = pos.x
@@ -964,6 +1002,13 @@ Item {
             control_popup.open()
         }
     }
+    Component{
+        id:com_placeholder
+        Item{
+            property int launchMode: FluPage.SingleInstance
+            property string url
+        }
+    }
     function collapseAll(){
         for(var i=0;i<nav_list.model.length;i++){
             var item = nav_list.model[i]
@@ -982,45 +1027,49 @@ Item {
     function getItems(){
         return nav_list.model
     }
-
+    function getCurrentIndex(){
-
+        return nav_list.currentIndex
-    Component{
-        id:com_placeholder
-        Item{
-            property int pageMode: FluNavigationView.SingleInstance
-            property string url
-        }
     }
-
+    function getCurrentUrl(){
-    function push(url,argument={}){
+        if(pageMode === FluNavigationView.Stack){
-        let page = nav_swipe.find(function(item) {
+            var nav_stack = loader_content.item.navStack()
-            return item.url === url;
+            if(nav_stack.currentItem){
-        })
+                return nav_stack.currentItem.url
-        if(page){
-            switch(page.pageMode)
-            {
-            case FluNavigationView.SingleTask:
-                while(nav_swipe.currentItem !== page)
-                {
-                    nav_swipe.pop()
-                    d.stackItems.pop()
-                }
-                return
-            case FluNavigationView.SingleTop:
-                if (nav_swipe.currentItem.url === url){
-                    return
-                }
-                break
-            case FluNavigationView.Standard:
-            default:
             }
+        }else if(pageMode === FluNavigationView.NoStack){
+            return loader_content.source.toString()
         }
-        var comp = Qt.createComponent(url)
+        return undefined
-        if (comp.status === Component.Ready) {
+    }
-            //先判断nav_swipe2中是否有当前url数据
+    function push(url,argument={}){
+        function stackPush(){
+            var nav_stack = loader_content.item.navStack()
+            var nav_stack2 = loader_content.item.navStack2()
+            var page = nav_stack.find(function(item) {
+                return item.url === url;
+            })
+            if(page){
+                switch(page.launchMode)
+                {
+                case FluPage.SingleTask:
+                    while(nav_stack.currentItem !== page)
+                    {
+                        nav_stack.pop()
+                        d.stackItems = d.stackItems.slice(0, -1)
+                    }
+                    return
+                case FluPage.SingleTop:
+                    if (nav_stack.currentItem.url === url){
+                        return
+                    }
+                    break
+                case FluPage.Standard:
+                default:
+                }
+            }
             var pageIndex = -1
-            for(var i=0;i<nav_swipe2.children.length;i++){
+            for(var i=0;i<nav_stack2.children.length;i++){
-                var item =  nav_swipe2.children[i]
+                var item =  nav_stack2.children[i]
                 if(item.url === url){
                     pageIndex = i
                     break
@@ -1028,31 +1077,39 @@ Item {
             }
             var options = Object.assign(argument,{url:url})
             if(pageIndex!==-1){
-                nav_swipe2.currentIndex = pageIndex
+                nav_stack2.currentIndex = pageIndex
-                nav_swipe.push(com_placeholder,options)
+                nav_stack.push(com_placeholder,options)
             }else{
-                var obj  = comp.createObject(nav_swipe,options)
+                var comp = Qt.createComponent(url)
-                if(obj.pageMode === FluNavigationView.SingleInstance){
+                if (comp.status === Component.Ready) {
-                    nav_swipe.push(com_placeholder,options)
+                    var obj  = comp.createObject(nav_stack,options)
-                    nav_swipe2.children.push(obj)
+                    if(obj.launchMode === FluPage.SingleInstance){
-                    nav_swipe2.currentIndex = nav_swipe2.count - 1
+                        nav_stack.push(com_placeholder,options)
+                        nav_stack2.children.push(obj)
+                        nav_stack2.currentIndex = nav_stack2.count - 1
+                    }else{
+                        nav_stack.push(obj)
+                    }
                 }else{
-                    nav_swipe.push(obj)
+                    console.error(comp.errorString())
                 }
             }
-            d.stackItems.push(nav_list.model[nav_list.currentIndex])
+            d.stackItems = d.stackItems.concat(nav_list.model[nav_list.currentIndex])
-        }else{
-            console.error(comp.errorString())
         }
-    }
+        function noStackPush(){
-    function getCurrentIndex(){
+            if(loader_content.source.toString() === url){
-        return nav_list.currentIndex
+                return
-    }
+            }
-    function getCurrentUrl(){
+            loader_content.setSource(url,argument)
-        if(nav_swipe.currentItem){
+            var obj = nav_list.model[nav_list.currentIndex]
-            return nav_swipe.currentItem.url
+            obj._ext = {url:url,argument:argument}
+            d.stackItems = d.stackItems.concat(obj)
+        }
+        if(pageMode === FluNavigationView.Stack){
+            stackPush()
+        }else if(pageMode === FluNavigationView.NoStack){
+            noStackPush()
         }
-        return undefined
     }
     function startPageByItem(data){
         var items = getItems()

src/imports/FluentUI/Controls/FluPage.qml

@@ -5,18 +5,36 @@ import QtQuick.Window
 import FluentUI
 
 Item {
-    property int pageMode: FluNavigationView.SingleTop
+    enum LaunchMode{
+        Standard = 0,
+        SingleTask = 1,
+        SingleTop = 2,
+        SingleInstance = 3
+    }
+    property int launchMode: FluPage.SingleTop
+    property bool animDisabled: false
     property string url : ""
     id: control
     opacity: visible
     visible: false
+    StackView.onRemoved: destroy()
     Behavior on opacity{
+        enabled: !animDisabled && FluTheme.enableAnimation
         NumberAnimation{
-            duration: 83
+            duration: 167
+        }
+    }
+    transform: Translate {
+        y: control.visible ? 0 : 80
+        Behavior on y{
+            enabled: !animDisabled && FluTheme.enableAnimation
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.OutCubic
+            }
         }
     }
     Component.onCompleted: {
         visible = true
     }
-
 }

src/imports/FluentUI/Controls/FluPaneItem.qml

@@ -4,7 +4,8 @@ import FluentUI
 
 QtObject {
     readonly property string key : FluTools.uuid()
-    readonly property int flag : 0
+    property int _idx
+    property var _ext
     property string title
     property int order : 0
     property int icon
@@ -15,7 +16,6 @@ QtObject {
     property string desc
     property var image
     property var parent
-    property int idx
     property int count: 0
     signal tap
     property var tapFunc

src/imports/FluentUI/Controls/FluPaneItemEmpty.qml

@@ -4,6 +4,7 @@ import FluentUI
 
 QtObject {
     readonly property string key : FluTools.uuid()
+    property int _idx
+    property var _ext
     property var parent
-    property int idx
 }

src/imports/FluentUI/Controls/FluPaneItemExpander.qml

@@ -4,10 +4,10 @@ import FluentUI
 
 FluObject {
     readonly property string key : FluTools.uuid()
+    property int _idx
     property string title
     property var icon
     property Component cusIcon
     property bool isExpand: false
     property var parent
-    property int idx
 }

src/imports/FluentUI/Controls/FluPaneItemHeader.qml

@@ -4,7 +4,7 @@ import FluentUI
 
 QtObject {
     readonly property string key : FluTools.uuid()
+    property int _idx
     property string title
     property var parent
-    property int idx
 }

src/imports/FluentUI/Controls/FluPaneItemSeparator.qml

@@ -4,6 +4,6 @@ import FluentUI
 
 QtObject {
     readonly property string key : FluTools.uuid()
+    property int _idx
     property var parent
-    property int idx
 }

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
+    signal commit
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -21,9 +22,12 @@ TextField{
         return normalColor
     }
     font:FluTextStyle.Body
+    padding: 8
+    leftPadding: padding+2
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -50,6 +54,14 @@ TextField{
             }
         }
     }
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
+    }
     FluIconButton{
         id:btn_reveal
         iconSource:FluentIcons.RevealPasswordMedium
@@ -64,10 +76,6 @@ TextField{
             rightMargin: icon_end.visible ? 25 : 5
         }
     }
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
-    }
     FluTextBoxMenu{
         id:menu
         inputItem: control

src/imports/FluentUI/Controls/FluPivot.qml

@@ -28,7 +28,7 @@ Item {
         spacing: 20
         interactive: false
         orientation: ListView.Horizontal
-        highlightMoveDuration: 167
+        highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0
         highlight: Item{
             clip: true
             Rectangle{
@@ -38,9 +38,10 @@ Item {
                 width: nav_list.currentItem ? nav_list.currentItem.width : 0
                 y:37
                 Behavior on width {
+                    enabled: FluTheme.enableAnimation
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }

src/imports/FluentUI/Controls/FluPopup.qml

@@ -20,11 +20,12 @@ Popup {
             properties: "scale"
             from:1.2
             to:1
-            duration: 83
+            duration: FluTheme.enableAnimation ? 83 : 0
+            easing.type: Easing.OutCubic
         }
         NumberAnimation {
             property: "opacity"
-            duration: 83
+            duration: FluTheme.enableAnimation ? 83 : 0
             from:0
             to:1
         }
@@ -34,11 +35,12 @@ Popup {
             properties: "scale"
             from:1
             to:1.2
-            duration: 83
+            duration: FluTheme.enableAnimation ? 83 : 0
+            easing.type: Easing.OutCubic
         }
         NumberAnimation {
             property: "opacity"
-            duration: 83
+            duration: FluTheme.enableAnimation ? 83 : 0
             from:1
             to:0
         }

src/imports/FluentUI/Controls/FluProgressBar.qml

@@ -2,44 +2,67 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-FluRectangle {
+Item{
+
     property real progress: 0.5
     property bool indeterminate: true
+    property bool progressVisible: false
     id: control
     width: 150
     height: 5
-    radius: [3,3,3,3]
+
-    clip: true
+    FluRectangle {
-    color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+        shadow: false
-    Component.onCompleted: {
+        radius: [3,3,3,3]
-        if(indeterminate){
+        anchors.fill: parent
-            bar.x = -control.width*0.5
+        color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-            behavior.enabled = true
+        Component.onCompleted: {
-            bar.x = control.width
+            if(indeterminate){
-        }else{
+                bar.x = -control.width*0.5
-            bar.x = 0
+                behavior.enabled = true
+                bar.x = control.width
+            }else{
+                bar.x = 0
+            }
         }
-    }
+        Rectangle{
-    Rectangle{
+            id:bar
-        id:bar
+            radius: 3
-        radius: 3
+            width: control.width*progress
-        width: control.width*progress
+            height:  control.height
-        height:  control.height
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-        color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+            Behavior on x{
-        Behavior on x{
+                id:behavior
-            id:behavior
+                enabled: false
-            enabled: false
+                NumberAnimation{
-            NumberAnimation{
+                    duration: 1000
-                duration: 1000
+                    onRunningChanged: {
-                onRunningChanged: {
+                        if(!running){
-                    if(!running){
+                            behavior.enabled = false
-                        behavior.enabled = false
+                            bar.x = -control.width*0.5
-                        bar.x = -control.width*0.5
+                            behavior.enabled = true
-                        behavior.enabled = true
+                            bar.x = control.width
-                        bar.x = control.width
+                        }
                     }
                 }
             }
         }
     }
+
+    FluText{
+        text:(control.progress * 100).toFixed(0) + "%"
+        font.pixelSize: 10
+        visible: {
+            if(control.indeterminate){
+                return false
+            }
+            return control.progressVisible
+        }
+        anchors{
+            left: parent.left
+            leftMargin: control.width+5
+            verticalCenter: parent.verticalCenter
+        }
+    }
 }
+

src/imports/FluentUI/Controls/FluProgressRing.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import FluentUI
 
 Rectangle {
-    property real linWidth : width/8
+    property real linWidth : 5
     property real progress: 0.25
     property bool indeterminate: true
-    readonly property real radius2 : radius - linWidth/2
     property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property bool progressVisible: false
     id: control
     width: 44
     height: 44
@@ -24,6 +24,10 @@ Rectangle {
             control.rotation = 360
         }
     }
+    QtObject{
+        id:d
+        property real _radius: control.radius-control.linWidth/2
+    }
     Connections{
         target: FluTheme
         function onDarkChanged(){
@@ -35,8 +39,6 @@ Rectangle {
         enabled: false
         NumberAnimation{
             duration: 999
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: [0.55,0.55,0,1]
             onRunningChanged: {
                 if(!running){
                     behavior.enabled = false
@@ -53,18 +55,28 @@ Rectangle {
         antialiasing: true
         renderTarget: Canvas.Image
         onPaint: {
-            var ctx = canvas.getContext("2d");
+            var ctx = canvas.getContext("2d")
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.save()
-            ctx.save();
+            ctx.lineWidth = linWidth
-            ctx.lineWidth = linWidth;
+            ctx.strokeStyle = primaryColor
-            ctx.strokeStyle = primaryColor;
+            ctx.fillStyle = primaryColor
-            ctx.fillStyle = primaryColor;
+            ctx.beginPath()
-            ctx.beginPath();
+            ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI)
-            ctx.arc(width/2, height/2, radius2 ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI);
+            ctx.stroke()
-            ctx.stroke();
+            ctx.closePath()
-            ctx.closePath();
+            ctx.restore()
-            ctx.restore();
         }
     }
+    FluText{
+        text:(control.progress * 100).toFixed(0) + "%"
+        font.pixelSize: 10
+        visible: {
+            if(control.indeterminate){
+                return false
+            }
+            return control.progressVisible
+        }
+        anchors.centerIn: parent
+    }
 }

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -62,10 +62,10 @@ Button {
                 return checked ? 4 : 1
             }
             Behavior on border.width {
+                enabled: FluTheme.enableAnimation
                 NumberAnimation{
                     duration: 167
-                    easing.type: Easing.BezierSpline
+                    easing.type: Easing.OutCubic
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
                 }
             }
             border.color: {

src/imports/FluentUI/Controls/FluRectangle.qml

@@ -9,6 +9,15 @@ Item{
     property bool shadow: true
     default property alias contentItem: container.data
     id:control
+    onWidthChanged: {
+        canvas.requestPaint()
+    }
+    onHeightChanged: {
+        canvas.requestPaint()
+    }
+    onRadiusChanged: {
+        canvas.requestPaint()
+    }
     FluShadow{
         anchors.fill: container
         radius: control.radius[0]
@@ -36,7 +45,6 @@ Item{
             var y = 0;
             var w = control.width;
             var h = control.height;
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.save();
             ctx.beginPath();

src/imports/FluentUI/Controls/FluRemoteLoader.qml

@@ -4,15 +4,20 @@ import FluentUI
 
 FluStatusView {
     property url source: ""
+    property bool lazy: false
     color:"transparent"
     id:control
     onErrorClicked: {
         reload()
     }
+    Component.onCompleted: {
+        if(!lazy){
+            loader.source = control.source
+        }
+    }
     Loader{
         id:loader
         anchors.fill: parent
-        source: control.source
         asynchronous: true
         onStatusChanged: {
             if(status === Loader.Error){
@@ -28,4 +33,7 @@ FluStatusView {
         var timestamp = Date.now();
         loader.source = control.source+"?"+timestamp
     }
+    function itemLodaer(){
+        return loader
+    }
 }

src/imports/FluentUI/Controls/FluScrollBar.qml

@@ -1,189 +1,86 @@
 import QtQuick
-import QtQuick.Controls.Basic
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI
 
-ScrollBar {
+T.ScrollBar {
-    property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
-    property color handleHoverColor: Qt.lighter(handleNormalColor)
-    property color handlePressColor: Qt.darker(handleNormalColor)
-    property bool expand: false
     id: control
+
+    property color color : FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+    property color pressedColor: FluTheme.dark ? Qt.darker(color,1.2) : Qt.lighter(color,1.2)
+
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
-    visible: control.policy !== ScrollBar.AlwaysOff
+
-    minimumSize: 0.3
+    padding: 2
-    topPadding:{
+    visible: control.policy !== T.ScrollBar.AlwaysOff
-        if(vertical){
+    minimumSize: Math.max(orientation === Qt.Horizontal ? height / width : width / height,0.3)
-            if(expand)
+    contentItem: Item {
-                return 15
+        property bool collapsed: (control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0))
-            return 2
+        implicitWidth: control.interactive ? 6 : 2
-        }else{
+        implicitHeight: control.interactive ? 6 : 2
-            if(expand){
+
-                return 2
+        Rectangle{
-            }
+            id:rect_bar
-            return 4
+            width:  vertical ? 2 : parent.width
-        }
+            height: horizontal  ? 2 : parent.height
-    }
+            color:{
-    bottomPadding:{
+                if(control.pressed){
-        if(vertical){
+                    return control.pressedColor
-            if(expand)
-                return 15
-            return 2
-        }else{
-            if(expand){
-                return 2
-            }
-            return 4
-        }
-    }
-    leftPadding:{
-        if(vertical){
-            if(expand){
-                return 2
-            }
-            return 4
-        }else{
-            if(expand)
-                return 15
-            return 2
-        }
-    }
-    rightPadding:{
-        if(vertical){
-            if(expand){
-                return 2
-            }
-            return 4
-        }else{
-            if(expand)
-                return 15
-            return 2
-        }
-    }
-    Behavior on topPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on bottomPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on leftPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    Behavior on rightPadding {
-        NumberAnimation{
-            duration: 150
-        }
-    }
-    contentItem: Rectangle {
-        id:item_react
-        implicitWidth: expand ? 8 : 2
-        implicitHeight:  expand ? 8 : 2
-        radius: width / 2
-        color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
-        opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
-    }
-    background:  Rectangle{
-        radius: 5
-        color: {
-            if(expand && item_react.opacity){
-                if(FluTheme.dark){
-                    return Qt.rgba(0,0,0,1)
                 }
-                return Qt.rgba(1,1,1,1)
+                return control .color
             }
-            return Qt.rgba(0,0,0,0)
+            anchors{
-        }
+                right: vertical ? parent.right : undefined
-        MouseArea{
+                bottom: horizontal ? parent.bottom : undefined
-            id:mouse_item
-            hoverEnabled: true
-            anchors.fill: parent
-            onEntered: {
-                timer.restart()
             }
-            onExited: {
+            radius: width / 2
-                timer.restart()
+            visible: control.size < 1.0
+        }
+        states: [
+            State{
+                name:"show"
+                when: contentItem.collapsed
+                PropertyChanges {
+                    target: rect_bar
+                    width:  vertical ? 6 : parent.width
+                    height: horizontal  ? 6 : parent.height
+                }
             }
-        }
+            ,State{
-    }
+                name:"hide"
-    Timer{
+                when: !contentItem.collapsed
-        id:timer
+                PropertyChanges {
-        interval: 800
+                    target: rect_bar
-        onTriggered: {
+                    width:  vertical ? 2 : parent.width
-            expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
+                    height: horizontal  ? 2 : parent.height
-        }
+                }
-    }
+            }
-    Behavior on implicitWidth {
+        ]
-        NumberAnimation{
+        transitions:[
-            duration: 150
+            Transition {
-        }
+                to: "hide"
-    }
+                SequentialAnimation {
-    FluIconButton{
+                    PauseAnimation { duration: 450 }
-        id:btn_top
+                    NumberAnimation {
-        iconSource: FluentIcons.CaretSolidUp
+                        target: rect_bar
-        anchors.horizontalCenter: parent.horizontalCenter
+                        properties: vertical ? "width"  : "height"
-        width:10
+                        duration: 167
-        height:10
+                        easing.type: Easing.OutCubic
-        z:100
+                    }
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
+                }
-        iconSize: 8
+            }
-        anchors.top: parent.top
+            ,Transition {
-        anchors.topMargin: 4
+                to: "show"
-        visible:vertical && expand && item_react.opacity
+                NumberAnimation {
-        onClicked:{
+                    target: rect_bar
-            decrease()
+                    properties: vertical ? "width"  : "height"
-        }
+                    duration: 167
-    }
+                    easing.type: Easing.OutCubic
-    FluIconButton{
+                }
-        id:btn_bottom
+            }
-        iconSource: FluentIcons.CaretSolidDown
+        ]
-        visible:vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 4
-        onClicked:{
-            increase()
-        }
-    }
-    FluIconButton{
-        id:btn_left
-        iconSource: FluentIcons.CaretSolidLeft
-        visible:!vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.leftMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        onClicked:{
-            decrease()
-        }
-    }
-    FluIconButton{
-        id:btn_right
-        iconSource: FluentIcons.CaretSolidRight
-        visible:!vertical && expand && item_react.opacity
-        width:10
-        height:10
-        iconSize: 8
-        iconColor: hovered ? FluColors.Black : FluColors.Grey120
-        anchors.rightMargin: 4
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        onClicked:{
-            increase()
-        }
     }
 }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -41,7 +41,10 @@ FluPage {
         contentWidth: parent.width
         contentHeight: container.height
         ScrollBar.vertical: FluScrollBar {
+            anchors.right: flickview.right
+            anchors.rightMargin: 2
         }
+        boundsBehavior: Flickable.StopAtBounds
         anchors{
             top: text_title.bottom
             bottom: parent.bottom

src/imports/FluentUI/Controls/FluSlider.qml

@@ -36,33 +36,39 @@ T.Slider {
                 return control.hovered ? 6/10 : 5/10
             }
             Behavior on scale {
+                enabled: FluTheme.enableAnimation
                 NumberAnimation{
                     duration: 167
+                    easing.type: Easing.OutCubic
                 }
             }
         }
     }
+    background: Item {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 180 : 6
+        implicitHeight: control.horizontal ? 6 : 180
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        Rectangle{
+            anchors.fill: parent
+            anchors.margins: 1
+            radius: 2
+            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 : 6
+            height: control.horizontal ? 6 : control.position * parent.height
+            radius: 3
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+        }
+    }
     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/FluSpinBox.qml

@@ -0,0 +1,160 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+Rectangle{
+    readonly property string displayText : d._displayText
+    property bool disabled: false
+    property int from: 0
+    property int to: 99
+    property var validator: IntValidator {
+        bottom: Math.min(control.from, control.to)
+        top: Math.max(control.from, control.to)
+    }
+    id:control
+    implicitWidth: 200
+    implicitHeight: 34
+    radius: 4
+    color: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+    border.width: 1
+    border.color: FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+    QtObject{
+        id:d
+        property string _displayText: "0"
+    }
+    Component{
+        id:com_edit
+        FluTextBox{
+            rightPadding: 80
+            closeRightMargin: 55
+            disabled: control.disabled
+            validator: control.validator
+            text: d._displayText
+            Component.onCompleted: {
+                forceActiveFocus()
+            }
+            onCommit: {
+                var number = Number(text)
+                if(number>=control.from && number<=control.to){
+                    d._displayText = String(number)
+                }
+                edit_loader.sourceComponent = null
+            }
+            onActiveFocusChanged: {
+                if(!activeFocus){
+                    edit_loader.sourceComponent = null
+                }
+            }
+        }
+    }
+    FluTextBox{
+        id:text_number
+        anchors.fill: parent
+        readOnly: true
+        rightPadding: 80
+        disabled: control.disabled
+        text: control.displayText
+        MouseArea{
+            anchors.fill: parent
+            onClicked: {
+                edit_loader.sourceComponent = com_edit
+            }
+        }
+    }
+    Loader{
+        id:edit_loader
+        anchors.fill: parent
+    }
+    FluIconButton{
+        id:btn_up
+        width: 20
+        height: 20
+        iconSize: 16
+        disabled: {
+            if(control.disabled===true){
+                return true
+            }
+            return Number(control.displayText) === control.to
+        }
+        iconSource: FluentIcons.ChevronUp
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 30
+        }
+        onClicked: {
+            d._displayText = String(Math.min(Number(d._displayText)+1,control.to))
+        }
+        MouseArea{
+            anchors.fill: parent
+            onReleased: {
+                timer.stop()
+            }
+            TapHandler{
+                onTapped: {
+                    btn_up.clicked()
+                }
+                onCanceled: {
+                    timer.stop()
+                }
+                onLongPressed: {
+                    timer.isUp = true
+                    timer.start()
+                }
+            }
+        }
+    }
+    FluIconButton{
+        id:btn_down
+        iconSource: FluentIcons.ChevronDown
+        width: 20
+        height: 20
+        disabled: {
+            if(control.disabled === true){
+                return true
+            }
+            return Number(control.displayText) === control.from
+        }
+        iconSize: 16
+        anchors{
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: 5
+        }
+        onClicked: {
+            d._displayText = String(Math.max(Number(d._displayText)-1,control.from))
+        }
+        MouseArea{
+            anchors.fill: parent
+            onReleased: {
+                timer.stop()
+            }
+            TapHandler{
+                onTapped: {
+                    btn_down.clicked()
+                }
+                onCanceled: {
+                    timer.stop()
+                }
+                onLongPressed: {
+                    timer.isUp = false
+                    timer.start()
+                }
+            }
+        }
+    }
+    Timer{
+        id:timer
+        property bool isUp : true
+        interval: 50
+        repeat: true
+        onTriggered: {
+            if(isUp){
+                btn_up.clicked()
+            }else{
+                btn_down.clicked()
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluStatusView.qml

@@ -19,77 +19,90 @@ Item{
     property string errorButtonText: "重新加载"
     property color color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     signal errorClicked
+    property Component loadingItem : com_loading
+    property Component emptyItem : com_empty
+    property Component errorItem : com_error
+
     Item{
         id:container
         anchors.fill: parent
-        visible: statusMode === FluStatusView.Success
+        visible: statusMode===FluStatusView.Success
     }
-    FluArea{
+    Loader{
-        paddings: 0
+        id:loader
-        border.width: 0
+        anchors.fill: parent
-        anchors.fill: container
+        visible: statusMode!==FluStatusView.Success
-        visible: opacity
+        sourceComponent: {
-        opacity: statusMode === FluStatusView.Loading
+            if(statusMode === FluStatusView.Loading){
-        Behavior on opacity {
+                return loadingItem
-            NumberAnimation  { duration: 83 }
-        }
-        color:control.color
-        ColumnLayout{
-            anchors.centerIn: parent
-            visible: statusMode === FluStatusView.Loading
-            FluProgressRing{
-                indeterminate: true
-                Layout.alignment: Qt.AlignHCenter
             }
-            FluText{
+            if(statusMode === FluStatusView.Empty){
-                text:control.loadingText
+                return emptyItem
-                Layout.alignment: Qt.AlignHCenter
+            }
+            if(statusMode === FluStatusView.Error){
+                return errorItem
+            }
+            return undefined
+        }
+    }
+    Component{
+        id:com_loading
+        FluArea{
+            paddings: 0
+            border.width: 0
+            radius: 0
+            color:control.color
+            ColumnLayout{
+                anchors.centerIn: parent
+                FluProgressRing{
+                    indeterminate: true
+                    Layout.alignment: Qt.AlignHCenter
+                }
+                FluText{
+                    text:control.loadingText
+                    Layout.alignment: Qt.AlignHCenter
+                }
             }
         }
     }
-    FluArea{
+    Component {
-        paddings: 0
+        id:com_empty
-        border.width: 0
+        FluArea{
-        anchors.fill: container
+            paddings: 0
-        visible: opacity
+            border.width: 0
-        color:control.color
+            radius: 0
-        opacity: statusMode === FluStatusView.Empty
+            color:control.color
-        Behavior on opacity {
+            ColumnLayout{
-            NumberAnimation  { duration: 83 }
+                anchors.centerIn: parent
-        }
+                FluText{
-        ColumnLayout{
+                    text:control.emptyText
-            anchors.centerIn: parent
+                    font: FluTextStyle.BodyStrong
-            visible: statusMode === FluStatusView.Empty
+                    Layout.alignment: Qt.AlignHCenter
-            FluText{
+                }
-                text:control.emptyText
-                font: FluTextStyle.BodyStrong
-                Layout.alignment: Qt.AlignHCenter
             }
         }
     }
-    FluArea{
+    Component{
-        paddings: 0
+        id:com_error
-        border.width: 0
+        FluArea{
-        anchors.fill: container
+            paddings: 0
-        visible: opacity
+            border.width: 0
-        color:control.color
+            radius: 0
-        opacity: statusMode === FluStatusView.Error
+            color:control.color
-        Behavior on opacity {
+            ColumnLayout{
-            NumberAnimation  { duration: 83 }
+                anchors.centerIn: parent
-        }
+                FluText{
-        ColumnLayout{
+                    text:control.errorText
-            anchors.centerIn: parent
+                    font: FluTextStyle.BodyStrong
-            FluText{
+                    Layout.alignment: Qt.AlignHCenter
-                text:control.errorText
+                }
-                font: FluTextStyle.BodyStrong
+                FluFilledButton{
-                Layout.alignment: Qt.AlignHCenter
+                    id:btn_error
-            }
+                    Layout.alignment: Qt.AlignHCenter
-            FluFilledButton{
+                    text:control.errorButtonText
-                id:btn_error
+                    onClicked:{
-                Layout.alignment: Qt.AlignHCenter
+                        control.errorClicked()
-                text:control.errorButtonText
+                    }
-                onClicked:{
-                    control.errorClicked()
                 }
             }
         }

src/imports/FluentUI/Controls/FluTableView.qml

@@ -8,6 +8,9 @@ import FluentUI
 Rectangle {
     property var columnSource
     property var dataSource
+    property color selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    property color hoverButtonColor: Qt.alpha(selectionColor,0.2)
+    property color pressedButtonColor: Qt.alpha(selectionColor,0.4)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
@@ -15,14 +18,43 @@ Rectangle {
             var com_column = Qt.createComponent("FluTableModelColumn.qml")
             if (com_column.status === Component.Ready) {
                 var columns= []
+                var header_rows = {}
                 columnSource.forEach(function(item){
                     var column = com_column.createObject(table_model,{display:item.dataIndex});
                     columns.push(column)
+                    header_rows[item.dataIndex] = item.title
                 })
                 table_model.columns = columns
+                header_model.columns = columns
+                d.header_rows = [header_rows]
             }
         }
     }
+    QtObject{
+        id:d
+        property var header_rows:[]
+        property bool selectionFlag: true
+        function obtEditDelegate(column,row){
+            var display = table_model.data(table_model.index(row,column),"display")
+            var cellItem = table_view.itemAtCell(column, row)
+            var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+            item_loader.column = column
+            item_loader.row = row
+            item_loader.x = table_view.contentX + cellPosition.x
+            item_loader.y = table_view.contentY + cellPosition.y
+            item_loader.width = table_view.columnWidthProvider(column)
+            item_loader.height = table_view.rowHeightProvider(row)
+            item_loader.display = display
+            var obj =columnSource[column].editDelegate
+            if(obj){
+                return obj
+            }
+            if(columnSource[column].editMultiline === true){
+                return com_edit_multiline
+            }
+            return com_edit
+        }
+    }
     onDataSourceChanged: {
         table_model.clear()
         dataSource.forEach(function(item){
@@ -34,13 +66,92 @@ Rectangle {
     }
     Component{
         id:com_edit
-        FluTextBox {
+        FluTextBox{
-            anchors.fill: parent
             text: display
-            verticalAlignment: TextInput.AlignVCenter
+            readOnly: true === columnSource[column].readOnly
-            Component.onCompleted: selectAll()
+            Component.onCompleted: {
-            TableView.onCommit: {
+                forceActiveFocus()
-                display = text
+                selectAll()
+            }
+            onCommit: {
+                if(!readOnly){
+                    display = text
+                }
+                tableView.closeEditor()
+            }
+        }
+    }
+    Component{
+        id:com_edit_multiline
+        Item{
+            anchors.fill: parent
+            ScrollView{
+                id:item_scroll
+                clip: true
+                anchors.fill: parent
+                ScrollBar.vertical: FluScrollBar{
+                    parent: item_scroll
+                    x: item_scroll.mirrored ? 0 : item_scroll.width - width
+                    y: item_scroll.topPadding
+                    height: item_scroll.availableHeight
+                    active: item_scroll.ScrollBar.horizontal.active
+                }
+                FluMultilineTextBox {
+                    id:text_box
+                    text: display
+                    readOnly: true === columnSource[column].readOnly
+                    verticalAlignment: TextInput.AlignVCenter
+                    Component.onCompleted: {
+                        forceActiveFocus()
+                        selectAll()
+                    }
+                    rightPadding: 24
+                    onCommit: {
+                        if(!readOnly){
+                            display = text
+                        }
+                        tableView.closeEditor()
+                    }
+                }
+            }
+            FluIconButton{
+                iconSource:FluentIcons.ChromeClose
+                iconSize: 10
+                width: 20
+                height: 20
+                visible: {
+                    if(text_box.readOnly)
+                        return false
+                    return text_box.text !== ""
+                }
+                anchors{
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                    rightMargin: 5
+                }
+                onClicked:{
+                    text_box.text = ""
+                }
+            }
+        }
+    }
+    Component{
+        id:com_text
+        FluText {
+            id:item_text
+            text: itemData
+            anchors.fill: parent
+            anchors.margins: 10
+            elide: Text.ElideRight
+            wrapMode: Text.WrapAnywhere
+            verticalAlignment: Text.AlignVCenter
+            HoverHandler{
+                id: hover_handler
+            }
+            FluTooltip{
+                text: item_text.text
+                delay: 500
+                visible: item_text.contentWidth < item_text.implicitWidth && item_text.contentHeight < item_text.implicitHeight &&  hover_handler.hovered
             }
         }
     }
@@ -60,105 +171,369 @@ Rectangle {
             boundsBehavior: Flickable.StopAtBounds
             ScrollBar.horizontal: FluScrollBar{}
             ScrollBar.vertical: FluScrollBar{}
-            selectionModel: ItemSelectionModel {}
+            selectionModel: ItemSelectionModel {
-            columnWidthProvider: function(column) {
+                id:selection_model
-                let w = explicitColumnWidth(column)
+                model: table_model
-                if (w >= 0){
+                onSelectionChanged: {
-                    var minimumWidth = columnSource[column].minimumWidth
+                    if(selection_rect.dragging){
-                    var maximumWidth = columnSource[column].maximumWidth
+                        d.selectionFlag = !d.selectionFlag
-                    if(!minimumWidth){
-                        minimumWidth = 100
                     }
-                    if(!maximumWidth){
-                        maximumWidth = 65535
-                    }
-
-                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
                 }
-                return implicitColumnWidth(column)
+            }
+            columnWidthProvider: function(column) {
+                var w = columnSource[column].width
+                if(column === item_loader.column){
+                    item_loader.width = w
+                }
+                if(column === item_loader.column-1){
+                    let cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
+                    if(cellItem){
+                        let cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+                        item_loader.x = table_view.contentX + cellPosition.x
+                    }
+                }
+                return w
             }
             rowHeightProvider: function(row) {
-                let h = explicitRowHeight(row)
+                if(row>=table_model.rowCount){
-                if (h >= 0){
+                    return 0
-                    return Math.max(40, h)
                 }
-                return implicitRowHeight(row)
+                var h = table_model.getRow(row).height
+                if(row === item_loader.row){
+                    item_loader.height = h
+                }
+                if(row === item_loader.row-1){
+                    let cellItem = table_view.itemAtCell(item_loader.column, item_loader.row)
+                    if(cellItem){
+                        let cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
+                        item_loader.y = table_view.contentY + cellPosition.y
+                    }
+                }
+                return h
             }
             model: table_model
             clip: true
             delegate: Rectangle {
+                id:item_table
+                property var position: Qt.point(column,row)
                 required property bool selected
-                required property bool current
+                color: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
-                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 {
+                Rectangle{
-                    text: display
                     anchors.fill: parent
-                    anchors.margins: 10
+                    visible: !item_loader.sourceComponent
-                    elide: Text.ElideRight
+                    color: selected ? control.selectionColor : "#00000000"
-                    verticalAlignment: Text.AlignVCenter
                 }
-                TableView.editDelegate: {
+                MouseArea{
-                    var obj =columnSource[column].editDelegate
+                    anchors.fill: parent
-                    if(obj){
+                    acceptedButtons: Qt.LeftButton
-                        return obj
+                    onPressed:{
+                        closeEditor()
+                        table_view.interactive = false
                     }
-                    return com_edit
+                    onCanceled: {
+                        table_view.interactive = true
+                    }
+                    onReleased: {
+                        table_view.interactive = true
+                    }
+                    onDoubleClicked:{
+                        if(display instanceof Component){
+                            return
+                        }
+                        item_loader.sourceComponent = d.obtEditDelegate(column,row)
+                    }
+                    onClicked:
+                        (event)=>{
+                            item_loader.sourceComponent = undefined
+                            if(!(event.modifiers & Qt.ControlModifier)){
+                                selection_model.clear()
+                            }
+                            selection_model.select(table_model.index(row,column),ItemSelectionModel.Select)
+                            d.selectionFlag = !d.selectionFlag
+                            event.accepted = true
+                        }
                 }
+                Loader{
+                    property var itemData: display
+                    property var tableView: table_view
+                    property var tableModel: table_model
+                    property var position: item_table.position
+                    property int row: position.y
+                    property int column: position.x
+                    anchors.fill: parent
+                    sourceComponent: {
+                        if(itemData instanceof Component){
+                            return itemData
+                        }
+                        return com_text
+                    }
+                }
+            }
+        }
+        Loader{
+            id:item_loader
+            z:2
+            property var display
+            property int column
+            property int row
+            property var tableView: control
+            sourceComponent: undefined
+            onDisplayChanged: {
+                var obj = table_model.getRow(row)
+                obj[columnSource[column].dataIndex] = display
+                table_model.setRow(row,obj)
             }
         }
     }
     Component{
         id:com_handle
-        FluControl {
+        Item {}
-            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 {
+        id:selection_rect
         target: table_view
         bottomRightHandle:com_handle
         topLeftHandle: com_handle
+        onDraggingChanged: {
+            if(!dragging){
+                table_view.interactive = true
+            }
+        }
     }
-    FluHorizontalHeaderView {
+    TableView {
         id: header_horizontal
-        textRole: "title"
+        model: TableModel{
-        model: columnSource
+            id:header_model
+            rows: d.header_rows
+        }
+        syncDirection: Qt.Horizontal
         anchors.left: scroll_table.left
         anchors.top: parent.top
+        implicitWidth: syncView ? syncView.width : 0
+        implicitHeight: Math.max(1, contentHeight)
         syncView: table_view
         boundsBehavior: Flickable.StopAtBounds
         clip: true
+        delegate: Rectangle {
+            id:column_item_control
+            readonly property real cellPadding: 8
+            property bool canceled: false
+            readonly property var obj : columnSource[column]
+            implicitWidth: column_text.implicitWidth + (cellPadding * 2)
+            implicitHeight: Math.max(header_horizontal.height, column_text.implicitHeight + (cellPadding * 2))
+            color:{
+                d.selectionFlag
+                if(column_item_control_mouse.pressed){
+                    return control.pressedButtonColor
+                }
+                if(selection_model.isColumnSelected(column)){
+                    return control.hoverButtonColor
+                }
+                return column_item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            }
+            border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            FluText {
+                id: column_text
+                text: model.display
+                width: parent.width
+                height: parent.height
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.columnIntersectsSelection(column)
+                }
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+            MouseArea{
+                id:column_item_control_mouse
+                anchors.fill: parent
+                anchors.rightMargin: 6
+                hoverEnabled: true
+                onCanceled: {
+                    column_item_control.canceled = true
+                }
+                onContainsMouseChanged: {
+                    if(!containsMouse){
+                        column_item_control.canceled = false
+                    }
+                }
+                onClicked:
+                    (event)=>{
+                        closeEditor()
+                        if(!(event.modifiers & Qt.ControlModifier)){
+                            selection_model.clear()
+                        }
+                        for(var i=0;i<=table_view.rows;i++){
+                            selection_model.select(table_model.index(i,column),ItemSelectionModel.Select)
+                        }
+                        d.selectionFlag = !d.selectionFlag
+                    }
+            }
+            MouseArea{
+                property point clickPos: "0,0"
+                height: parent.height
+                width: 6
+                anchors.right: parent.right
+                acceptedButtons: Qt.LeftButton
+                hoverEnabled: true
+                visible: !(obj.width === obj.minimumWidth && obj.width === obj.maximumWidth)
+                cursorShape: Qt.SplitHCursor
+                onPressed :
+                    (mouse)=>{
+                        header_horizontal.interactive = false
+                        FluTools.setOverrideCursor(Qt.SplitHCursor)
+                        clickPos = Qt.point(mouse.x, mouse.y)
+                    }
+                onReleased:{
+                    header_horizontal.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onCanceled: {
+                    header_horizontal.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onPositionChanged:
+                    (mouse)=>{
+                        if(!pressed){
+                            return
+                        }
+                        var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                        var minimumWidth = obj.minimumWidth
+                        var maximumWidth = obj.maximumWidth
+                        if(!minimumWidth){
+                            minimumWidth = 100
+                        }
+                        if(!maximumWidth){
+                            maximumWidth = 65535
+                        }
+                        obj.width = Math.min(Math.max(minimumWidth, obj.width + delta.x),maximumWidth)
+                        table_view.forceLayout()
+                    }
+            }
+        }
     }
-    FluVerticalHeaderView {
+    TableView {
         id: header_vertical
         boundsBehavior: Flickable.StopAtBounds
         anchors.top: scroll_table.top
         anchors.left: parent.left
+        implicitWidth: Math.max(1, contentWidth)
+        implicitHeight: syncView ? syncView.height : 0
+        syncDirection: Qt.Vertical
         syncView: table_view
         clip: true
+        model: TableModel{
+            TableModelColumn {}
+            rows: {
+                if(dataSource)
+                    return dataSource
+                return []
+            }
+        }
+        delegate: Rectangle{
+            id:item_control
+            readonly property real cellPadding: 8
+            property bool canceled: false
+            implicitWidth: Math.max(header_vertical.width, row_text.implicitWidth + (cellPadding * 2))
+            implicitHeight: row_text.implicitHeight + (cellPadding * 2)
+            color: {
+                d.selectionFlag
+                if(item_control_mouse.pressed){
+                    return control.pressedButtonColor
+                }
+                if(selection_model.isRowSelected(row)){
+                    return control.hoverButtonColor
+                }
+                return item_control_mouse.containsMouse&&!canceled ? control.hoverButtonColor :  FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            }
+            border.color: FluTheme.dark ? "#252525" : "#e4e4e4"
+            FluText{
+                id:row_text
+                anchors.centerIn: parent
+                text: row + 1
+                font.bold:{
+                    d.selectionFlag
+                    return selection_model.rowIntersectsSelection(row)
+                }
+            }
+            MouseArea{
+                id:item_control_mouse
+                anchors.fill: parent
+                anchors.bottomMargin: 6
+                hoverEnabled: true
+                onCanceled: {
+                    item_control.canceled = true
+                }
+                onContainsMouseChanged: {
+                    if(!containsMouse){
+                        item_control.canceled = false
+                    }
+                }
+                onClicked:
+                    (event)=>{
+                        closeEditor()
+                        if(!(event.modifiers & Qt.ControlModifier)){
+                            selection_model.clear()
+                        }
+                        for(var i=0;i<=columnSource.length;i++){
+                            selection_model.select(table_model.index(row,i),ItemSelectionModel.Select)
+                        }
+                        d.selectionFlag = !d.selectionFlag
+                    }
+            }
+            MouseArea{
+                property point clickPos: "0,0"
+                height: 6
+                width: parent.width
+                anchors.bottom: parent.bottom
+                acceptedButtons: Qt.LeftButton
+                cursorShape: Qt.SplitVCursor
+                visible: {
+                    var obj = table_model.getRow(row)
+                    return !(obj.height === obj.minimumHeight && obj.width === obj.maximumHeight)
+                }
+                onPressed :
+                    (mouse)=>{
+                        header_vertical.interactive = false
+                        FluTools.setOverrideCursor(Qt.SplitVCursor)
+                        clickPos = Qt.point(mouse.x, mouse.y)
+                    }
+                onReleased:{
+                    header_vertical.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onCanceled: {
+                    header_vertical.interactive = true
+                    FluTools.restoreOverrideCursor()
+                }
+                onPositionChanged:
+                    (mouse)=>{
+                        if(!pressed){
+                            return
+                        }
+                        var obj = table_model.getRow(row)
+                        var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                        var minimumHeight = obj.minimumHeight
+                        var maximumHeight = obj.maximumHeight
+                        if(!minimumHeight){
+                            minimumHeight = 42
+                        }
+                        if(!maximumHeight){
+                            maximumHeight = 65535
+                        }
+                        obj.height = Math.min(Math.max(minimumHeight, obj.height + delta.y),maximumHeight)
+                        table_model.setRow(row,obj)
+                        table_view.forceLayout()
+                    }
+            }
+        }
+    }
+    function closeEditor(){
+        item_loader.sourceComponent = null
+    }
+    function resetPosition(){
+        table_view.positionViewAtCell(Qt.point(0, 0),Qt.AlignTop|Qt.AlignLeft)
     }
 }
-

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
+    signal commit
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -11,8 +12,11 @@ TextField{
     property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+    property int closeRightMargin: icon_end.visible ? 25 : 5
     id:control
     width: 300
+    padding: 8
+    leftPadding: padding+2
     enabled: !disabled
     color: {
         if(!enabled){
@@ -22,7 +26,8 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTheme.primaryColor.lightest
+    selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+    selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
@@ -49,26 +54,40 @@ TextField{
             }
         }
     }
+    Keys.onEnterPressed: (event)=> d.handleCommit(event)
+    Keys.onReturnPressed:(event)=> d.handleCommit(event)
+    QtObject{
+        id:d
+        function handleCommit(event){
+            control.commit()
+        }
+    }
+    MouseArea{
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
+        acceptedButtons: Qt.RightButton
+        onClicked: control.echoMode !== TextInput.Password && menu.popup()
+    }
     FluIconButton{
         iconSource:FluentIcons.ChromeClose
         iconSize: 10
         width: 20
         height: 20
-        opacity: 0.5
+        visible: {
-        visible: control.text !== ""
+            if(control.readOnly)
+                return false
+            return control.text !== ""
+        }
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
-            rightMargin: icon_end.visible ? 25 : 5
+            rightMargin: closeRightMargin
         }
+        contentDescription:"清空"
         onClicked:{
             control.text = ""
         }
     }
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onTapped: control.echoMode !== TextInput.Password && menu.popup()
-    }
     FluTextBoxMenu{
         id:menu
         inputItem: control

src/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -47,10 +47,10 @@ Rectangle{
             }
         }
         Behavior on height{
+            enabled: FluTheme.enableAnimation
             NumberAnimation{
                 duration: 83
-                easing.type: Easing.BezierSpline
+                easing.type: Easing.OutCubic
-                easing.bezierCurve: [ 1, 0, 0, 0 ]
             }
         }
     }

src/imports/FluentUI/Controls/FluTextBoxMenu.qml

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

src/imports/FluentUI/Controls/FluTimePicker.qml

@@ -12,10 +12,10 @@ Rectangle {
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property var window : Window.window
     property int hourFormat: FluTimePicker.H
     property int isH: hourFormat === FluTimePicker.H
-    id:root
+    property var current
+    id:control
     color: {
         if(mouse_area.containsMouse){
             return hoverColor
@@ -27,6 +27,13 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
+    Item{
+        id:d
+        property var window: Window.window
+        property bool changeFlag: true
+        property var rowData: ["","",""]
+        visible: false
+    }
     MouseArea{
         id:mouse_area
         hoverEnabled: true
@@ -99,7 +106,7 @@ Rectangle {
                 property: "opacity"
                 from:0
                 to:1
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         exit:Transition {
@@ -107,7 +114,7 @@ Rectangle {
                 property: "opacity"
                 from:1
                 to:0
-                duration: 83
+                duration: FluTheme.enableAnimation ? 83 : 0
             }
         }
         background:Item{
@@ -312,8 +319,24 @@ Rectangle {
                         }
                         text: "确定"
                         onClicked: {
-                            changeFlag = false
+                            d.changeFlag = false
                             popup.close()
+                            const hours = text_hour.text
+                            const minutes = text_minute.text
+                            const period = text_ampm.text
+                            const date = new Date()
+                            var hours24 = parseInt(hours);
+                            if(control.hourFormat === FluTimePicker.H){
+                                if (hours === "12") {
+                                    hours24 = (period === "上午") ? 0 : 12;
+                                } else {
+                                    hours24 = (period === "上午") ? hours24 : hours24 + 12;
+                                }
+                            }
+                            date.setHours(hours24);
+                            date.setMinutes(parseInt(minutes));
+                            date.setSeconds(0);
+                            current = date
                         }
                     }
                 }
@@ -321,10 +344,10 @@ Rectangle {
         }
         y:35
         function showPopup() {
-            changeFlag = true
+            d.changeFlag = true
-            rowData[0] = text_hour.text
+            d.rowData[0] = text_hour.text
-            rowData[1] = text_minute.text
+            d.rowData[1] = text_minute.text
-            rowData[2] = text_ampm.text
+            d.rowData[2] = text_ampm.text
 
             var now = new Date();
 
@@ -353,27 +376,24 @@ Rectangle {
             if(isH){
                 text_ampm.text = ampm
             }
-
+            var pos = control.mapToItem(null, 0, 0)
-            var pos = root.mapToItem(null, 0, 0)
+            if(d.window.height>pos.y+control.height+container.height){
-            if(window.height>pos.y+root.height+container.height){
+                popup.y = control.height
-                popup.y = root.height
             } else if(pos.y>container.height){
                 popup.y = -container.height
             } else {
-                popup.y = window.height-(pos.y+container.height)
+                popup.y = d.window.height-(pos.y+container.height)
             }
             popup.open()
         }
         onClosed: {
-            if(changeFlag){
+            if(d.changeFlag){
-                text_hour.text = rowData[0]
+                text_hour.text = d.rowData[0]
-                text_minute.text = rowData[1]
+                text_minute.text = d.rowData[1]
-                text_ampm.text = rowData[2]
+                text_ampm.text = d.rowData[2]
             }
         }
     }
-    property bool changeFlag: true
-    readonly property var rowData: ["","",""]
     function generateArray(start, n) {
         var arr = [];
         for (var i = start; i <= n; i++) {

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -69,17 +69,11 @@ Button {
                 return borderNormalColor
             }
             Rectangle {
-                width: pressed ? 28 : 20
+                width:  20
-                anchors{
+                x:checked ? control_backgound.width-width : 0
-                    left: checked ? undefined : parent.left
-                    leftMargin: checked ? 20 : 0
-                    right: checked ? parent.right : undefined
-                    rightMargin: checked ? 0: 20
-                }
                 height: 20
                 radius: 10
                 scale: hovered&enabled ? 7/10 : 6/10
-                anchors.verticalCenter: parent.verticalCenter
                 color: {
                     if(!enabled){
                         return dotDisableColor
@@ -89,28 +83,16 @@ Button {
                     }
                     return dotNormalColor
                 }
-                Behavior on anchors.leftMargin  {
+                Behavior on x  {
+                    enabled:  FluTheme.enableAnimation
                     NumberAnimation {
-                        duration: 167
+                        easing.type: Easing.OutCubic
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 1, 0, 0, 0 ]
-                    }
-                }
-                Behavior on anchors.rightMargin  {
-                    NumberAnimation {
-                        duration: 167
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: [ 0, 0, 0, 1 ]
-                    }
-                }
-                Behavior on width {
-                    NumberAnimation {
-                        duration: 167
                     }
                 }
                 Behavior on scale {
+                    enabled: FluTheme.enableAnimation
                     NumberAnimation {
-                        duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
             }

src/imports/FluentUI/Controls/FluTreeView.qml

@@ -105,7 +105,6 @@ Item {
                             verticalCenter: parent.verticalCenter
                         }
                     }
-
                     MouseArea{
                         id:item_layout_mouse
                         anchors.fill: parent
@@ -200,9 +199,7 @@ Item {
                     FluIconButton{
                         id:item_layout_expanded
                         color:"#00000000"
-                        iconSource:item_layout.expanded?FluentIcons.ChevronDown:FluentIcons.ChevronRight
                         opacity: item_layout.hasChild
-                        iconSize: 15
                         onClicked: {
                             if(!item_layout.hasChild){
                                 item_layout_rect.onClickItem()
@@ -210,6 +207,18 @@ Item {
                             }
                             model.expanded = !model.expanded
                         }
+                        contentItem: FluIcon{
+                            rotation: item_layout.expanded?0:-90
+                            iconSource:FluentIcons.ChevronDown
+                            iconSize: 15
+                            Behavior on rotation {
+                                enabled: FluTheme.enableAnimation
+                                NumberAnimation{
+                                    duration: 167
+                                    easing.type: Easing.OutCubic
+                                }
+                            }
+                        }
                     }
                     FluText {
                         text:  item_layout.text
@@ -250,6 +259,7 @@ Item {
         model: tree_model
         flickableDirection: Flickable.HorizontalAndVerticalFlick
         clip: true
+        boundsBehavior: ListView.StopAtBounds
         ScrollBar.vertical: FluScrollBar {}
         ScrollBar.horizontal: FluScrollBar { }
     }

src/imports/FluentUI/Controls/FluWindow.qml

@@ -16,6 +16,7 @@ Window {
     property string route
     property var argument:({})
     property var pageRegister
+    property Component loadingItem: com_loading
     property var closeFunc: function(event){
         if(closeDestory){
             deleteWindow()
@@ -44,24 +45,71 @@ Window {
         id: bg
         anchors.fill: parent
         color: backgroundColor
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
     }
     Item{
         id:container
         anchors.fill: parent
         clip: true
     }
+    Loader{
+        property string loadingText: "加载中..."
+        property bool cancel: false
+        id:loader_loading
+        anchors.fill: container
+    }
     FluInfoBar{
         id:infoBar
         root: window
     }
+    Component{
+        id:com_loading
+        Popup{
+            id:popup_loading
+            modal:true
+            focus: true
+            anchors.centerIn: Overlay.overlay
+            closePolicy: {
+                if(cancel){
+                    return Popup.CloseOnEscape | Popup.CloseOnPressOutside
+                }
+                return Popup.NoAutoClose
+            }
+            Overlay.modal: Rectangle {
+                color: "#44000000"
+            }
+            onVisibleChanged: {
+                if(!visible){
+                    loader_loading.sourceComponent = undefined
+                }
+            }
+            visible: true
+            background: Item{}
+            contentItem: Item{
+                ColumnLayout{
+                    spacing: 8
+                    anchors.centerIn: parent
+                    FluProgressRing{
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+                    FluText{
+                        text:loadingText
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+                }
+            }
+        }
+    }
     WindowHelper{
         id:helper
     }
+    function showLoading(text = "加载中...",cancel = true){
+        loader_loading.loadingText = text
+        loader_loading.cancel = cancel
+        loader_loading.sourceComponent = com_loading
+    }
+    function hideLoading(){
+        loader_loading.sourceComponent = undefined
+    }
     function showSuccess(text,duration,moremsg){
         infoBar.showSuccess(text,duration,moremsg)
     }
@@ -78,7 +126,7 @@ Window {
         return helper.createRegister(window,path)
     }
     function deleteWindow(){
-        helper.deleteWindow()
+        FluApp.deleteWindow(window)
     }
     function onResult(data){
         if(pageRegister){

src/imports/FluentUI/qmldir

@@ -1,68 +1,83 @@
 module FluentUI
-FluAppBar 1.0 FluAppBar.qml
+classname FluentUIPlugin
-FluArea 1.0 FluArea.qml
+designersupported
-FluAutoSuggestBox 1.0 FluAutoSuggestBox.qml
+typeinfo plugins.qmltypes
-FluBadge 1.0 FluBadge.qml
+
-FluBreadcrumbBar 1.0 FluBreadcrumbBar.qml
+FluAppBar 1.0 Controls/FluAppBar.qml
-FluButton 1.0 FluButton.qml
+FluArea 1.0 Controls/FluArea.qml
-FluCalendarPicker 1.0 FluCalendarPicker.qml
+FluAcrylic 1.0 Controls/FluAcrylic.qml
-FluCalendarView 1.0 FluCalendarView.qml
+FluAutoSuggestBox 1.0 Controls/FluAutoSuggestBox.qml
-FluCarousel 1.0 FluCarousel.qml
+FluBadge 1.0 Controls/FluBadge.qml
-FluCheckBox 1.0 FluCheckBox.qml
+FluBreadcrumbBar 1.0 Controls/FluBreadcrumbBar.qml
-FluColorPicker 1.0 FluColorPicker.qml
+FluButton 1.0 Controls/FluButton.qml
-FluColorView 1.0 FluColorView.qml
+FluCalendarPicker 1.0 Controls/FluCalendarPicker.qml
-FluComboBox 1.0 FluComboBox.qml
+FluCalendarView 1.0 Controls/FluCalendarView.qml
-FluContentDialog 1.0 FluContentDialog.qml
+FluCarousel 1.0 Controls/FluCarousel.qml
-FluContentPage 1.0 FluContentPage.qml
+FluCheckBox 1.0 Controls/FluCheckBox.qml
-FluDatePicker 1.0 FluDatePicker.qml
+FluColorPicker 1.0 Controls/FluColorPicker.qml
-FluDivider 1.0 FluDivider.qml
+FluColorView 1.0 Controls/FluColorView.qml
-FluDropDownButton 1.0 FluDropDownButton.qml
+FluComboBox 1.0 Controls/FluComboBox.qml
-FluExpander 1.0 FluExpander.qml
+FluControl 1.0 Controls/FluControl.qml
-FluFilledButton 1.0 FluFilledButton.qml
+FluContentDialog 1.0 Controls/FluContentDialog.qml
-FluFlipView 1.0 FluFlipView.qml
+FluContentPage 1.0 Controls/FluContentPage.qml
-FluFocusRectangle 1.0 FluFocusRectangle.qml
+FluCopyableText 1.0 Controls/FluCopyableText.qml
-FluIcon 1.0 FluIcon.qml
+FluDatePicker 1.0 Controls/FluDatePicker.qml
-FluIconButton 1.0 FluIconButton.qml
+FluDivider 1.0 Controls/FluDivider.qml
-FluInfoBar 1.0 FluInfoBar.qml
+FluDropDownButton 1.0 Controls/FluDropDownButton.qml
-FluItem 1.0 FluItem.qml
+FluExpander 1.0 Controls/FluExpander.qml
-FluMediaPlayer 1.0 FluMediaPlayer.qml
+FluFilledButton 1.0 Controls/FluFilledButton.qml
-FluMenu 1.0 FluMenu.qml
+FluFlipView 1.0 Controls/FluFlipView.qml
-FluMenuItem 1.0 FluMenuItem.qml
+FluFocusRectangle 1.0 Controls/FluFocusRectangle.qml
-FluMultilineTextBox 1.0 FluMultilineTextBox.qml
+FluIcon 1.0 Controls/FluIcon.qml
-FluNavigationView 1.0 FluNavigationView.qml
+FluIconButton 1.0 Controls/FluIconButton.qml
-FluObject 1.0 FluObject.qml
+FluInfoBar 1.0 Controls/FluInfoBar.qml
-FluPagination 1.0 FluPagination.qml
+FluItem 1.0 Controls/FluItem.qml
-FluPaneItem 1.0 FluPaneItem.qml
+FluImage 1.0 Controls/FluImage.qml
-FluPaneItemEmpty 1.0 FluPaneItemEmpty.qml
+FluMediaPlayer 1.0 Controls/FluMediaPlayer.qml
-FluPaneItemExpander 1.0 FluPaneItemExpander.qml
+FluMenu 1.0 Controls/FluMenu.qml
-FluPaneItemHeader 1.0 FluPaneItemHeader.qml
+FluMenuItem 1.0 Controls/FluMenuItem.qml
-FluPaneItemSeparator 1.0 FluPaneItemSeparator.qml
+FluMenuSeparator 1.0 Controls/FluMenuSeparator.qml
-FluPasswordBox 1.0 FluPasswordBox.qml
+FluMenuBar 1.0 Controls/FluMenuBar.qml
-FluPivot 1.0 FluPivot.qml
+FluMenuBarItem 1.0 Controls/FluMenuBarItem.qml
-FluPivotItem 1.0 FluPivotItem.qml
+FluMultilineTextBox 1.0 Controls/FluMultilineTextBox.qml
-FluProgressBar 1.0 FluProgressBar.qml
+FluNavigationView 1.0 Controls/FluNavigationView.qml
-FluProgressRing 1.0 FluProgressRing.qml
+FluObject 1.0 Controls/FluObject.qml
-FluRadioButton 1.0 FluRadioButton.qml
+FluPage 1.0 Controls/FluPage.qml
-FluRatingControl 1.0 FluRatingControl.qml
+FluPagination 1.0 Controls/FluPagination.qml
-FluRectangle 1.0 FluRectangle.qml
+FluPaneItem 1.0 Controls/FluPaneItem.qml
-FluScrollablePage 1.0 FluScrollablePage.qml
+FluPaneItemEmpty 1.0 Controls/FluPaneItemEmpty.qml
-FluScrollBar 1.0 FluScrollBar.qml
+FluPaneItemExpander 1.0 Controls/FluPaneItemExpander.qml
-FluShadow 1.0 FluShadow.qml
+FluPaneItemHeader 1.0 Controls/FluPaneItemHeader.qml
-FluSlider 1.0 FluSlider.qml
+FluPaneItemSeparator 1.0 Controls/FluPaneItemSeparator.qml
-FluStatusView 1.0 FluStatusView.qml
+FluPasswordBox 1.0 Controls/FluPasswordBox.qml
-FluTableView 1.0 FluTableView.qml
+FluPivot 1.0 Controls/FluPivot.qml
-FluTabView 1.0 FluTabView.qml
+FluPivotItem 1.0 Controls/FluPivotItem.qml
-FluText 1.0 FluText.qml
+FluPopup 1.0 Controls/FluPopup.qml
-FluTextBox 1.0 FluTextBox.qml
+FluProgressBar 1.0 Controls/FluProgressBar.qml
-FluTextBoxBackground 1.0 FluTextBoxBackground.qml
+FluProgressRing 1.0 Controls/FluProgressRing.qml
-FluTextBoxMenu 1.0 FluTextBoxMenu.qml
+FluRadioButton 1.0 Controls/FluRadioButton.qml
-FluTextButton 1.0 FluTextButton.qml
+FluRadioButtons 1.0 Controls/FluRadioButtons.qml
-FluTimePicker 1.0 FluTimePicker.qml
+FluRatingControl 1.0 Controls/FluRatingControl.qml
-FluToggleButton 1.0 FluToggleButton.qml
+FluRectangle 1.0 Controls/FluRectangle.qml
-FluToggleSwitch 1.0 FluToggleSwitch.qml
+FluRemoteLoader 1.0 Controls/FluRemoteLoader.qml
-FluTooltip 1.0 FluTooltip.qml
+FluScrollablePage 1.0 Controls/FluScrollablePage.qml
-FluTreeView 1.0 FluTreeView.qml
+FluScrollBar 1.0 Controls/FluScrollBar.qml
-FluWindow 1.0 FluWindow.qml
+FluShadow 1.0 Controls/FluShadow.qml
-FluWindowResize 1.0 FluWindowResize.qml
+FluSlider 1.0 Controls/FluSlider.qml
-FluSingleton 1.0 FluSingleton.qml
+FluSpinBox 1.0 Controls/FluSpinBox.qml
+FluStatusView 1.0 Controls/FluStatusView.qml
+FluTableView 1.0 Controls/FluTableView.qml
+FluTabView 1.0 Controls/FluTabView.qml
+FluText 1.0 Controls/FluText.qml
+FluTextBox 1.0 Controls/FluTextBox.qml
+FluTextBoxBackground 1.0 Controls/FluTextBoxBackground.qml
+FluTextBoxMenu 1.0 Controls/FluTextBoxMenu.qml
+FluTextButton 1.0 Controls/FluTextButton.qml
+FluTimePicker 1.0 Controls/FluTimePicker.qml
+FluToggleButton 1.0 Controls/FluToggleButton.qml
+FluToggleSwitch 1.0 Controls/FluToggleSwitch.qml
+FluTooltip 1.0 Controls/FluTooltip.qml
+FluTreeView 1.0 Controls/FluTreeView.qml
+FluWindow 1.0 Controls/FluWindow.qml
+FluSingleton 1.0 Controls/FluSingleton.qml
 plugin fluentuiplugin