update

example/T_Home.qml

@@ -142,20 +142,6 @@ FluScrollablePage{
         }
     }
 
-    ListModel{
-        id:model_added
-        Component.onCompleted: {
-            append(ItemsOriginal.getRecentlyAddedData())
-        }
-    }
-
-    ListModel{
-        id:model_update
-        Component.onCompleted: {
-            append(ItemsOriginal.getRecentlyUpdatedData())
-        }
-    }
-
     Component{
         id:com_item
         Item{
@@ -187,7 +173,7 @@ FluScrollablePage{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: model.image
+                    source: modelData.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
@@ -197,7 +183,7 @@ FluScrollablePage{
 
                 FluText{
                     id:item_title
-                    text:model.title
+                    text:modelData.title
                     fontStyle: FluText.BodyStrong
                     anchors{
                         left: item_icon.right
@@ -208,7 +194,7 @@ FluScrollablePage{
 
                 FluText{
                     id:item_desc
-                    text:model.desc
+                    text:modelData.desc
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
@@ -241,7 +227,7 @@ FluScrollablePage{
                     anchors.fill: parent
                     hoverEnabled: true
                     onClicked: {
-                        ItemsOriginal.startPageByItem(model)
+                        ItemsOriginal.startPageByItem(modelData)
                     }
                 }
             }
@@ -260,7 +246,7 @@ FluScrollablePage{
         implicitHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
-        model:model_added
+        model:ItemsOriginal.getRecentlyAddedData()
         interactive: false
         delegate: com_item
     }
@@ -278,7 +264,7 @@ FluScrollablePage{
         cellHeight: 120
         cellWidth: 320
         interactive: false
-        model: model_update
+        model: ItemsOriginal.getRecentlyUpdatedData()
         delegate: com_item
     }
 

example/global/ItemsOriginal.qml

@@ -16,224 +16,222 @@ FluObject{
         }
     }
 
-    FluPaneItemHeader{
+    FluPaneItemExpander{
-        title:"Inputs"
+        title:"Basic input"
-    }
+        icon:FluentIcons.CheckboxComposite
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Buttons"
+            title:"Buttons"
-        image:"qrc:/res/image/control/Button.png"
+            image:"qrc:/res/image/control/Button.png"
-        recentlyUpdated:true
+            recentlyUpdated:true
-        desc:"A control that responds to user input and raisesa Click event."
+            desc:"A control that responds to user input and raisesa Click event."
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Buttons.qml")
+                navigationView.push("qrc:/T_Buttons.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Slider"
+            image:"qrc:/res/image/control/Slider.png"
+            recentlyUpdated:true
+            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            onTap:{
+                navigationView.push("qrc:/T_Slider.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"CheckBox"
+            image:"qrc:/res/image/control/Checkbox.png"
+            recentlyUpdated:true
+            desc:"A control that a user can select or clear."
+            onTap:{
+                navigationView.push("qrc:/T_CheckBox.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"ToggleSwitch"
+            onTap:{
+                navigationView.push("qrc:/T_ToggleSwitch.qml")
+            }
         }
     }
 
-    FluPaneItem{
+    FluPaneItemExpander{
-        title:"Slider"
-        image:"qrc:/res/image/control/Slider.png"
-        recentlyUpdated:true
-        desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-        onTap:{
-            navigationView.push("qrc:/T_Slider.qml")
-        }
-    }
-
-    FluPaneItem{
-        title:"CheckBox"
-        image:"qrc:/res/image/control/Checkbox.png"
-        recentlyUpdated:true
-        desc:"A control that a user can select or clear."
-        onTap:{
-            navigationView.push("qrc:/T_CheckBox.qml")
-        }
-    }
-
-    FluPaneItem{
-        title:"ToggleSwitch"
-        onTap:{
-            navigationView.push("qrc:/T_ToggleSwitch.qml")
-        }
-    }
-
-    FluPaneItemHeader{
         title:"Form"
-    }
+        icon:FluentIcons.GridView
-
+        FluPaneItem{
-    FluPaneItem{
+            title:"TextBox"
-        title:"TextBox"
+            onTap:{
-        onTap:{
+                navigationView.push("qrc:/T_TextBox.qml")
-            navigationView.push("qrc:/T_TextBox.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                navigationView.push("qrc:/T_TimePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"DatePicker"
+            onTap:{
+                navigationView.push("qrc:/T_DatePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"CalendarPicker"
+            onTap:{
+                navigationView.push("qrc:/T_CalendarPicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"ColorPicker"
+            onTap:{
+                navigationView.push("qrc:/T_ColorPicker.qml")
+            }
         }
     }
 
-    FluPaneItem{
-        title:"TimePicker"
-        onTap:{
-            navigationView.push("qrc:/T_TimePicker.qml")
-        }
-    }
 
-    FluPaneItem{
+    FluPaneItemExpander{
-        title:"DatePicker"
-        onTap:{
-            navigationView.push("qrc:/T_DatePicker.qml")
-        }
-    }
-
-    FluPaneItem{
-        title:"CalendarPicker"
-        onTap:{
-            navigationView.push("qrc:/T_CalendarPicker.qml")
-        }
-    }
-
-    FluPaneItem{
-        title:"ColorPicker"
-        onTap:{
-            navigationView.push("qrc:/T_ColorPicker.qml")
-        }
-    }
-
-    FluPaneItemHeader{
         title:"Surface"
-    }
+        icon:FluentIcons.SurfaceHub
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"InfoBar"
+            title:"InfoBar"
-        image:"qrc:/res/image/control/InfoBar.png"
+            image:"qrc:/res/image/control/InfoBar.png"
-        recentlyUpdated:true
+            recentlyUpdated:true
-        desc:"An inline message to display app-wide statuschange information."
+            desc:"An inline message to display app-wide statuschange information."
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_InfoBar.qml")
+                navigationView.push("qrc:/T_InfoBar.qml")
+            }
         }
-    }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Progress"
+            title:"Progress"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Progress.qml")
+                navigationView.push("qrc:/T_Progress.qml")
+            }
         }
-    }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Badge"
+            title:"Badge"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Badge.qml")
+                navigationView.push("qrc:/T_Badge.qml")
+            }
         }
-    }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Rectangle"
+            title:"Rectangle"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Rectangle.qml")
+                navigationView.push("qrc:/T_Rectangle.qml")
+            }
         }
-    }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Carousel"
+            title:"Carousel"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Carousel.qml")
+                navigationView.push("qrc:/T_Carousel.qml")
+            }
         }
-    }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Expander"
+            title:"Expander"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Expander.qml")
+                navigationView.push("qrc:/T_Expander.qml")
+            }
         }
+
     }
 
-    FluPaneItemHeader{
+    FluPaneItemExpander{
         title:"Popus"
-    }
+        icon:FluentIcons.ButtonMenu
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                navigationView.push("qrc:/T_Dialog.qml")
+            }
+        }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Dialog"
+            title:"Tooltip"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Dialog.qml")
+                navigationView.push("qrc:/T_Tooltip.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                navigationView.push("qrc:/T_Menu.qml")
+            }
         }
     }
 
-    FluPaneItem{
+    FluPaneItemExpander{
-        title:"Tooltip"
-        onTap:{
-            navigationView.push("qrc:/T_Tooltip.qml")
-        }
-    }
-
-    FluPaneItem{
-        title:"Menu"
-        onTap:{
-            navigationView.push("qrc:/T_Menu.qml")
-        }
-    }
-
-    FluPaneItemHeader{
         title:"Navigation"
-    }
+        icon:FluentIcons.AllApps
-
+        FluPaneItem{
-    FluPaneItem{
+            title:"TabView"
-        title:"TabView"
+            image:"qrc:/res/image/control/TabView.png"
-        image:"qrc:/res/image/control/TabView.png"
+            recentlyAdded:true
-        recentlyAdded:true
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-        desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            onTap:{
-        onTap:{
+                navigationView.push("qrc:/T_TabView.qml")
-            navigationView.push("qrc:/T_TabView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                navigationView.push("qrc:/T_TreeView.qml")
+            }
         }
-    }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"TreeView"
+            title:"MultiWindow"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_TreeView.qml")
+                navigationView.push("qrc:/T_MultiWindow.qml")
+            }
         }
     }
 
 
-    FluPaneItem{
+    FluPaneItemExpander{
-        title:"MultiWindow"
-        onTap:{
-            navigationView.push("qrc:/T_MultiWindow.qml")
-        }
-    }
-
-    FluPaneItemHeader{
         title:"Theming"
-    }
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                navigationView.push("qrc:/T_Theme.qml")
+            }
+        }
 
-    FluPaneItem{
+        FluPaneItem{
-        title:"Theme"
+            title:"Awesome"
-        onTap:{
+            onTap:{
-            navigationView.push("qrc:/T_Theme.qml")
+                navigationView.push("qrc:/T_Awesome.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                navigationView.push("qrc:/T_Typography.qml")
+            }
         }
     }
 
-    FluPaneItem{
+    FluPaneItemExpander{
-        title:"Awesome"
-        onTap:{
-            navigationView.push("qrc:/T_Awesome.qml")
-        }
-    }
-    FluPaneItem{
-        title:"Typography"
-        onTap:{
-            navigationView.push("qrc:/T_Typography.qml")
-        }
-    }
-
-    FluPaneItemHeader{
         title:"Media"
-    }
+        icon:FluentIcons.Media
-
+        FluPaneItem{
-    FluPaneItem{
+            title:"MediaPlayer"
-        title:"MediaPlayer"
+            image:"qrc:/res/image/control/MediaPlayerElement.png"
-        image:"qrc:/res/image/control/MediaPlayerElement.png"
+            recentlyAdded:true
-        recentlyAdded:true
+            desc:"A control to display video and image content."
-        desc:"A control to display video and image content."
+            onTap:{
-        onTap:{
+                navigationView.push("qrc:/T_MediaPlayer.qml")
-            navigationView.push("qrc:/T_MediaPlayer.qml")
+            }
         }
     }
 
@@ -244,14 +242,23 @@ FluObject{
             if(item instanceof FluPaneItem && item.recentlyAdded){
                 arr.push(item)
             }
+            if(item instanceof FluPaneItemExpander){
+                for(var j=0;j<item.children.length;j++){
+                    var itemChild = item.children[j]
+                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
+                        arr.push(itemChild)
+                    }
+                }
+            }
         }
         return arr
     }
 
     function getRecentlyUpdatedData(){
         var arr = []
-        for(var i=0;i<children.length;i++){
+        var items = navigationView.getItems();
-            var item = children[i]
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
             if(item instanceof FluPaneItem && item.recentlyUpdated){
                 arr.push(item)
             }
@@ -261,8 +268,9 @@ FluObject{
 
     function getSearchData(){
         var arr = []
-        for(var i=0;i<children.length;i++){
+        var items = navigationView.getItems();
-            var item = children[i]
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
             if(item instanceof FluPaneItem){
                 arr.push({title:item.title,key:item.key})
             }
@@ -270,14 +278,19 @@ FluObject{
         return arr
     }
 
-    function startPageByItem(item){
+    function startPageByItem(data){
-        for(var i=0;i<children.length;i++){
+        var items = navigationView.getItems();
-            if(children[i].key === item.key){
+        for(var i=0;i<items.length;i++){
+            var item =  items[i]
+            if(item.key === data.key){
                 if(navigationView.getCurrentIndex() === i){
                     return
                 }
-                children[i].tap()
+                item.tap()
                 navigationView.setCurrentIndex(i)
+                if(item.parent){
+                item.parent.isExpand = true
+                }
                 return
             }
         }

example/page/AboutPage.qml

@@ -36,7 +36,7 @@ FluWindow {
                 fontStyle: FluText.Title
             }
             FluText{
-                text:"v1.1.6"
+                text:"v1.1.7"
                 fontStyle: FluText.Body
                 Layout.alignment: Qt.AlignBottom
             }

src/Fluent.cpp

@@ -32,6 +32,8 @@ void Fluent::registerTypes(const char *uri){
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
     qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
+
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");

src/controls/FluNavigationView.qml

@@ -48,14 +48,34 @@ Item {
         id:com_panel_item_separatorr
         FluDivider{
             width: nav_list.width
-            height: 1
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 1 : 0
+                }
+                return 1
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
         }
     }
 
     Component{
         id:com_panel_item_header
         Item{
-            height: 30
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 30 : 0
+                }
+                return 30
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
             width: nav_list.width
             FluText{
                 text:model.title
@@ -70,11 +90,131 @@ Item {
     }
 
     Component{
-        id:com_panel_item
+        id:com_panel_item_expander
         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
+                }
+                Rectangle{
+                    width: 3
+                    height: 18
+                    radius: 1.5
+                    color: FluTheme.primaryColor.dark
+                    visible: {
+                        for(var i=0;i<model.children.length;i++){
+                            var item = model.children[i]
+                            if(item.idx === nav_list.currentIndex && !model.isExpand){
+                                return true
+                            }
+                        }
+                        return false
+                    }
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+                FluIcon{
+                    rotation: model.isExpand?0:180
+                    iconSource:FluentIcons.ChevronUp
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: 12
+                    }
+                    Behavior on rotation {
+                        NumberAnimation{
+                            duration: 150
+                        }
+                    }
+                }
+                MouseArea{
+                    id:item_mouse
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        model.isExpand = !model.isExpand
+                    }
+                }
+                color: {
+                    if(FluTheme.dark){
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(1,1,1,0.03)
+                        }
+                        if((nav_list.currentIndex === position)&&type===0){
+                            return Qt.rgba(1,1,1,0.06)
+                        }
+                        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)
+                    }
+                }
+
+                FluIcon{
+                    id:item_icon
+                    iconSource: {
+                        if(model.icon){
+                            return model.icon
+                        }
+                        return 0
+                    }
+                    width: 30
+                    height: 30
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:parent.left
+                        leftMargin: 3
+                    }
+                }
+
+                FluText{
+                    id:item_title
+                    text:model.title
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:item_icon.right
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_panel_item
+        Item{
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
+            clip: true
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 38 : 0
+                }
+                return 38
+            }
+            width: nav_list.width
+
             Rectangle{
                 radius: 4
                 anchors{
@@ -330,11 +470,7 @@ Item {
             }
             ScrollBar.vertical: FluScrollBar {}
 
-            model:{
+            model:handleItems()
-                if(items){
-                    return items.children
-                }
-            }
             delegate: Loader{
                 property var model: modelData
                 property var position: index
@@ -349,6 +485,9 @@ Item {
                     if(modelData instanceof FluPaneItemSeparator){
                         return com_panel_item_separatorr
                     }
+                    if(modelData instanceof FluPaneItemExpander){
+                        return com_panel_item_expander
+                    }
                 }
             }
         }
@@ -383,6 +522,33 @@ Item {
         }
     }
 
+    function handleItems(){
+        var idx = 0
+        var data = []
+        if(items){
+            for(var i=0;i<items.children.length;i++){
+                var item = items.children[i]
+                item.idx = idx
+                data.push(item)
+                idx++
+                if(item instanceof FluPaneItemExpander){
+                    for(var j=0;j<item.children.length;j++){
+                        var itemChild = item.children[j]
+                        itemChild.parent = item
+                        itemChild.idx = idx
+                        data.push(itemChild)
+                        idx++
+                    }
+                }
+            }
+        }
+        return data
+    }
+
+    function getItems(){
+        return nav_list.model
+    }
+
     function push(url){
         nav_swipe.push(url)
     }

src/controls/FluPaneItem.qml

@@ -3,12 +3,15 @@ import FluentUI
 
 QtObject {
     readonly property string key : FluApp.uuid()
+    readonly property int flag : 0
     property string title
     property int icon
     property bool recentlyAdded: false
     property bool recentlyUpdated: false
     property string desc
     property var image
+    property var parent
+    property int idx
     signal tap
     signal repTap
 }

src/controls/FluPaneItemExpander.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import FluentUI
+
+FluObject {
+    readonly property int flag : 3
+    readonly property string key : FluApp.uuid()
+    property string title
+    property int icon
+    property bool isExpand: false
+    property var parent
+    property int idx
+    signal tap
+    signal repTap
+}

src/controls/FluPaneItemHeader.qml

@@ -1,6 +1,9 @@
 import QtQuick
 
 QtObject {
+    readonly property int flag : 1
     readonly property string key : FluApp.uuid()
     property string title
+    property var parent
+    property int idx
 }

src/controls/FluPaneItemSeparator.qml

@@ -1,5 +1,8 @@
 import QtQuick
 
 QtObject {
+    readonly property int flag : 2
     readonly property string key : FluApp.uuid()
+    property var parent
+    property int idx
 }

src/res.qrc

@@ -59,5 +59,6 @@
         <file>controls/FluMediaPlayer.qml</file>
         <file>controls/FluTabView.qml</file>
         <file>controls/FluItem.qml</file>
+        <file>controls/FluPaneItemExpander.qml</file>
     </qresource>
 </RCC>