update

CMakeLists.txt

@@ -1,7 +1,10 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(FluentUI VERSION 0.1 LANGUAGES CXX)
 
 add_subdirectory(src)
 add_subdirectory(example)
+
+add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
+add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
 add_subdirectory(framelesshelper)

example/CMakeLists.txt

@@ -1,4 +1,4 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(example VERSION 0.1 LANGUAGES CXX)
 
@@ -20,7 +20,7 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,2,0)
+add_definitions(-DVERSION=1,3,3,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick REQUIRED)
 

example/qml/component/CodeExpander.qml

@@ -26,11 +26,6 @@ FluExpander{
             color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
             border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
             border.width: 1
-            Behavior on color{
-                ColorAnimation {
-                    duration: 300
-                }
-            }
         }
     }
 
@@ -134,7 +129,8 @@ FluExpander{
                     "FluPasswordBox",
                     "FluBreadcrumbBar",
                     "FluCopyableText",
-                    "FluAcrylic"
+                    "FluAcrylic",
+                    "FluRemoteLoader"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

@@ -39,15 +39,15 @@ FluWindow {
         id:framless_helper
         onReady: {
             setTitleBarItem(title_bar)
-            framless_helper.moveWindowToDesktopCenter()
+            moveWindowToDesktopCenter()
             setHitTestVisible(title_bar.minimizeButton())
             setHitTestVisible(title_bar.maximizeButton())
             setHitTestVisible(title_bar.closeButton())
-            framless_helper.setWindowFixedSize(fixSize)
+            setWindowFixedSize(fixSize)
             title_bar.maximizeButton.visible = !fixSize
             if (blurBehindWindowEnabled)
                 window.backgroundVisible = false
-            window.visible = true
+            window.show()
         }
     }
     Connections{

example/qml/global/ItemsOriginal.qml

@@ -291,6 +291,18 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_MediaPlayer.qml")
             }
         }
+
+    }
+
+    FluPaneItemExpander{
+        title:lang.other
+        icon:FluentIcons.Shop
+        FluPaneItem{
+            title:"RemoteLoader"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
+            }
+        }
     }
 
     function getRecentlyAddedData(){

example/qml/page/T_Acrylic.qml

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

example/qml/page/T_Badge.qml

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

example/qml/page/T_BreadcrumbBar.qml

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

example/qml/page/T_Buttons.qml

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

example/qml/page/T_CalendarPicker.qml

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

example/qml/page/T_Carousel.qml

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

example/qml/page/T_CheckBox.qml

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

example/qml/page/T_ColorPicker.qml

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

example/qml/page/T_ComboBox.qml

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

example/qml/page/T_DatePicker.qml

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

example/qml/page/T_Dialog.qml

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

example/qml/page/T_Expander.qml

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

example/qml/page/T_FlipView.qml

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

example/qml/page/T_Home.qml

@@ -2,11 +2,13 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 import FluentUI
 
 FluScrollablePage{
 
+    pageMode: FluNavigationView.SingleTask
+
     ListModel{
         id:model_header
         ListElement{

example/qml/page/T_InfoBar.qml

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

example/qml/page/T_MediaPlayer.qml

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

example/qml/page/T_Menu.qml

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

example/qml/page/T_MultiWindow.qml

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

example/qml/page/T_Pivot.qml

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

example/qml/page/T_Progress.qml

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

example/qml/page/T_RatingControl.qml

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

example/qml/page/T_Rectangle.qml

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

example/qml/page/T_RemoteLoader.qml

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

example/qml/page/T_Settings.qml

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

example/qml/page/T_Slider.qml

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

example/qml/page/T_StatusView.qml

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

example/qml/page/T_TabView.qml

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

example/qml/page/T_TableView.qml

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

example/qml/page/T_Text.qml

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

example/qml/page/T_TextBox.qml

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

example/qml/page/T_Theme.qml

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

example/qml/page/T_TimePicker.qml

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

example/qml/page/T_ToggleSwitch.qml

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

example/qml/page/T_Tooltip.qml

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

example/qml/page/T_TreeView.qml

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

example/qml/window/AboutWindow.qml

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

example/qml/window/LoginWindow.qml

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

example/qml/window/MainWindow.qml

@@ -4,8 +4,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
-import "../component"
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/component"
+import "qrc:///example/qml/global"
 
 CustomWindow {
 
@@ -76,48 +76,224 @@ CustomWindow {
         }
     }
 
-    FluAppBar {
-        id: title_bar
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
+    Flipable{
+        id:flipable
+        anchors.fill: parent
+        property bool flipped: false
+        property real flipAngle: 0
+        transform: Rotation {
+            id: rotation
+            origin.x: flipable.width/2
+            origin.y: flipable.height/2
+            axis { x: 0; y: 1; z: 0 }
+            angle: flipable.flipAngle
+
+        }
+        states: State {
+            PropertyChanges { target: flipable; flipAngle: 180 }
+            when: flipable.flipped
+        }
+        transitions: Transition {
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
+        }
+        back: Item{
+            anchors.fill: flipable
+            visible: flipable.flipAngle !== 0
+            FluAppBar {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                darkText: lang.dark_mode
+                showDark: true
+                z:7
+                darkClickListener:(button)=>handleDarkChanged(button)
+            }
+            Row{
+                z:8
+                FluIconButton{
+                    iconSource: FluentIcons.ChromeBack
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        flipable.flipped = false
+                    }
+                }
+                FluIconButton{
+                    iconSource: FluentIcons.Sync
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        loader.reload()
+                    }
+                }
+            }
+
+            FluRemoteLoader{
+                id:loader
+                anchors.fill: parent
+//                source: "http://localhost:9000/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
+            }
+        }
+        front: Item{
+            id:page_front
+            visible: flipable.flipAngle !== 180
+            anchors.fill: flipable
+            FluAppBar {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                darkText: lang.dark_mode
+                showDark: true
+                darkClickListener:(button)=>handleDarkChanged(button)
+                z:7
+            }
+            FluNavigationView{
+                property int clickCount: 0
+                id:nav_view
+                width: parent.width
+                height: parent.height
+                z:999
+                items: ItemsOriginal
+                footerItems:ItemsFooter
+                topPadding:FluTools.isMacos() ? 20 : 5
+                displayMode:MainEvent.displayMode
+                logo: "qrc:/example/res/image/favicon.ico"
+                title:"FluentUI"
+                Behavior on rotation {
+                    NumberAnimation{
+                        duration: 167
+                    }
+                }
+                transformOrigin: Item.Center
+                onLoginClicked:{
+                    clickCount += 1
+                    if(clickCount === 1){
+                        loader.reload()
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
+                autoSuggestBox:FluAutoSuggestBox{
+                    width: 280
+                    anchors.centerIn: parent
+                    iconSource: FluentIcons.Search
+                    items: ItemsOriginal.getSearchData()
+                    placeholderText: lang.search
+                    onItemClicked:
+                        (data)=>{
+                            ItemsOriginal.startPageByItem(data)
+                        }
+                }
+                Component.onCompleted: {
+                    ItemsOriginal.navigationView = nav_view
+                    ItemsFooter.navigationView = nav_view
+                    setCurrentIndex(0)
+                }
+            }
         }
-        darkText: lang.dark_mode
-        showDark: true
-        z:7
     }
 
-    FluNavigationView{
-        id:nav_view
-        anchors{
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
+    Image{
+        id:img_cache
+        visible: false
+        anchors.fill: parent
+    }
+
+    Canvas{
+        id:canvas
+        anchors.fill: parent
+        property int centerX: canvas.width / 2
+        property int centerY: canvas.height / 2
+        property real radius: 0
+        property int maxRadius: 0
+        property url imageUrl
+        Behavior on radius{
+            id:anim_radius
+            NumberAnimation {
+                target: canvas
+                property: "radius"
+                duration: 666
+                easing.type: Easing.OutCubic
+            }
         }
-        z:999
-        items: ItemsOriginal
-        footerItems:ItemsFooter
-        topPadding:FluTools.isMacos() ? 20 : 5
-        displayMode:MainEvent.displayMode
-        logo: "qrc:/example/res/image/favicon.ico"
-        title:"FluentUI"
-        autoSuggestBox:FluAutoSuggestBox{
-            width: 280
-            anchors.centerIn: parent
-            iconSource: FluentIcons.Search
-            items: ItemsOriginal.getSearchData()
-            placeholderText: lang.search
-            onItemClicked:
-                (data)=>{
-                    ItemsOriginal.startPageByItem(data)
+        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()
         }
-        Component.onCompleted: {
-            ItemsOriginal.navigationView = nav_view
-            ItemsFooter.navigationView = nav_view
-            nav_view.setCurrentIndex(0)
+        function clearArc(ctx,x, y, radius, startAngle, endAngle) {
+            ctx.beginPath()
+            ctx.globalCompositeOperation = 'destination-out'
+            ctx.fillStyle = 'black'
+            ctx.arc(x, y, radius, 0, 2*Math.PI);
+            ctx.fill();
+            ctx.closePath();
         }
     }
+
+    function distance(x1,y1,x2,y2){
+        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
+    }
+
+    function handleDarkChanged(button){
+        var changeDark = function(){
+            if(FluTheme.dark){
+                FluTheme.darkMode = FluDarkMode.Light
+            }else{
+                FluTheme.darkMode = FluDarkMode.Dark
+            }
+        }
+        if(FluTools.isWin()){
+            var target = window.contentItem
+            var pos = button.mapToItem(target,0,0)
+            var mouseX = pos.x
+            var mouseY = pos.y
+            canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            target.grabToImage(function(result) {
+                img_cache.source = result.url
+                canvas.requestPaint()
+                changeDark()
+                canvas.centerX = mouseX
+                canvas.centerY = mouseY
+                anim_radius.enabled = false
+                canvas.radius = 0
+                anim_radius.enabled = true
+                canvas.radius = canvas.maxRadius
+            },canvas.canvasSize)
+        }else{
+            changeDark()
+        }
+    }
+
+    Shortcut {
+        sequence: "F5"
+        context: Qt.WindowShortcut
+        onActivated: {
+            if(flipable.flipped){
+                loader.reload()
+            }
+        }
+    }
+
+
 }

example/qml/window/MediaWindow.qml

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

example/qml/window/SingleInstanceWindow.qml

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

example/qml/window/SingleTaskWindow.qml

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

example/qml/window/StandardWindow.qml

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

example/src/lang/En.cpp

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

example/src/lang/Lang.h

@@ -22,6 +22,7 @@ class Lang : public QObject
     Q_PROPERTY_AUTO(QString,settings);
     Q_PROPERTY_AUTO(QString,navigation_view_display_mode);
     Q_PROPERTY_AUTO(QString,locale);
+    Q_PROPERTY_AUTO(QString,other);
 public:
     explicit Lang(QObject *parent = nullptr);
 

example/src/lang/Zh.cpp

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

src/CMakeLists.txt

@@ -1,4 +1,4 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(fluentuiplugin LANGUAGES CXX)
 
@@ -13,7 +13,7 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,2,0)
+add_definitions(-DVERSION=1,3,3,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml ShaderTools)
 
@@ -52,6 +52,8 @@ qt_add_qml_module(fluentuiplugin
     OUTPUT_DIRECTORY ${QML_PLUGIN_DIRECTORY}
     VERSION 1.0
     URI "FluentUI"
+    #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
+    TYPEINFO "plugins.qmltypes"
     SOURCES ${sources_files} fluentui.rc
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}

src/FluApp.h

@@ -27,7 +27,6 @@ class FluApp : public QObject
      */
     Q_PROPERTY_AUTO(QJsonObject,routes);
 
-    QML_FOREIGN(FluApp)
     QML_NAMED_ELEMENT(FluApp)
     QML_SINGLETON
 private:

src/imports/FluentUI/Controls/FluAppBar.qml

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

src/imports/FluentUI/Controls/FluArea.qml

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

src/imports/FluentUI/Controls/FluCheckBox.qml

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

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -28,7 +28,7 @@ ComboBox {
         highlighted: control.highlightedIndex === index
         hoverEnabled: control.hoverEnabled
     }
-
+    focusPolicy:Qt.TabFocus
     indicator: FluIcon {
         x: control.mirrored ? control.padding : control.width - width - control.padding
         y: control.topPadding + (control.availableHeight - height) / 2
@@ -75,7 +75,8 @@ ComboBox {
         radius: 4
         FluFocusRectangle{
             visible: control.activeFocus
-            radius:8
+            radius:4
+            anchors.margins: -2
         }
         color:{
             if(disabled){

src/imports/FluentUI/Controls/FluContentPage.qml

@@ -16,7 +16,9 @@ Item {
     id:control
     FluText{
         id:text_title
-        font: FluTextStyle.TitleLarge
+        visible: text !== ""
+        height: visible ? implicitHeight : 0
+        font: FluTextStyle.Title
         anchors{
             top: parent.top
             topMargin: control.topPadding

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-TextField {
+TextEdit {
     property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
     id:control
     color: textColor
@@ -16,15 +16,6 @@ TextField {
     topPadding: 0
     bottomPadding: 0
     selectionColor: FluTheme.primaryColor.lightest
-    TextMetrics {
-        id: text_metrics
-        font:control.font
-        text: control.text
-    }
-    background: Item{
-        implicitWidth: text_metrics.width+10
-        implicitHeight: text_metrics.height
-    }
     font:FluTextStyle.Body
     TapHandler {
         acceptedButtons: Qt.RightButton

src/imports/FluentUI/Controls/FluExpander.qml

@@ -20,16 +20,6 @@ Item {
         radius: 4
         color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         border.color: FluTheme.dark ?  Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
-        Behavior on border.color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
         MouseArea{
             id:control_mouse
             anchors.fill: parent

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -7,10 +7,14 @@ import FluentUI
 
 Item {
     enum DisplayMode {
-        Open,
-        Compact,
-        Minimal,
-        Auto
+        Open = 0,
+        Compact = 1,
+        Minimal = 2,
+        Auto = 3
+    }
+    enum PageModeFlag{
+        Standard = 0,
+        SingleTask = 1
     }
     property url logo
     property string title: ""
@@ -21,28 +25,12 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
-    enum PageModeFlag{
-        Standard = 0,
-        SingleTop = 1,
-        SingleTask = 2
-    }
+    signal loginClicked
     id:control
     QtObject{
         id:d
-        property bool enableStack: true
-        property int displayMode: {
-            if(control.displayMode !==FluNavigationView.Auto){
-                return control.displayMode
-            }
-            if(control.width<=700){
-                return FluNavigationView.Minimal
-            }else if(control.width<=900){
-                return FluNavigationView.Compact
-            }else{
-                return FluNavigationView.Open
-            }
-        }
         property var stackItems: []
+        property int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
         property bool isCompact: d.displayMode === FluNavigationView.Compact
         property bool isMinimal: d.displayMode === FluNavigationView.Minimal
@@ -52,16 +40,6 @@ Item {
         onIsCompactAndNotPanelChanged: {
             collapseAll()
         }
-        onDisplayModeChanged: {
-            if(d.displayMode === FluNavigationView.Compact){
-                collapseAll()
-            }
-            if(d.displayMode === FluNavigationView.Minimal){
-                anim_layout_list_x.enabled = false
-                d.enableNavigationPanel = false
-                timer_anim_x_enable.restart()
-            }
-        }
         function handleItems(){
             var idx = 0
             var data = []
@@ -97,6 +75,31 @@ Item {
             return data
         }
     }
+    Component.onCompleted: {
+        d.displayMode = Qt.binding(function(){
+            if(control.displayMode !==FluNavigationView.Auto){
+                return control.displayMode
+            }
+            if(control.width<=700){
+                return FluNavigationView.Minimal
+            }else if(control.width<=900){
+                return FluNavigationView.Compact
+            }else{
+                return FluNavigationView.Open
+            }
+        })
+    }
+    Connections{
+        target: d
+        function onDisplayModeChanged(){
+            if(d.displayMode === FluNavigationView.Compact){
+                collapseAll()
+            }
+            if(d.displayMode === FluNavigationView.Minimal){
+                d.enableNavigationPanel = false
+            }
+        }
+    }
     Component{
         id:com_panel_item_empty
         Item{
@@ -204,18 +207,12 @@ Item {
                             right: parent.right
                             rightMargin: 12
                         }
-                        opacity: {
+                        visible: {
                             if(d.isCompactAndNotPanel){
                                 return false
                             }
                             return true
                         }
-                        visible:opacity
-                        Behavior on opacity {
-                            NumberAnimation{
-                                duration: 83
-                            }
-                        }
                         Behavior on rotation {
                             NumberAnimation{
                                 duration: 83
@@ -275,18 +272,12 @@ Item {
                     FluText{
                         id:item_title
                         text:model.title
-                        opacity: {
+                        visible: {
                             if(d.isCompactAndNotPanel){
                                 return false
                             }
                             return true
                         }
-                        visible:opacity
-                        Behavior on opacity {
-                            NumberAnimation{
-                                duration: 83
-                            }
-                        }
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left:item_icon.right
@@ -345,6 +336,7 @@ Item {
                         }else{
                             nav_list.currentIndex = idx
                             layout_footer.currentIndex = -1
+                            model.tap()
                             if(d.isMinimal || d.isCompact){
                                 d.enableNavigationPanel = false
                             }
@@ -355,6 +347,7 @@ Item {
                         }else{
                             nav_list.currentIndex = nav_list.count-layout_footer.count+idx
                             layout_footer.currentIndex = idx
+                            model.tap()
                             if(d.isMinimal || d.isCompact){
                                 d.enableNavigationPanel = false
                             }
@@ -429,18 +422,12 @@ Item {
                     FluText{
                         id:item_title
                         text:model.title
-                        opacity: {
+                        visible: {
                             if(d.isCompactAndNotPanel){
                                 return false
                             }
                             return true
                         }
-                        visible:opacity
-                        Behavior on opacity {
-                            NumberAnimation{
-                                duration: 83
-                            }
-                        }
                         color:{
                             if(item_control.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
@@ -475,20 +462,18 @@ Item {
                 Layout.preferredWidth: 30
                 Layout.preferredHeight: 30
                 Layout.alignment: Qt.AlignVCenter
-                disabled:  nav_swipe.depth === 1
+                disabled:  nav_swipe.depth <= 1
                 iconSize: 13
                 onClicked: {
                     nav_swipe.pop()
                     d.stackItems.pop()
                     var item = d.stackItems[d.stackItems.length-1]
-                    d.enableStack = false
                     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)
                     }
                     nav_list.currentIndex = item.idx
-                    d.enableStack = true
                 }
             }
             FluIconButton{
@@ -498,11 +483,18 @@ Item {
                 Layout.preferredWidth: d.isMinimal ? 30 : 0
                 Layout.preferredHeight: 30
                 Layout.alignment: Qt.AlignVCenter
+                clip: true
                 onClicked: {
                     d.enableNavigationPanel = !d.enableNavigationPanel
                 }
-                visible: d.isMinimal
-                Behavior on Layout.preferredWidth{
+                visible: opacity
+                opacity: d.isMinimal
+                Behavior on opacity{
+                    NumberAnimation{
+                        duration: 83
+                    }
+                }
+                Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
                         easing.type: Easing.BezierSpline
@@ -523,6 +515,12 @@ Item {
                 }
                 sourceSize: Qt.size(40,40)
                 Layout.alignment: Qt.AlignVCenter
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        loginClicked()
+                    }
+                }
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
@@ -549,11 +547,26 @@ Item {
     }
     Item{
         anchors{
-            left: d.isMinimal || d.isCompactAndPanel  ? parent.left : layout_list.right
+            left: parent.left
             top: nav_app_bar.bottom
             right: parent.right
             bottom: parent.bottom
-            leftMargin: d.isCompactAndPanel ? 50 : 0
+            leftMargin: {
+                if(d.isMinimal){
+                    return 0
+                }
+                if(d.isCompact){
+                    return 50
+                }
+                return 300
+            }
+        }
+        Behavior on anchors.leftMargin {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
         }
         StackView{
             id:nav_swipe
@@ -588,11 +601,12 @@ Item {
     MouseArea{
         anchors.fill: parent
         visible: d.isMinimalAndPanel||d.isCompactAndPanel
+        onWheel: {
+        }
         onClicked: {
             d.enableNavigationPanel = false
         }
     }
-
     Rectangle{
         id:layout_list
         width: {
@@ -601,21 +615,6 @@ Item {
             }
             return 300
         }
-        Behavior on width{
-            NumberAnimation{
-                duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
-            }
-        }
-        Behavior on x{
-            id:anim_layout_list_x
-            NumberAnimation{
-                duration: 167
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: [ 0, 0, 0, 1 ]
-            }
-        }
         anchors{
             top: parent.top
             bottom: parent.bottom
@@ -628,7 +627,22 @@ Item {
             }
             return "transparent"
         }
+        clip: true
         x: visible ? 0 : -width
+        Behavior on width {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
+        }
+        Behavior on x {
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: [ 0, 0, 0, 1 ]
+            }
+        }
         visible: {
             if(d.displayMode !== FluNavigationView.Minimal)
                 return true
@@ -658,27 +672,15 @@ Item {
                 id:loader_auto_suggest_box
                 anchors.centerIn: parent
                 sourceComponent: autoSuggestBox
-                opacity: {
+                visible: {
                     if(d.isCompactAndNotPanel){
                         return false
                     }
                     return true
                 }
-                visible: opacity
-                Behavior on opacity{
-                    NumberAnimation{
-                        duration: 83
-                    }
-                }
             }
             FluIconButton{
-                visible:opacity
-                opacity:d.isCompactAndNotPanel
-                Behavior on opacity{
-                    NumberAnimation{
-                        duration: 83
-                    }
-                }
+                visible:d.isCompactAndNotPanel
                 hoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
                 pressedColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
                 normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
@@ -718,15 +720,6 @@ Item {
                     }
                 }
             }
-            onCurrentIndexChanged: {
-                if(d.enableStack){
-                    var item = model[currentIndex]
-                    if(item instanceof FluPaneItem){
-                        item.tap()
-                        d.stackItems.push(item)
-                    }
-                }
-            }
             currentIndex: -1
             anchors{
                 top: layout_header.bottom
@@ -771,15 +764,6 @@ Item {
                     return footerItems.children
                 }
             }
-            onCurrentIndexChanged: {
-                if(d.enableStack){
-                    var item = model[currentIndex]
-                    if(item instanceof FluPaneItem){
-                        item.tap()
-                        d.stackItems.push(item)
-                    }
-                }
-            }
             highlightMoveDuration: 150
             highlight: Item{
                 clip: true
@@ -861,6 +845,7 @@ Item {
                         if(modelData.tapFunc){
                             modelData.tapFunc()
                         }else{
+                            modelData.tap()
                             nav_list.currentIndex = idx
                             layout_footer.currentIndex = -1
                             if(d.isMinimal || d.isCompact){
@@ -889,13 +874,6 @@ Item {
             control_popup.open()
         }
     }
-    Timer{
-        id:timer_anim_x_enable
-        interval: 150
-        onTriggered: {
-            anim_layout_list_x.enabled = true
-        }
-    }
     function collapseAll(){
         for(var i=0;i<nav_list.model.length;i++){
             var item = nav_list.model[i]
@@ -906,44 +884,43 @@ Item {
     }
     function setCurrentIndex(index){
         nav_list.currentIndex = index
-
+        var item = nav_list.model[index]
+        if(item instanceof FluPaneItem){
+            item.tap()
+        }
     }
     function getItems(){
         return nav_list.model
     }
     function push(url,argument={}){
-        if (nav_swipe.depth>0)
-        {
-            let page = nav_swipe.find(function(item) {
-                return item.url === url;
-            })
-            if (page)
+        if(nav_swipe.currentItem && nav_swipe.currentItem.url === url){
+            return
+        }
+        let page = nav_swipe.find(function(item) {
+            return item.url === url;
+        })
+        if(page){
+            switch(page.pageMode)
             {
-                switch(page.pageMode)
+            case FluNavigationView.SingleTask:
+                while(nav_swipe.currentItem !== page)
                 {
-                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:
+                    nav_swipe.pop()
+                    d.stackItems.pop()
                 }
+                return
+            case FluNavigationView.Standard:
+            default:
             }
         }
         nav_swipe.push(url,Object.assign(argument,{url:url}))
+        d.stackItems.push(nav_list.model[nav_list.currentIndex])
     }
     function getCurrentIndex(){
         return nav_list.currentIndex
     }
     function startPageByItem(data){
-        var items = getItems();
+        var items = getItems()
         for(var i=0;i<items.length;i++){
             var item =  items[i]
             if(item.key === data.key){

src/imports/FluentUI/Controls/FluRadioButton.qml

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

src/imports/FluentUI/Controls/FluRemoteLoader.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item {
+    id:control
+    property url source: ""
+
+    Loader{
+        id:loader
+        anchors.fill: parent
+        source: control.source
+        asynchronous: true
+    }
+
+    FluProgressRing{
+        anchors.centerIn: parent
+        visible: loader.status === Loader.Loading
+    }
+
+    function reload(){
+        var timestamp = Date.now();
+        loader.source = control.source+"?"+timestamp
+    }
+
+}

src/imports/FluentUI/Controls/FluStatusView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts
 import FluentUI
 
 Item{
+    id:control
     enum StatusMode  {
         Loading,
         Empty,
@@ -80,7 +81,7 @@ Item{
                 Layout.alignment: Qt.AlignHCenter
                 text:"重新加载"
                 onClicked:{
-                    errorClicked.call()
+                    control.errorClicked()
                 }
             }
         }