update

example/AboutPage.qml

@@ -34,7 +34,7 @@ FluWindow {
                 fontStyle: FluText.Title
             }
             FluText{
-                text:"v1.0.2"
+                text:"v1.0.3"
                 fontStyle: FluText.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/MainPage.qml

@@ -17,184 +17,164 @@ FluWindow {
     FluAppBar{
         id:appbar
         title: "FluentUI"
-        showDark: true
     }
 
-    ListModel{
+
-        id:nav_items
+    FluObject{
-        ListElement{
+        id:original_items
-            text:"Buttons"
+
-            page:"qrc:/T_Buttons.qml"
+        FluPaneItemHeader{
+            title:"Inputs"
         }
-        ListElement{
+
-            text:"TextBox"
+        FluPaneItem{
-            page:"qrc:/T_TextBox.qml"
+            title:"Buttons"
-        }
+            onTap:{
-        ListElement{
+                nav_view.push("qrc:/T_Buttons.qml")
-            text:"ToggleSwitch"
-            page:"qrc:/T_ToggleSwitch.qml"
-        }
-        ListElement{
-            text:"Slider"
-            page:"qrc:/T_Slider.qml"
-        }
-        ListElement{
-            text:"InfoBar"
-            page:"qrc:/T_InfoBar.qml"
-        }
-        ListElement{
-            text:"Dialog"
-            page:"qrc:/T_Dialog.qml"
-        }
-        ListElement{
-            text:"Progress"
-            page:"qrc:/T_Progress.qml"
-        }
-        ListElement{
-            text:"Rectangle"
-            page:"qrc:/T_Rectangle.qml"
-        }
-        ListElement{
-            text:"Expander"
-            page:"qrc:/T_Expander.qml"
-        }
-        ListElement{
-            text:"TreeView"
-            page:"qrc:/T_TreeView.qml"
-        }
-        ListElement{
-            text:"Theme"
-            page:"qrc:/T_Theme.qml"
-        }
-        ListElement{
-            text:"Awesome"
-            page:"qrc:/T_Awesome.qml"
-        }
-        ListElement{
-            text:"Typography"
-            page:"qrc:/T_Typography.qml"
             }
         }
 
-    FluIconButton{
+        FluPaneItem{
-        icon:FluentIcons.FA_navicon
+            title:"Slider"
-        anchors{
+            onTap:{
-            left: parent.left
+                nav_view.push("qrc:/T_Slider.qml")
-            bottom: parent.bottom
-            leftMargin: 12
-            bottomMargin: 12
             }
-        FluMenu{
+        }
-            id:menu
+
-            x:40
+        FluPaneItem{
-            margins:4
+            title:"ToggleSwitch"
-            FluMenuItem{
+            onTap:{
-                text:"意见反馈"
+                nav_view.push("qrc:/T_ToggleSwitch.qml")
-                onClicked:{
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Form"
+        }
+
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                nav_view.push("qrc:/T_TextBox.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Surface"
+        }
+
+        FluPaneItem{
+            title:"InfoBar"
+            onTap:{
+                nav_view.push("qrc:/T_InfoBar.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                nav_view.push("qrc:/T_Progress.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                nav_view.push("qrc:/T_Rectangle.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                nav_view.push("qrc:/T_Expander.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Popus"
+        }
+
+
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                nav_view.push("qrc:/T_Dialog.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Navigation"
+        }
+
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                nav_view.push("qrc:/T_TreeView.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Theming"
+        }
+
+
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                nav_view.push("qrc:/T_Theme.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                nav_view.push("qrc:/T_Awesome.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                nav_view.push("qrc:/T_Typography.qml")
+            }
+        }
+
+    }
+
+    FluObject{
+        id:footer_items
+        FluPaneItemSeparator{}
+        FluPaneItem{
+            title:"意见反馈"
+            onTap:{
                 Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
             }
         }
-            FluMenuItem{
+        FluPaneItem{
-                text:"关于"
+            title:"关于"
-                onClicked:{
+            onTap:{
                 FluApp.navigate("/About")
             }
         }
     }
-        onClicked:{
-            menu.open()
-        }
-    }
 
-    ListView{
+
-        id:nav_list
+    FluNavigationView{
+        id:nav_view
         anchors{
             top: appbar.bottom
-            bottom: parent.bottom
-            topMargin: 20
-            bottomMargin: 52
-        }
-        ScrollBar.vertical: ScrollBar { }
-        boundsBehavior: Flickable.StopAtBounds
-        clip: true
-        width: 160
-        model: nav_items
-        delegate: Item{
-            height: 38
-            width: nav_list.width
-
-            Rectangle{
-                radius: 4
-                anchors{
-                    top: parent.top
-                    bottom: parent.bottom
             left: parent.left
             right: parent.right
-                    topMargin: 2
-                    bottomMargin: 2
-                    leftMargin: 6
-                    rightMargin: 6
-                }
-                MouseArea{
-                    id:item_mouse
-                    hoverEnabled: true
-                    anchors.fill: parent
-                    onClicked: {
-                        nav_list.currentIndex = index
-                    }
-                }
-                color: {
-                    if(FluTheme.isDark){
-                        if(nav_list.currentIndex === index){
-                            return "#2D2D2D"
-                        }
-                        if(item_mouse.containsMouse){
-                            return "#292929"
-                        }
-                        return "#202020"
-                    }else{
-                        if(item_mouse.containsMouse){
-                            return Qt.rgba(0,0,0,0.03)
-                        }
-                        if(nav_list.currentIndex === index){
-                            return Qt.rgba(0,0,0,0.06)
-                        }
-                        return Qt.rgba(0,0,0,0)
-                    }
-                }
-
-                FluText{
-                    text:model.text
-                    anchors.centerIn: parent
-                }
-
-            }
-        }
-    }
-
-    Rectangle{
-        color: FluTheme.isDark ? "#323232" : "#FFFFFF"
-        radius: 10
-        clip: true
-        anchors{
-            left: nav_list.right
-            leftMargin: 2
-            top: appbar.bottom
-            topMargin: 20
-            right: parent.right
-            rightMargin: 10
             bottom: parent.bottom
-            bottomMargin: 20
         }
-        border.width: 1
+        items:original_items
-        border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
+        footerItems:footer_items
 
-        Loader{
+        Component.onCompleted: {
-            anchors.fill: parent
+            nav_view.setCurrentIndex(1)
-            anchors.margins:20
+            nav_view.push("qrc:/T_Buttons.qml")
-            source: nav_items.get(nav_list.currentIndex).page
         }
 
+
     }
 
+
 }

example/T_Awesome.qml

@@ -4,20 +4,19 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 
-Item {
+FluContentPage {
-    FluText{
+
-        id:title
+    title:"Awesome"
-        text:"Awesome"
+
-        fontStyle: FluText.TitleLarge
-    }
     FluTextBox{
         id:text_box
         placeholderText: "请输入关键字"
         anchors{
             topMargin: 20
-            top:title.bottom
+            top:parent.top
         }
     }
+
     FluFilledButton{
         text:"搜索"
         anchors{

example/T_Buttons.qml

@@ -2,39 +2,35 @@
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    width: parent.width
+    title:"Buttons"
-    FluText{
+
-        id:title
+    spacing: 20
-        text:"Buttons"
+
-        fontStyle: FluText.TitleLarge
+    FluArea{
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
-            width: parent.width
-            RowLayout{
         Layout.topMargin: 20
         width: parent.width
+        height: 68
+        paddings: 10
+
         FluButton{
             disabled:button_switch.checked
             onClicked: {
                 showInfo("点击StandardButton")
             }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
             }
-                Item{
+        }
-                    height: 1
+
-                    Layout.fillWidth: true
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
             FluToggleSwitch{
                 id:button_switch
@@ -44,21 +40,29 @@ Item {
                 text:"Disabled"
             }
         }
-            FluDivider{
-                Layout.fillWidth: true ; height:1;
     }
-            RowLayout{
+
-                Layout.topMargin: 20
+    FluArea{
         width: parent.width
+        height: 68
+        paddings: 10
+
         FluFilledButton{
             disabled:filled_button_switch.checked
-                    onClicked:{
+            onClicked: {
               showWarning("点击FilledButton")
             }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
             }
-                Item{
+        }
-                    height: 1
+
-                    Layout.fillWidth: true
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
             FluToggleSwitch{
                 id:filled_button_switch
@@ -68,22 +72,31 @@ Item {
                 text:"Disabled"
             }
         }
-            FluDivider{
-                Layout.fillWidth: true ; height:1
     }
-            RowLayout{
+
-                Layout.topMargin: 20
+
+    FluArea{
         width: parent.width
+        height: 68
+        paddings: 10
+
         FluIconButton{
             icon:FluentIcons.FA_close
             disabled:icon_button_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
             onClicked:{
                 showSuccess("点击IconButton")
             }
         }
-                Item{
+
-                    height: 1
+        Row{
-                    Layout.fillWidth: true
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
             FluToggleSwitch{
                 id:icon_button_switch
@@ -93,14 +106,19 @@ Item {
                 text:"Disabled"
             }
         }
-            FluDivider{
-                Layout.fillWidth: true ; height:1
     }
-            RowLayout{
+
-                Layout.topMargin: 20
+    FluArea{
         width: parent.width
+        height: 100
+        paddings: 10
+
         ColumnLayout{
             spacing: 8
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
             Repeater{
                 id:repeater
                 property int selecIndex : 0
@@ -115,9 +133,13 @@ Item {
                 }
             }
         }
-                Item{
+
-                    height: 1
+
-                    Layout.fillWidth: true
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
             FluToggleSwitch{
                 id:radio_button_switch
@@ -127,18 +149,28 @@ Item {
                 text:"Disabled"
             }
         }
-            FluDivider{
-                Layout.fillWidth: true ; height:1
     }
-            RowLayout{
+
-                Layout.topMargin: 20
+
+    FluArea{
         width: parent.width
+        height: 68
+        paddings: 10
+
         FluCheckBox{
             disabled:icon_button_check.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
             }
-                Item{
+        }
-                    height: 1
+
-                    Layout.fillWidth: true
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
             FluToggleSwitch{
                 id:icon_button_check
@@ -148,9 +180,5 @@ Item {
                 text:"Disabled"
             }
         }
-            FluDivider{
-                Layout.fillWidth: true ; height:1
-            }
-        }
     }
 }

example/T_Dialog.qml

@@ -5,13 +5,8 @@ import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-
+    title:"Dialog"
-    FluText{
-        id:title
-       text:"Dialog"
-        fontStyle: FluText.TitleLarge
-    }
 
     FluContentDialog{
         id:dialog
@@ -27,18 +22,6 @@ Item {
         }
     }
 
-
-
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
     FluButton{
         Layout.topMargin: 20
         text:"Show Dialog"
@@ -46,6 +29,4 @@ Item {
             dialog.open()
         }
     }
-        }
-    }
 }

example/T_Expander.qml

@@ -5,28 +5,12 @@ import QtQuick.Window 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+    title:"Expander"
-        id:title
+
-        text:"Expander"
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        Column{
-            spacing: 5
-            Item{
-                width: 1
-                height: 20
-            }
     FluExpander{
         headerText:"打开一个单选框"
+        Layout.topMargin: 20
         Item{
             anchors.fill: parent
             ColumnLayout{
@@ -73,6 +57,4 @@ Item {
             }
         }
     }
-        }
-    }
 }

example/T_InfoBar.qml

@@ -5,22 +5,8 @@ import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+    title:"InfoBar"
-        id:title
-        text:"InfoBar"
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
 
     FluButton{
         text:"Info"
@@ -50,6 +36,4 @@ Item {
             showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
         }
     }
-        }
-    }
 }

example/T_Progress.qml

@@ -5,22 +5,9 @@ import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+    title:"Progress"
-        id:title
+
-        text:"Progress"
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
     FluProgressBar{
         Layout.topMargin: 20
     }
@@ -46,6 +33,4 @@ Item {
         }
         Layout.bottomMargin: 30
     }
-        }
-    }
 }

example/T_Rectangle.qml

@@ -5,24 +5,9 @@ import QtQuick.Window 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+    title:"Rectangle"
-        id:title
+
-        text:"Rectangle"
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
-            width: parent.width
-            height: parent.height
     RowLayout{
         Layout.topMargin: 20
         FluRectangle{
@@ -126,6 +111,4 @@ Item {
         }
         Layout.topMargin: 10
     }
-        }
-    }
 }

example/T_Slider.qml

@@ -5,22 +5,10 @@ import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+
-        id:title
+    title:"Slider"
-        text:"Slider"
+
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
     FluSlider{
         Layout.topMargin: 20
         Layout.leftMargin: 15
@@ -32,6 +20,4 @@ Item {
         Layout.leftMargin: 15
         value: 50
     }
-        }
-    }
 }

example/T_TextBox.qml

@@ -5,22 +5,10 @@ import QtQuick.Window 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+
-        id:title
+    title:"TextBox"
-        text:"TextBox"
+
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
     FluTextBox{
         Layout.topMargin: 20
         placeholderText: "单行输入框"
@@ -37,8 +25,6 @@ Item {
         placeholderText: "AutoSuggestBox"
         Layout.preferredWidth: 300
     }
-        }
-    }
 
     function generateRandomNames(numNames) {
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

example/T_Theme.qml

@@ -5,22 +5,10 @@ import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+
-        id:title
+    title:"Theme"
-        text:"Theme"
+
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
     RowLayout{
         Layout.topMargin: 20
         Repeater{
@@ -70,6 +58,4 @@ Item {
             FluTheme.isFrameless = !FluTheme.isFrameless
         }
     }
-        }
-    }
 }

example/T_ToggleSwitch.qml

@@ -5,26 +5,11 @@ import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluScrollablePage{
-    FluText{
+
-        id:title
+    title:"ToggleSwitch"
-        text:"ToggleSwitch"
+
-        fontStyle: FluText.TitleLarge
-    }
-    ScrollView{
-        clip: true
-        width: parent.width
-        contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
-        ColumnLayout{
-            spacing: 5
     FluToggleSwitch{
         Layout.topMargin: 20
     }
-        }
-
-    }
 }

example/T_TreeView.qml

@@ -2,15 +2,11 @@
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Item {
+FluContentPage {
-    FluText{
+
-        id:title
+    title:"TreeView"
-        text:"TreeView"
-        fontStyle: FluText.TitleLarge
-    }
 
     function randomName() {
         var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
@@ -56,7 +52,7 @@ Item {
         id:tree_view
         width:240
         anchors{
-            top:title.bottom
+            top:parent.top
             left:parent.left
             bottom:parent.bottom
         }

example/T_Typography.qml

@@ -3,24 +3,15 @@ import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 
-Item {
+FluContentPage {
 
+    title: "Typography"
     property int textSize: 13
 
-    FluText{
-        id:title
-        text:"Typography"
-        fontStyle: FluText.TitleLarge
-    }
-
     ScrollView{
         clip: true
         width: parent.width
         contentWidth: parent.width
-        anchors{
-            top: title.bottom
-            bottom: parent.bottom
-        }
         ColumnLayout{
             spacing: 0
             FluText{

example/qml.qrc

@@ -3,7 +3,6 @@
         <file>T_ToggleSwitch.qml</file>
         <file>T_Typography.qml</file>
         <file>App.qml</file>
-        <file>MainPage.qml</file>
         <file>SettingPage.qml</file>
         <file>AboutPage.qml</file>
         <file>T_Buttons.qml</file>
@@ -30,5 +29,6 @@
         <file>T_Dialog.qml</file>
         <file>T_TreeView.qml</file>
         <file>T_Expander.qml</file>
+        <file>MainPage.qml</file>
     </qresource>
 </RCC>

src/Fluent.cpp

@@ -33,6 +33,15 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
     qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
 
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
+
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluContentPage.qml"),uri,major,minor,"FluContentPage");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollablePage.qml"),uri,major,minor,"FluScrollablePage");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemHeader.qml"),uri,major,minor,"FluPaneItemHeader");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItem.qml"),uri,major,minor,"FluPaneItem");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemSeparator.qml"),uri,major,minor,"FluPaneItemSeparator");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluNavigationView.qml"),uri,major,minor,"FluNavigationView");
+
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAutoSuggestBox.qml"),uri,major,minor,"FluAutoSuggestBox");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluExpander.qml"),uri,major,minor,"FluExpander");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTreeView.qml"),uri,major,minor,"FluTreeView");

src/controls/FluAppBar.qml

@@ -14,7 +14,8 @@ Rectangle{
         return Window.window.active ? borerlessColor : Qt.lighter(borerlessColor,1.1)
     }
     visible: FluTheme.isFrameless
-    height: visible ? 50 : 0
+    height: visible ? 34 : 0
+
     width: {
         if(parent==null)
             return 200
@@ -60,7 +61,7 @@ Rectangle{
         anchors{
             verticalCenter: parent.verticalCenter
             left: parent.left
-            leftMargin: 14
+            leftMargin: 10
         }
         color:root.textColor
         fontStyle: FluText.Title
@@ -69,14 +70,13 @@ Rectangle{
     }
 
     RowLayout{
-        anchors.right: parent.right;
+        anchors.right: parent.right
-        anchors.rightMargin: 10
+        height: 30
-        height: parent.height
+        spacing: 0
-        spacing: 5
 
         TFpsMonitor{
             Layout.alignment: Qt.AlignVCenter
-            Layout.rightMargin: 12
+            Layout.rightMargin: 20
             Layout.topMargin: 5
             color:root.textColor
             visible: showFps
@@ -84,8 +84,9 @@ Rectangle{
 
         RowLayout{
             Layout.alignment: Qt.AlignVCenter
-            spacing: 5
+            Layout.rightMargin: 14
             visible: showDark
+            spacing: 5
             FluText{
                 text:"夜间模式"
                 color:root.textColor

src/controls/FluArea.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+Rectangle {
+    radius: 4
+    color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+    border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+    border.width: 1
+    implicitHeight: height
+    implicitWidth: width
+
+    default property alias content: container.data
+    property int paddings : 0
+    property int leftPadding : 0
+    property int rightPadding : 0
+    property int topPadding : 0
+    property int bottomPadding : 0
+
+    Item {
+        id: container
+        anchors.fill: parent
+        anchors.leftMargin: Math.max(paddings,leftPadding)
+        anchors.rightMargin: Math.max(paddings,rightPadding)
+        anchors.topMargin: Math.max(paddings,topPadding)
+        anchors.bottomMargin: Math.max(paddings,bottomPadding)
+    }
+
+}

src/controls/FluContentPage.qml

@@ -0,0 +1,29 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+Item {
+
+    id:root
+
+    property alias title: text_title.text
+    default property alias content: container.data
+
+    FluText{
+        id:text_title
+        fontStyle: FluText.TitleLarge
+    }
+
+    Item{
+        clip: true
+        id:container
+        anchors{
+            top: text_title.bottom
+            bottom: parent.bottom
+        }
+        width: parent.width
+    }
+
+}

src/controls/FluExpander.qml

@@ -10,6 +10,8 @@ Item {
     id:root
     height: layout_header.height + container.height
     width: 400
+    implicitWidth: width
+    implicitHeight: height
 
     property int contentHeight : 300
 

src/controls/FluIconButton.qml

@@ -14,9 +14,9 @@ Rectangle {
     property bool disabled: false
     property bool hovered: button_mouse.containsMouse
 
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
-    property color normalColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1)
+    property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(1,1,1,1)
+    property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
 
     property color textColor: {
         if(FluTheme.isDark){

src/controls/FluNavigationView.qml

@@ -0,0 +1,341 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import FluentUI 1.0
+
+Item {
+
+    id:root
+
+    property FluObject items
+    property FluObject footerItems
+
+    property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
+
+    property bool displaMinimalNav : false
+
+    onDisplayModeChanged: {
+        if(displayMode === FluNavigationView.Minimal){
+            anim_navi.enabled = false
+            displaMinimalNav = false
+            timer_anim_enable.restart()
+        }
+    }
+
+    Timer{
+        id:timer_anim_enable
+        interval: 150
+        onTriggered: {
+            anim_navi.enabled = true
+        }
+    }
+
+    enum DisplayMode {
+        Minimal,
+        Open,
+        Auto
+    }
+
+    property var window : {
+        if(Window.window == null)
+            return null
+        return Window.window
+    }
+
+    Component{
+        id:com_panel_item_separatorr
+        FluDivider{
+            width: nav_list.width
+            height: 1
+        }
+    }
+
+    Component{
+        id:com_panel_item_header
+        Item{
+            height: 30
+            width: nav_list.width
+            FluText{
+                text:model.title
+                fontStyle: FluText.BodyStrong
+                anchors{
+                    bottom: parent.bottom
+                    left:parent.left
+                    leftMargin: 10
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_panel_item
+        Item{
+            height: 38
+            width: nav_list.width
+
+            Rectangle{
+                radius: 4
+                anchors{
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    topMargin: 2
+                    bottomMargin: 2
+                    leftMargin: 6
+                    rightMargin: 6
+                }
+                MouseArea{
+                    id:item_mouse
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        if(type===0){
+                            model.repTap()
+                            if(nav_list.currentIndex !== position){
+                                nav_list.currentIndex = position
+                                model.tap()
+                            }
+                        }else{
+                            model.tap()
+                        }
+                    }
+                }
+                color: {
+                    if(FluTheme.isDark){
+                        if((nav_list.currentIndex === position)&&type===0){
+                            return "#2D2D2D"
+                        }
+                        if(item_mouse.containsMouse){
+                            return "#292929"
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }else{
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(0,0,0,0.03)
+                        }
+                        if(nav_list.currentIndex === position&&type===0){
+                            return Qt.rgba(0,0,0,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }
+                }
+
+                FluText{
+                    text:model.title
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:parent.left
+                        leftMargin: 14
+                    }
+                }
+            }
+        }
+    }
+
+
+    Item {
+        id:nav_app_bar
+        width: parent.width
+        height: 38
+
+        RowLayout{
+            height:parent.height
+            spacing: 0
+            FluIconButton{
+                icon: FluentIcons.FA_arrow_left
+                Layout.leftMargin: 5
+                Layout.alignment: Qt.AlignVCenter
+                disabled:  nav_swipe.depth === 1
+                onClicked: {
+                    nav_swipe.pop()
+                    nav_list.stackIndex.pop()
+                    var index = nav_list.stackIndex[nav_list.stackIndex.length-1]
+                    nav_list.enableStack = false
+                    nav_list.currentIndex = index
+                    nav_list.enableStack = true
+                }
+            }
+            FluIconButton{
+                icon: FluentIcons.FA_navicon
+                Layout.leftMargin: 5
+                visible: displayMode === FluNavigationView.Minimal
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: {
+                    displaMinimalNav = !displaMinimalNav
+                }
+            }
+        }
+
+
+        RowLayout{
+            anchors{
+                right: parent.right
+                rightMargin: 14
+                verticalCenter: parent.verticalCenter
+            }
+            spacing: 5
+            FluText{
+                text:"夜间模式"
+                fontStyle: FluText.Body
+            }
+            FluToggleSwitch{
+                checked: FluTheme.isDark
+                onClickFunc:function(){
+                    FluTheme.isDark = !FluTheme.isDark
+                }
+            }
+        }
+    }
+
+    Item{
+        anchors{
+            left: displayMode === FluNavigationView.Minimal ? parent.left : layout_list.right
+            leftMargin: 2
+            top: nav_app_bar.bottom
+            right: parent.right
+            rightMargin: 10
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+
+        StackView{
+            id:nav_swipe
+            anchors.fill: parent
+            clip: true
+            anchors.margins: 10
+            popEnter : Transition{}
+            popExit : Transition{}
+            pushEnter : Transition{}
+            pushExit : Transition{}
+            replaceEnter : Transition{}
+            replaceExit : Transition{}
+        }
+    }
+
+    MouseArea{
+        anchors.fill: parent
+        enabled: (displayMode === FluNavigationView.Minimal && displaMinimalNav)
+        onClicked: {
+            displaMinimalNav = false
+        }
+    }
+
+    Rectangle{
+        id:layout_list
+        width: 300
+        anchors{
+            top: nav_app_bar.bottom
+            bottom: parent.bottom
+        }
+        x: {
+            if(displayMode !== FluNavigationView.Minimal)
+                return 0
+            return (displayMode === FluNavigationView.Minimal && displaMinimalNav)  ? 0 : -width
+        }
+        Behavior on x{
+            id:anim_navi
+            NumberAnimation{
+                duration: 150
+            }
+        }
+        color: {
+            if(displayMode === FluNavigationView.Minimal){
+                return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            }
+            if(window && window.active){
+                return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+            }
+            return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+        }
+        Behavior on color{
+            ColorAnimation {
+                duration: 300
+            }
+        }
+        ListView{
+            id:nav_list
+            property bool enableStack: true
+            property var stackIndex: []
+            clip: true
+            anchors{
+                top: parent.top
+                left: parent.left
+                right: parent.right
+                bottom: layout_footer.top
+            }
+            currentIndex: -1
+            onCurrentIndexChanged: {
+                if(enableStack){
+                    stackIndex.push(currentIndex)
+                }
+            }
+            model:{
+                if(items){
+                    return items.children
+                }
+            }
+            boundsBehavior: ListView.StopAtBounds
+            delegate: Loader{
+                property var model: modelData
+                property var position: index
+                property int type: 0
+                sourceComponent: {
+                    if(modelData instanceof FluPaneItem){
+                        return com_panel_item
+                    }
+                    if(modelData instanceof FluPaneItemHeader){
+                        return com_panel_item_header
+                    }
+                    if(modelData instanceof FluPaneItemSeparator){
+                        return com_panel_item_separatorr
+                    }
+                }
+            }
+        }
+
+        ListView{
+            id:layout_footer
+            width: layout_list.width
+            height: childrenRect.height
+            anchors.bottom: parent.bottom
+            boundsBehavior: ListView.StopAtBounds
+            model: {
+                if(footerItems){
+                    return footerItems.children
+                }
+            }
+            currentIndex: -1
+            delegate: Loader{
+                property var model: modelData
+                property var position: index
+                property int type: 1
+                sourceComponent: {
+                    if(modelData instanceof FluPaneItem){
+                        return com_panel_item
+                    }
+                    if(modelData instanceof FluPaneItemHeader){
+                        return com_panel_item_header
+                    }
+                    if(modelData instanceof FluPaneItemSeparator){
+                        return com_panel_item_separatorr
+                    }
+                }
+            }
+        }
+
+    }
+
+
+
+    function push(url){
+        nav_swipe.push(url)
+    }
+
+    function setCurrentIndex(index){
+        nav_list.currentIndex = index
+    }
+
+}

src/controls/FluPaneItem.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.15
+
+QtObject {
+    property string title
+    signal tap
+    signal repTap
+}

src/controls/FluPaneItemHeader.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+QtObject {
+    property string title
+}

src/controls/FluPaneItemSeparator.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+QtObject {
+
+}

src/controls/FluScrollablePage.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+Item {
+
+    id:root
+
+    property alias title: text_title.text
+    default property alias content: container.data
+    property int spacing : 5
+
+    FluText{
+        id:text_title
+        fontStyle: FluText.TitleLarge
+    }
+
+    ScrollView{
+        clip: true
+        width: parent.width
+        contentWidth: parent.width
+        anchors{
+            top: text_title.bottom
+            bottom: parent.bottom
+        }
+        ColumnLayout{
+            id:container
+            spacing: root.spacing
+            width: parent.width
+        }
+    }
+}

src/controls/FluTreeView.qml

@@ -5,9 +5,8 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 import QtGraphicalEffects 1.15
 
-Rectangle {
+Item {
     id:root
-    color: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
 
     enum TreeViewSelectionMode  {
         None,
@@ -101,12 +100,12 @@ Rectangle {
                             if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
                                 return Qt.rgba(62/255,62/255,62/255,1)
                             }
-                            return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(62/255,62/255,62/255,1):Qt.rgba(50/255,50/255,50/255,1)
+                            return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(62/255,62/255,62/255,1):Qt.rgba(0,0,0,0)
                         }else{
                             if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
-                                return Qt.rgba(244/255,244/255,244/255,1)
+                                return Qt.rgba(0,0,0,0.06)
                             }
-                            return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(244/255,244/255,244/255,1):Qt.rgba(253/255,253/255,253/255,1)
+                            return (item_layout_mouse.containsMouse || item_layout_expanded.hovered || item_layout_checkbox.hovered)?Qt.rgba(0,0,0,0.03):Qt.rgba(0,0,0,0)
                         }
                     }
 

src/controls/FluWindow.qml

@@ -60,6 +60,7 @@ Item {
         color:root.color
         anchors.fill: parent
         anchors.margins: borderless
+        clip: true
         Behavior on color{
             ColorAnimation {
                 duration: 300

src/res.qrc

@@ -36,5 +36,12 @@
         <file>controls/FluTreeView.qml</file>
         <file>controls/FluExpander.qml</file>
         <file>controls/FluAutoSuggestBox.qml</file>
+        <file>controls/FluNavigationView.qml</file>
+        <file>controls/FluPaneItem.qml</file>
+        <file>controls/FluPaneItemHeader.qml</file>
+        <file>controls/FluPaneItemSeparator.qml</file>
+        <file>controls/FluScrollablePage.qml</file>
+        <file>controls/FluContentPage.qml</file>
+        <file>controls/FluArea.qml</file>
     </qresource>
 </RCC>