update

.github/workflows/macos.yml

@@ -35,7 +35,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           cached: 'false'
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       - uses: actions/checkout@v2
         with:
           fetch-depth: 1

.github/workflows/ubuntu.yml

@@ -30,7 +30,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           cached: 'false'
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       - name: ubuntu install GL library
         run: sudo apt-get install -y libglew-dev libglfw3-dev qml-module-qtquick-controls qml-module-qtquick-controls2
       - uses: actions/checkout@v2

.github/workflows/windows.yml

@@ -38,7 +38,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cached: 'false'
-          modules: 'qt5compat qtmultimedia qtshadertools'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       # 拉取代码
       - uses: actions/checkout@v2
         with:

example/App.qml

@@ -16,6 +16,7 @@ Window {
             "/about":"qrc:/page/AboutPage.qml",
             "/login":"qrc:/page/LoginPage.qml",
             "/chat":"qrc:/page/ChatPage.qml",
+            "/media":"qrc:/page/MediaPage.qml",
         }
         FluApp.initialRoute = "/"
         FluApp.run()

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/example.pro

@@ -1,5 +1,5 @@
-QT += quick quickcontrols2  concurrent network multimedia
-CONFIG += c++11
+QT += quick quickcontrols2 concurrent network multimedia
+CONFIG += c++17
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
 
 HEADERS += \

example/global/ItemsOriginal.qml

@@ -16,224 +16,222 @@ FluObject{
         }
     }
 
-    FluPaneItemHeader{
-        title:"Inputs"
-    }
+    FluPaneItemExpander{
+        title:"Basic input"
+        icon:FluentIcons.CheckboxComposite
 
-    FluPaneItem{
-        title:"Buttons"
-        image:"qrc:/res/image/control/Button.png"
-        recentlyUpdated:true
-        desc:"A control that responds to user input and raisesa Click event."
-        onTap:{
-            navigationView.push("qrc:/T_Buttons.qml")
+        FluPaneItem{
+            title:"Buttons"
+            image:"qrc:/res/image/control/Button.png"
+            recentlyUpdated:true
+            desc:"A control that responds to user input and raisesa Click event."
+            onTap:{
+                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{
-        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{
+    FluPaneItemExpander{
         title:"Form"
-    }
-
-    FluPaneItem{
-        title:"TextBox"
-        onTap:{
-            navigationView.push("qrc:/T_TextBox.qml")
+        icon:FluentIcons.GridView
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                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{
-        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{
+    FluPaneItemExpander{
         title:"Surface"
-    }
+        icon:FluentIcons.SurfaceHub
 
-    FluPaneItem{
-        title:"InfoBar"
-        image:"qrc:/res/image/control/InfoBar.png"
-        recentlyUpdated:true
-        desc:"An inline message to display app-wide statuschange information."
-        onTap:{
-            navigationView.push("qrc:/T_InfoBar.qml")
+        FluPaneItem{
+            title:"InfoBar"
+            image:"qrc:/res/image/control/InfoBar.png"
+            recentlyUpdated:true
+            desc:"An inline message to display app-wide statuschange information."
+            onTap:{
+                navigationView.push("qrc:/T_InfoBar.qml")
+            }
         }
-    }
 
-    FluPaneItem{
-        title:"Progress"
-        onTap:{
-            navigationView.push("qrc:/T_Progress.qml")
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                navigationView.push("qrc:/T_Progress.qml")
+            }
         }
-    }
 
-    FluPaneItem{
-        title:"Badge"
-        onTap:{
-            navigationView.push("qrc:/T_Badge.qml")
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                navigationView.push("qrc:/T_Badge.qml")
+            }
         }
-    }
 
-    FluPaneItem{
-        title:"Rectangle"
-        onTap:{
-            navigationView.push("qrc:/T_Rectangle.qml")
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                navigationView.push("qrc:/T_Rectangle.qml")
+            }
         }
-    }
 
-    FluPaneItem{
-        title:"Carousel"
-        onTap:{
-            navigationView.push("qrc:/T_Carousel.qml")
+        FluPaneItem{
+            title:"Carousel"
+            onTap:{
+                navigationView.push("qrc:/T_Carousel.qml")
+            }
         }
-    }
 
-    FluPaneItem{
-        title:"Expander"
-        onTap:{
-            navigationView.push("qrc:/T_Expander.qml")
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                navigationView.push("qrc:/T_Expander.qml")
+            }
         }
+
     }
 
-    FluPaneItemHeader{
+    FluPaneItemExpander{
         title:"Popus"
-    }
+        icon:FluentIcons.ButtonMenu
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                navigationView.push("qrc:/T_Dialog.qml")
+            }
+        }
 
-    FluPaneItem{
-        title:"Dialog"
-        onTap:{
-            navigationView.push("qrc:/T_Dialog.qml")
+        FluPaneItem{
+            title:"Tooltip"
+            onTap:{
+                navigationView.push("qrc:/T_Tooltip.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                navigationView.push("qrc:/T_Menu.qml")
+            }
         }
     }
 
-    FluPaneItem{
-        title:"Tooltip"
-        onTap:{
-            navigationView.push("qrc:/T_Tooltip.qml")
-        }
-    }
-
-    FluPaneItem{
-        title:"Menu"
-        onTap:{
-            navigationView.push("qrc:/T_Menu.qml")
-        }
-    }
-
-    FluPaneItemHeader{
+    FluPaneItemExpander{
         title:"Navigation"
-    }
-
-    FluPaneItem{
-        title:"TabView"
-        image:"qrc:/res/image/control/TabView.png"
-        recentlyAdded:true
-        desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-        onTap:{
-            navigationView.push("qrc:/T_TabView.qml")
+        icon:FluentIcons.AllApps
+        FluPaneItem{
+            title:"TabView"
+            image:"qrc:/res/image/control/TabView.png"
+            recentlyAdded:true
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            onTap:{
+                navigationView.push("qrc:/T_TabView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                navigationView.push("qrc:/T_TreeView.qml")
+            }
         }
-    }
 
-    FluPaneItem{
-        title:"TreeView"
-        onTap:{
-            navigationView.push("qrc:/T_TreeView.qml")
+        FluPaneItem{
+            title:"MultiWindow"
+            onTap:{
+                navigationView.push("qrc:/T_MultiWindow.qml")
+            }
         }
     }
 
 
-    FluPaneItem{
-        title:"MultiWindow"
-        onTap:{
-            navigationView.push("qrc:/T_MultiWindow.qml")
-        }
-    }
-
-    FluPaneItemHeader{
+    FluPaneItemExpander{
         title:"Theming"
-    }
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                navigationView.push("qrc:/T_Theme.qml")
+            }
+        }
 
-    FluPaneItem{
-        title:"Theme"
-        onTap:{
-            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")
-        }
-    }
-    FluPaneItem{
-        title:"Typography"
-        onTap:{
-            navigationView.push("qrc:/T_Typography.qml")
-        }
-    }
-
-    FluPaneItemHeader{
+    FluPaneItemExpander{
         title:"Media"
-    }
-
-    FluPaneItem{
-        title:"MediaPlayer"
-        image:"qrc:/res/image/control/MediaPlayerElement.png"
-        recentlyAdded:true
-        desc:"A control to display video and image content."
-        onTap:{
-            navigationView.push("qrc:/T_MediaPlayer.qml")
+        icon:FluentIcons.Media
+        FluPaneItem{
+            title:"MediaPlayer"
+            image:"qrc:/res/image/control/MediaPlayerElement.png"
+            recentlyAdded:true
+            desc:"A control to display video and image content."
+            onTap:{
+                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 item = children[i]
+        var items = navigationView.getItems();
+        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 item = children[i]
+        var items = navigationView.getItems();
+        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){
-        for(var i=0;i<children.length;i++){
-            if(children[i].key === item.key){
+    function startPageByItem(data){
+        var items = navigationView.getItems();
+        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/main.cpp

@@ -18,7 +18,6 @@ int main(int argc, char *argv[])
     QCoreApplication::setOrganizationName("ZhuZiChu");
     QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QCoreApplication::setApplicationName("FluentUI");
-    //    QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
     QQuickStyle::setStyle("Basic");
     QGuiApplication app(argc, argv);
     QQmlApplicationEngine engine;

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
             }

example/page/MediaPage.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+FluWindow {
+
+    width: 640
+    height: 480
+    minimumWidth: 640
+    minimumHeight: 480
+
+    title:"视频播放器"
+
+
+    FluAppBar{
+        id:appbar
+        title:"视频播放器"
+        width:parent.width
+    }
+
+
+    FluMediaPlayer{
+        id:player
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: appbar.bottom
+            bottom: parent.bottom
+        }
+        //                source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
+        source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+        //                source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
+    }
+
+
+}

example/qml.qrc

@@ -152,5 +152,6 @@
         <file>global/ItemsOriginal.qml</file>
         <file>global/qmldir</file>
         <file>global/ItemsFooter.qml</file>
+        <file>page/MediaPage.qml</file>
     </qresource>
 </RCC>

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/FluentUI.pro

@@ -1,5 +1,5 @@
 QT          += qml quick svg
-CONFIG      += plugin c++11
+CONFIG      += plugin c++17
 TEMPLATE    = lib
 TARGET      = FluentUI
 TARGET      = $$qtLibraryTarget($$TARGET)

src/controls/FluAppBar.qml

@@ -55,13 +55,6 @@ Rectangle{
         height: root.height
         spacing: 0
 
-        TFpsMonitor{
-            Layout.alignment: Qt.AlignVCenter
-            Layout.rightMargin: 20
-            Layout.topMargin: 5
-            color:root.textColor
-            visible: showFps
-        }
 
         RowLayout{
             Layout.alignment: Qt.AlignVCenter

src/controls/FluMediaPlayer.qml

@@ -28,7 +28,9 @@ Rectangle {
         property bool autoSeek:true
         source: control.source
         videoOutput: video_output
-        audioOutput:audio_output
+        audioOutput: AudioOutput{
+            id:audio_output
+        }
         onErrorChanged:
             (error)=> {
                 console.debug(error)
@@ -41,10 +43,9 @@ Rectangle {
         onMediaStatusChanged:
             (status)=> {
                 if(status===2){
-                    mediaplayer.play()
-                }else if(status===5){
                     slider.maxValue = mediaplayer.duration
                     showControl = true
+                    mediaplayer.play()
                 }
             }
     }
@@ -53,10 +54,6 @@ Rectangle {
         slider.seek(0)
     }
 
-    AudioOutput{
-        id:audio_output
-    }
-
     VideoOutput {
         id:video_output
         anchors.fill: parent
@@ -66,21 +63,23 @@ Rectangle {
         height: 100
         y:showControl ? control.height - 110 : control.height
         anchors{
-            left: parent.left
-            right: parent.right
-            leftMargin: 10
-            rightMargin: 10
+            horizontalCenter: parent.horizontalCenter
         }
+        width: 460
+        opacity: showControl
         MouseArea{
             anchors.fill: parent
         }
-
+        Behavior on opacity{
+            NumberAnimation{
+                duration: 150
+            }
+        }
         Behavior on y{
             NumberAnimation{
                 duration: 150
             }
         }
-
         Rectangle{
             anchors.fill: parent
             color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
@@ -102,13 +101,11 @@ Rectangle {
                 mediaplayer.autoSeek = true
                 mediaplayer.play()
             }
-
             onValueChanged: {
                 if(mediaplayer.autoSeek == false){
                     mediaplayer.position = value*mediaplayer.duration/slider.maxValue
                 }
             }
-
             onLineClickFunc:function(val){
                 mediaplayer.position = val*mediaplayer.duration/slider.maxValue
             }
@@ -170,11 +167,10 @@ Rectangle {
             }
         }
 
-
         FluIconButton{
             id:btn_volume
             iconSize: 17
-            iconSource:  audio_output.volume ?  FluentIcons.Volume :  FluentIcons.Mute
+            iconSource:  audio_output.muted ? FluentIcons.Mute  :  FluentIcons.Volume
             anchors{
                 left: parent.left
                 leftMargin: 5
@@ -182,7 +178,7 @@ Rectangle {
                 bottomMargin: 10
             }
             onClicked: {
-                audio_output.volume = !audio_output.volume
+                audio_output.muted = !audio_output.muted
             }
         }
 
@@ -200,7 +196,6 @@ Rectangle {
                 audio_output.volume = value/100
             }
         }
-
     }
 
     function formatDuration(duration) {

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:{
-                if(items){
-                    return items.children
-                }
-            }
+            model:handleItems()
             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/controls/TFpsMonitor.qml

@@ -1,71 +0,0 @@
-import QtQuick
-import FluentUI
-
-Item {
-
-    readonly property alias fps: _private.fps;
-    readonly property alias fpsAvg: _private.fpsAvg;
-    property color color: "#C0C0C0"
-    property Component contentItem: contentComponent;
-
-    id: control
-    width: contentItemLoader.width + 5;
-    height: contentItemLoader.height + 5;
-
-
-
-    Component{
-        id:contentComponent
-        FluText{
-            color:control.color
-            text: " Avg " + fpsAvg + " | " + fps + " Fps";
-        }
-    }
-
-    FluObject{
-        id:_private;
-        property int frameCounter: 0
-        property int frameCounterAvg: 0
-        property int counter: 0
-        property int fps: 0
-        property int fpsAvg: 0
-    }
-
-    Rectangle {
-        id: monitor
-        radius: 3
-        width: 6
-        height: width
-        opacity: 0;
-
-        NumberAnimation on rotation {
-            from:0
-            to: 360
-            duration: 800
-            loops: Animation.Infinite
-        }
-        onRotationChanged: _private.frameCounter++;
-    }
-
-    Loader{
-        id:contentItemLoader
-        sourceComponent: contentItem
-    }
-
-    Timer {
-        interval: 2000
-        repeat: true
-        running: visible
-        onTriggered: {
-            _private.frameCounterAvg += _private.frameCounter;
-            _private.fps = _private.frameCounter/2;
-            _private.counter++;
-            _private.frameCounter = 0;
-            if (_private.counter >= 3) {
-                _private.fpsAvg = _private.frameCounterAvg/(2 * _private.counter)
-                _private.frameCounterAvg = 0;
-                _private.counter = 0;
-            }
-        }
-    }
-}

src/res.qrc

@@ -22,7 +22,6 @@
         <file>controls/FluIcon.qml</file>
         <file>controls/FluDivider.qml</file>
         <file>controls/FluTooltip.qml</file>
-        <file>controls/TFpsMonitor.qml</file>
         <file>controls/FluTextBoxBackground.qml</file>
         <file>controls/FluMultiLineTextBox.qml</file>
         <file>controls/FluWindowResize.qml</file>
@@ -60,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>