update

example/qml/window/MainWindow.qml

@@ -76,8 +76,59 @@ CustomWindow {
         }
     }
 
+    Flipable{
+        id:flipable
+        anchors.fill: parent
+        property bool flipped: false
+        transform: Rotation {
+            id: rotation
+            origin.x: flipable.width/2
+            origin.y: flipable.height/2
+            axis { x: 0; y: 1; z: 0 }
+            angle: 0
+
+        }
+        states: State {
+            name: "back"
+            PropertyChanges { target: rotation; angle: 180 }
+            when: flipable.flipped
+        }
+        transitions: Transition {
+            NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
+        }
+        back: Item{
+            anchors.fill: flipable
+            visible: rotation.angle !== 0
+            FluAppBar {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                darkText: lang.dark_mode
+                showDark: true
+                z:7
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeBack
+                width: 30
+                height: 30
+                iconSize: 13
+                z:8
+                onClicked: {
+                    flipable.flipped = false
+                }
+            }
+            FluText{
+                font: FluTextStyle.Title
+                text:"建设中..."
+                anchors.centerIn: parent
+            }
+        }
+        front: Item{
+            visible: rotation.angle !== 180
+            anchors.fill: flipable
             FluAppBar {
-        id: title_bar
                 anchors {
                     top: parent.top
                     left: parent.left
@@ -87,8 +138,8 @@ CustomWindow {
                 showDark: true
                 z:7
             }
-
             FluNavigationView{
+                property int clickCount: 0
                 id:nav_view
                 width: parent.width
                 height: parent.height
@@ -99,6 +150,19 @@ 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 === 5){
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
                 autoSuggestBox:FluAutoSuggestBox{
                     width: 280
                     anchors.centerIn: parent
@@ -117,3 +181,5 @@ CustomWindow {
                 }
             }
         }
+    }
+}

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

@@ -25,6 +25,7 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
+    signal loginClicked
     id:control
     QtObject{
         id:d
@@ -514,6 +515,12 @@ Item {
                 }
                 sourceSize: Qt.size(40,40)
                 Layout.alignment: Qt.AlignVCenter
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        loginClicked()
+                    }
+                }
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter

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