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,1)
+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,7 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 import FluentUI
 
 FluScrollablePage{

example/qml/page/T_InfoBar.qml

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

example/qml/page/T_MediaPlayer.qml

@@ -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,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage {
 
@@ -18,14 +18,11 @@ FluScrollablePage{
         Column {
             spacing: 10
             anchors.verticalCenter: parent.verticalCenter
-            FluRatingControl{
-
-            }
+            FluRatingControl {}
             FluRatingControl {
                 number: 10
             }
         }
-
     }
 
     CodeExpander {
@@ -35,6 +32,4 @@ FluScrollablePage{
 
 }'
     }
-
-
 }

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,8 +76,30 @@ CustomWindow {
         }
     }
 
+    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 {
-        id: title_bar
                 anchors {
                     top: parent.top
                     left: parent.left
@@ -86,16 +108,57 @@ CustomWindow {
                 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()
+                    }
+                }
             }
 
-    FluNavigationView{
-        id:nav_view
+            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
-            bottom: parent.bottom
                 }
+                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
@@ -103,6 +166,20 @@ CustomWindow {
                 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
@@ -121,3 +198,102 @@ CustomWindow {
                 }
             }
         }
+    }
+
+    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
+            }
+        }
+        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();
+        }
+    }
+
+    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,1)
+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/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/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/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,10 @@ import FluentUI
 
 Item {
     enum DisplayMode {
-        Open,
-        Compact,
-        Minimal,
-        Auto
+        Open = 0,
+        Compact = 1,
+        Minimal = 2,
+        Auto = 3
     }
     enum PageModeFlag{
         Standard = 0,
@@ -25,22 +25,12 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
+    signal loginClicked
     id:control
     QtObject{
         id:d
         property var stackItems: []
-        property int displayMode: {
-            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 int displayMode: FluNavigationView.Open
         property bool enableNavigationPanel: false
         property bool isCompact: d.displayMode === FluNavigationView.Compact
         property bool isMinimal: d.displayMode === FluNavigationView.Minimal
@@ -50,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 = []
@@ -95,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{
@@ -202,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
@@ -273,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
@@ -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
@@ -496,10 +483,17 @@ Item {
                 Layout.preferredWidth: d.isMinimal ? 30 : 0
                 Layout.preferredHeight: 30
                 Layout.alignment: Qt.AlignVCenter
+                clip: true
                 onClicked: {
                     d.enableNavigationPanel = !d.enableNavigationPanel
                 }
-                visible: d.isMinimal
+                visible: opacity
+                opacity: d.isMinimal
+                Behavior on opacity{
+                    NumberAnimation{
+                        duration: 83
+                    }
+                }
                 Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
@@ -521,6 +515,12 @@ Item {
                 }
                 sourceSize: Qt.size(40,40)
                 Layout.alignment: Qt.AlignVCenter
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        loginClicked()
+                    }
+                }
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
@@ -547,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
@@ -586,11 +601,12 @@ Item {
     MouseArea{
         anchors.fill: parent
         visible: d.isMinimalAndPanel||d.isCompactAndPanel
+        onWheel: {
+        }
         onClicked: {
             d.enableNavigationPanel = false
         }
     }
-
     Rectangle{
         id:layout_list
         width: {
@@ -599,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
@@ -626,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
@@ -656,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)
@@ -870,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]

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()
                 }
             }
         }