update

example/T_Badge.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -11,6 +12,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -99,5 +101,19 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'Rectangle{
+    width: 40
+    height: 40
+    radius: 8
+    color: Qt.rgba(191/255,191/255,191/255,1)
+    FluBadge{
+        count: 100
+        isDot: false
+        color: Qt.rgba(82/255,196/255,26/255,1)
+    }
+}'
+    }
 
 }

example/T_CalendarPicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -19,6 +21,12 @@ FluScrollablePage{
         FluCalendarView{
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCalendarView{
+
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -34,5 +42,11 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCalendarPicker{
+
+}'
+    }
 
 }

example/T_Carousel.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -35,4 +37,14 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCarousel{
+    width: 400
+    height: 300
+    Component.onCompleted: {
+        setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
+    }
+}'
+    }
 }

example/T_ColorPicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -37,6 +39,12 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluColorView{
+
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -54,6 +62,12 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluColorPicker{
+
+}'
+    }
 
 }
 

example/T_DatePicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,44 +11,42 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 80
         paddings: 10
-
         ColumnLayout{
-
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-
             FluText{
                 text:"showYear=true"
             }
-
             FluDatePicker{
             }
-
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluDatePicker{
 
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 80
         paddings: 10
-
         ColumnLayout{
-
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-
             FluText{
                 text:"showYear=false"
             }
@@ -56,8 +55,13 @@ FluScrollablePage{
                 showYear:false
 
             }
-
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluDatePicker{
+    showYear:false
+}'
+    }
 
 }

example/T_Dialog.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,40 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+            FluButton{
+                anchors.verticalCenter: parent.verticalCenter
+                Layout.topMargin: 20
+                text:"Show Dialog"
+                onClicked: {
+                    dialog.open()
+                }
+            }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluContentDialog{
+    id:dialog
+    title:"友情提示"
+    message:"确定要退出程序么？"
+    negativeText:"取消"
+    onNegativeClicked:{
+        showSuccess("点击取消按钮")
+    }
+    positiveText:"确定"
+    onPositiveClicked:{
+        showSuccess("点击确定按钮")
+    }
+}
+dialog.open()
+'
+    }
 
     FluContentDialog{
         id:dialog
@@ -25,11 +60,5 @@ FluScrollablePage{
         }
     }
 
-    FluButton{
+
-        Layout.topMargin: 20
-        text:"Show Dialog"
-        onClicked: {
-            dialog.open()
-        }
-    }
 }

example/T_Expander.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,20 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: layout_column.height+40
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            id:layout_column
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
 
             FluExpander{
                 headerText:"打开一个单选框"
@@ -62,4 +77,33 @@ FluScrollablePage{
                     }
                 }
             }
+
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluExpander{
+    headerText:"打开一个单选框"
+    Item{
+        anchors.fill: parent
+        Flickable{
+            width: parent.width
+            height: parent.height
+            contentWidth: width
+            contentHeight: text_info.height
+            ScrollBar.vertical: FluScrollBar {}
+            FluText{
+                id:text_info
+                width: scrollview.width
+                wrapMode: Text.WrapAnywhere
+                padding: 14
+                text:"先帝创业未半而中道崩殂，今天下三分......""
+            }
+        }
+    }
+}'
+    }
+
+
 }

example/T_FlipView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,7 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
-
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -26,7 +27,6 @@ FluScrollablePage{
                 Image{
                     source: "qrc:/res/image/banner_1.jpg"
                     asynchronous: true
-                    sourceSize: Qt.size(400,300)
                     fillMode:Image.PreserveAspectCrop
                 }
                 Image{
@@ -42,6 +42,27 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluFlipView{
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+}
+'
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -74,5 +95,26 @@ FluScrollablePage{
             }
         }
     }
-
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluFlipView{
+    vertical:true
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+}
+'
+    }
 }

example/T_InfoBar.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,33 +11,53 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 200
+        paddings: 10
+        ColumnLayout{
+            spacing: 14
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
             FluButton{
                 text:"Info"
-        Layout.topMargin: 20
                 onClicked: {
                     showInfo("这是一个Info样式的InfoBar")
                 }
             }
             FluButton{
                 text:"Warning"
-        Layout.topMargin: 20
                 onClicked: {
                     showWarning("这是一个Warning样式的InfoBar")
                 }
             }
             FluButton{
                 text:"Error"
-        Layout.topMargin: 20
                 onClicked: {
                     showError("这是一个Error样式的InfoBar")
                 }
             }
             FluButton{
                 text:"Success"
-        Layout.topMargin: 20
                 onClicked: {
                     showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
                 }
             }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'  showInfo("这是一个Info样式的InfoBar")
+
+    showWarning("这是一个Warning样式的InfoBar")
+
+    showError("这是一个Error样式的InfoBar")
+
+    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
+    }
 }

example/T_MediaPlayer.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     onVisibleChanged: {
         if(visible){
@@ -18,7 +20,6 @@ FluScrollablePage{
             player.pause()
         }
     }
-
     FluArea{
         Layout.fillWidth: true
         height: 320
@@ -35,13 +36,19 @@ FluScrollablePage{
             }
         }
     }
-
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluMediaPlayer{
+    id:player
+    source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+}
+'
+    }
     FluArea{
         Layout.fillWidth: true
         height: 68
         Layout.topMargin: 20
         paddings: 10
-
         FluButton{
             text:"跳转到视频播放器窗口"
             anchors.verticalCenter: parent.verticalCenter
@@ -49,8 +56,10 @@ FluScrollablePage{
                 FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
             }
         }
-
     }
 
+
+
+
 }
 

example/T_Menu.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,20 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            id:layout_column
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
 
             FluButton{
                 text:"左击菜单"
@@ -19,7 +34,6 @@ FluScrollablePage{
                 }
             }
 
-
             FluButton{
                 text:"右击菜单"
                 Layout.topMargin: 20
@@ -34,6 +48,29 @@ FluScrollablePage{
                     }
                 }
             }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluMenu{
+    id:menu
+    FluMenuItem:{
+        text:"删除"
+        onClicked: {
+            showError("删除")
+        }
+    }
+    FluMenuItem:{
+        text:"修改"
+        onClicked: {
+            showInfo"修改")
+        }
+    }
+}
+menu.popup()
+'
+    }
 
     FluMenu{
         id:menu
@@ -46,7 +83,7 @@ FluScrollablePage{
         FluMenuItem{
             text:"修改"
             onClicked: {
-                showError("修改")
+                showInfo("修改")
             }
         }
     }

example/T_MultiWindow.qml

@@ -3,17 +3,18 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
+    property string password: ""
+    property var loginPageRegister: registerForPageResult("/login")
+
     title:"MultiWindow"
     leftPadding:10
     rightPadding:10
     bottomPadding:20
-
+    spacing: 0
-    property string password: ""
-
-    property var loginPageRegister: registerForPageResult("/login")
 
     Connections{
         target: loginPageRegister
@@ -28,7 +29,6 @@ FluScrollablePage{
         height: 100
         paddings: 10
         Layout.topMargin: 20
-
         Column{
             spacing: 15
             anchors{
@@ -46,6 +46,16 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluButton{
+    text:"点击跳转"
+    onClicked: {
+        FluApp.navigate("/about")
+    }
+}
+'
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -68,11 +78,30 @@ FluScrollablePage{
                     loginPageRegister.launch({username:"zhuzichu"})
                 }
             }
-
             FluText{
                 text:"登录窗口返回过来的密码->"+password
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'property var loginPageRegister: registerForPageResult("/login")
+
+Connections{
+    target: loginPageRegister
+    function onResult(data)
+    {
+        password = data.password
+    }
+}
+
+FluButton{
+    text:"点击跳转"
+    onClicked: {
+        loginPageRegister.launch({username:"zhuzichu"})
+    }
+}
+'
+    }
 
 }

example/T_Pivot.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,7 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
-
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -46,6 +47,36 @@ FluScrollablePage{
             }
         }
     }
-
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluPivot{
+    anchors.fill: parent
+    FluPivotItem:{
+        text:"All"
+        contentItem: FluText{
+            text:"All emails go here."
+        }
+    }
+    FluPivotItem:{
+        text:"Unread"
+        contentItem: FluText{
+            text:"Unread emails go here."
+        }
+    }
+    FluPivotItem:{
+        text:"Flagged"
+        contentItem: FluText{
+            text:"Flagged emails go here."
+        }
+    }
+    FluPivotItem:{
+        text:"Urgent"
+        contentItem: FluText{
+            text:"Urgent emails go here."
+        }
+    }
+}
+'
+    }
 
 }

example/T_Progress.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,30 +11,59 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
-    FluProgressBar{
+    FluArea{
+        Layout.fillWidth: true
         Layout.topMargin: 20
+        height: 260
+        paddings: 10
+        ColumnLayout{
+            spacing: 20
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluProgressBar{
             }
             FluProgressRing{
-        Layout.topMargin: 10
             }
             FluProgressBar{
                 id:progress_bar
-        Layout.topMargin: 20
                 indeterminate: false
             }
             FluProgressRing{
                 id:progress_ring
-        Layout.topMargin: 10
                 indeterminate: false
             }
             FluSlider{
-        Layout.topMargin: 30
                 value:50
                 onValueChanged:{
                     progress_bar.progress = value/100
                     progress_ring.progress = value/100
                 }
-        Layout.bottomMargin: 30
             }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluProgressBar{
+
+}
+
+FluProgressRing{
+
+}
+
+FluProgressBar{
+    indeterminate: false
+}
+
+FluProgressRing{
+    indeterminate: false
+}'
+    }
+
+
+
 }

example/T_Rectangle.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,20 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 480
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
 
             RowLayout{
                 Layout.topMargin: 20
@@ -114,4 +129,23 @@ FluScrollablePage{
                 }
                 Layout.topMargin: 10
             }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluRectangle{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+    Image{
+        asynchronous: true
+        anchors.fill: parent
+        source: "qrc:/res/svg/avatar_4.svg"
+        sourceSize: Qt.size(width,height)
+    }
+}'
+    }
+
+
 }

example/T_TabView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
 
@@ -99,7 +101,7 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        Layout.topMargin: 5
+        Layout.topMargin: 15
         height: 400
         paddings: 10
         FluTabView{
@@ -109,5 +111,27 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTabView{
+    anchors.fill: parent
+    Component.onCompleted: {
+        newTab()
+        newTab()
+        newTab()
+    }
+    Component{
+        id:com_page
+        Rectangle{
+            anchors.fill: parent
+            color: argument
+        }
+    }
+    function newTab(){
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
+    }
+}
+'
+    }
 
 }

example/T_TextBox.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,32 +11,122 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
 
         FluTextBox{
             Layout.topMargin: 20
             placeholderText: "单行输入框"
             Layout.preferredWidth: 300
-        disabled:toggle_switch.selected
+            disabled:text_box_switch.selected
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
             }
-    FluMultilineTextBox{
-        Layout.topMargin: 20
-        Layout.preferredWidth: 300
-        placeholderText: "多行输入框"
-        disabled:toggle_switch.selected
-    }
-    FluAutoSuggestBox{
-        Layout.topMargin: 20
-        items:generateRandomNames(100)
-        placeholderText: "AutoSuggestBox"
-        Layout.preferredWidth: 300
-        disabled:toggle_switch.selected
         }
 
-    FluToggleSwitch{
+        Row{
-        id:toggle_switch
+            spacing: 5
-        text:"Disabled"
+            anchors{
-        Layout.topMargin: 20
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
+            FluToggleSwitch{
+                id:text_box_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTextBox{
+    placeholderText:"单行输入框"
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluMultilineTextBox{
+            Layout.topMargin: 20
+            placeholderText: "多行输入框"
+            Layout.preferredWidth: 300
+            disabled:text_box_multi_switch.selected
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_box_multi_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluMultilineTextBox{
+    placeholderText:"多行输入框"
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluAutoSuggestBox{
+            Layout.topMargin: 20
+            placeholderText: "AutoSuggestBox"
+            Layout.preferredWidth: 300
+            items:generateRandomNames(100)
+            disabled:text_box_suggest_switch.selected
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_box_suggest_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluAutoSuggestBox{
+    placeholderText:"AutoSuggestBox"
+}'
+    }
+
 
     function generateRandomNames(numNames) {
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

example/T_Theme.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,9 +11,20 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
-    RowLayout{
+    FluArea{
+        Layout.fillWidth: true
         Layout.topMargin: 20
+        height: 210
+        paddings: 10
+        ColumnLayout{
+            spacing:0
+            anchors{
+                left: parent.left
+            }
+            RowLayout{
+                Layout.topMargin: 10
                 Repeater{
                     model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
                     delegate:  FluRectangle{
@@ -43,6 +55,7 @@ FluScrollablePage{
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
+                Layout.topMargin: 5
                 selected: FluTheme.dark
                 clickFunc:function(){
                     FluTheme.dark = !FluTheme.dark
@@ -53,9 +66,23 @@ FluScrollablePage{
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
+                Layout.topMargin: 5
                 selected: FluTheme.nativeText
                 clickFunc:function(){
                     FluTheme.nativeText = !FluTheme.nativeText
                 }
             }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTheme.primaryColor = FluColors.Orange
+
+FluTheme.dark = true
+
+FluTheme.nativeText = true
+'
+    }
+
+
 }

example/T_TimePicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,6 +11,7 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -33,7 +35,12 @@ FluScrollablePage{
 
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTimePicker{
 
+}'
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -49,7 +56,7 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.HH"
+                text:"hourFormat=FluTimePicker.H"
             }
 
             FluTimePicker{
@@ -58,6 +65,11 @@ FluScrollablePage{
 
         }
     }
-
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTimePicker{
+    hourFormat:FluTimePicker.HH
+}'
+    }
 
 }

example/T_ToggleSwitch.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,12 +11,29 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
-    FluToggleSwitch{
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
         Layout.topMargin: 20
+        Row{
+            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
+            FluToggleSwitch{
             }
             FluToggleSwitch{
-        Layout.topMargin: 20
                 text:"Text"
             }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluToggleSwitch{
+    text:"Text"
+}'
+    }
+
+
 }

example/T_Tooltip.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
+import "./component"
 
 FluScrollablePage{
 
@@ -10,13 +11,13 @@ FluScrollablePage{
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     FluText{
         Layout.topMargin: 20
         text:"鼠标悬停不动，弹出Tooltip"
     }
 
-
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -42,6 +43,18 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluIconButton{
+    iconSource:FluentIcons.ChromeCloseContrast
+    iconSize: 15
+    text:"删除"
+    onClicked:{
+        showSuccess("点击IconButton")
+    }
+}
+'
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -72,6 +85,22 @@ FluScrollablePage{
             }
         }
     }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluButton{
+    id:button_1
+    text:"删除"
+    FluTooltip{
+        visible: button_1.hovered
+        text:button_1.text
+        delay: 1000
+    }
+    onClicked:{
+        showSuccess("点击一个Button")
+    }
+}
+'
+    }
 
 
 }

example/T_TreeView.qml

@@ -3,13 +3,15 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import "./component"
 
-FluContentPage {
+FluScrollablePage {
 
     title:"TreeView"
     leftPadding:10
     rightPadding:10
     bottomPadding:20
+    spacing: 0
 
     function randomName() {
         var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
@@ -50,71 +52,42 @@ FluContentPage {
         return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
     }
 
-
+    FluArea{
-    FluTreeView{
+        id:layout_actions
-        id:tree_view
+        Layout.fillWidth: true
-        width:240
+        Layout.topMargin: 20
-        anchors{
+        height: 50
-            top:parent.top
+        paddings: 10
-            left:parent.left
+        RowLayout{
-            bottom:parent.bottom
+            spacing: 14
-        }
+            FluDropDownButton{
-        onItemClicked:
+                id:btn_selection_model
-            (model)=>{
+                Layout.preferredWidth: 140
-                showSuccess(model.text)
+                text:"None"
-            }
+                items:[
-
+                    FluMenuItem{
-        Component.onCompleted: {
-            var org = createOrg(3, 3, 3)
-            updateData(org)
-
-        }
-
-    }
-
-
-    ColumnLayout{
-        anchors{
-            left: tree_view.right
-            right: parent.right
-            top: parent.top
-        }
-
-        FluText{
-            text:{
-                if(tree_view.selectionMode === FluTreeView.None){
-                    return "selectionMode->FluTreeView.None"
-                }
-                if(tree_view.selectionMode === FluTreeView.Single){
-                    return "selectionMode->FluTreeView.Single"
-                }
-                if(tree_view.selectionMode === FluTreeView.Multiple){
-                    return "selectionMode->FluTreeView.Multiple"
-                }
-            }
-        }
-
-        FluButton{
                         text:"None"
                         onClicked: {
-                tree_view.selectionMode = FluTreeView.None
+                            btn_selection_model.text = text
+                            tree_view.selectionMode = FluTabView.Equal
                         }
-        }
+                    },
-
+                    FluMenuItem{
-        FluButton{
                         text:"Single"
                         onClicked: {
-                tree_view.selectionMode = FluTreeView.Single
+                            btn_selection_model.text = text
+                            tree_view.selectionMode = FluTabView.SizeToContent
                         }
-        }
+                    },
-
+                    FluMenuItem{
-        FluButton{
+                        text:"Muiltple"
-            text:"Multiple"
                         onClicked: {
-                tree_view.selectionMode = FluTreeView.Multiple
+                            btn_selection_model.text = text
+                            tree_view.selectionMode = FluTabView.Compact
                         }
                     }
-
+                ]
+            }
             FluFilledButton{
                 text:"获取选中的数据"
                 onClicked: {
@@ -139,6 +112,50 @@ FluContentPage {
                     }
                 }
             }
+        }
+    }
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 10
+        paddings: 10
+        height: 400
+        FluTreeView{
+            id:tree_view
+            width:240
+            anchors{
+                top:parent.top
+                left:parent.left
+                bottom:parent.bottom
+            }
+            onItemClicked:
+                (model)=>{
+                    showSuccess(model.text)
+                }
 
+            Component.onCompleted: {
+                var org = createOrg(3, 3, 3)
+                createItem()
+                updateData(org)
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTreeView{
+    id:tree_view
+    width:240
+    height:600
+    Component.onCompleted: {
+        var datas = []
+        datas.push(createItem("Node1",false))
+        datas.push(createItem("Node2",false))
+        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
+        updateData(datas)
     }
 }
+'
+    }
+
+
+}

example/T_Typography.qml

@@ -15,15 +15,19 @@ FluContentPage {
         slider.seek(0)
     }
 
-    ScrollView{
+    FluArea{
-        clip: true
+        anchors{
-        width: parent.width
+            top:parent.top
-        contentWidth: parent.width
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            topMargin: 20
+        }
+        paddings: 10
         ColumnLayout{
             spacing: 0
             FluText{
                 text:"Display"
-                Layout.topMargin: 20
                 padding: 0
                 pixelSize: textSize
                 fontStyle: FluText.Display
@@ -65,8 +69,6 @@ FluContentPage {
                 fontStyle: FluText.Caption
             }
         }
-    }
-
 
         FluSlider{
             id:slider
@@ -82,4 +84,11 @@ FluContentPage {
             }
         }
 
+    }
+
+
+
+
+
+
 }

example/component/CodeExpander.qml

@@ -16,8 +16,13 @@ FluExpander{
         width:parent.width
         readOnly:true
         text:code
+        focus:false
+        KeyNavigation.priority: KeyNavigation.BeforeItem
         background:Rectangle{
-            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
+            radius: 4
+            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
         }
     }
 

example/global/ItemsOriginal.qml

@@ -3,7 +3,6 @@
 import QtQuick
 import FluentUI
 
-
 FluObject{
 
     property var navigationView
@@ -19,7 +18,6 @@ FluObject{
     FluPaneItemExpander{
         title:"Basic input"
         icon:FluentIcons.CheckboxComposite
-
         FluPaneItem{
             title:"Buttons"
             image:"qrc:/res/image/control/Button.png"
@@ -38,7 +36,6 @@ FluObject{
                 navigationView.push("qrc:/T_Slider.qml")
             }
         }
-
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/res/image/control/Checkbox.png"
@@ -48,7 +45,6 @@ FluObject{
                 navigationView.push("qrc:/T_CheckBox.qml")
             }
         }
-
         FluPaneItem{
             title:"ToggleSwitch"
             onTap:{
@@ -92,11 +88,9 @@ FluObject{
         }
     }
 
-
     FluPaneItemExpander{
         title:"Surface"
         icon:FluentIcons.SurfaceHub
-
         FluPaneItem{
             title:"InfoBar"
             image:"qrc:/res/image/control/InfoBar.png"
@@ -106,42 +100,36 @@ FluObject{
                 navigationView.push("qrc:/T_InfoBar.qml")
             }
         }
-
         FluPaneItem{
             title:"Progress"
             onTap:{
                 navigationView.push("qrc:/T_Progress.qml")
             }
         }
-
         FluPaneItem{
             title:"Badge"
             onTap:{
                 navigationView.push("qrc:/T_Badge.qml")
             }
         }
-
         FluPaneItem{
             title:"Rectangle"
             onTap:{
                 navigationView.push("qrc:/T_Rectangle.qml")
             }
         }
-
         FluPaneItem{
             title:"Carousel"
             onTap:{
                 navigationView.push("qrc:/T_Carousel.qml")
             }
         }
-
         FluPaneItem{
             title:"Expander"
             onTap:{
                 navigationView.push("qrc:/T_Expander.qml")
             }
         }
-
     }
 
     FluPaneItemExpander{
@@ -153,14 +141,12 @@ FluObject{
                 navigationView.push("qrc:/T_Dialog.qml")
             }
         }
-
         FluPaneItem{
             title:"Tooltip"
             onTap:{
                 navigationView.push("qrc:/T_Tooltip.qml")
             }
         }
-
         FluPaneItem{
             title:"Menu"
             onTap:{
@@ -172,7 +158,6 @@ FluObject{
     FluPaneItemExpander{
         title:"Navigation"
         icon:FluentIcons.AllApps
-
         FluPaneItem{
             title:"Pivot"
             image:"qrc:/res/image/control/Pivot.png"
@@ -226,19 +211,18 @@ FluObject{
                 navigationView.push("qrc:/T_Theme.qml")
             }
         }
-
-        FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/T_Awesome.qml")
-            }
-        }
         FluPaneItem{
             title:"Typography"
             onTap:{
                 navigationView.push("qrc:/T_Typography.qml")
             }
         }
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                navigationView.push("qrc:/T_Awesome.qml")
+            }
+        }
     }
 
     FluPaneItemExpander{