5.自定义侧边导航菜单组件（基于menubar,menu,menuitem）

目录

• 效果预览
• 使用代码

效果预览

qml中实现可折叠的侧边导航栏方法 使用menubar 与menubaritem ，menu，menuitem是做不到的

为此将以上组件重写，实现侧边可折叠

使用代码

import QtQuick 2.12
import BinUI 1.0
import QtQuick.Controls 2.12
import "../"

Item {


    // 动态创建

    Component.onCompleted: {


        // 动态创建菜单栏
        for(var i = 0;i<lm.length;i++){
            var menuInfo = com_menu.createObject(menuBar,{title:lm[i].label,visible:lm[i].opened});
            if(lm[i].children){
                for(var j=0;j<lm[i].children.length ;j++){
                    var menuInfo1 = com_menu.createObject(menuBar,{title:lm[i].children[j]});
                    menuInfo.addMenu(menuInfo1)
                }
            }
            menuBar.addMenu(menuInfo)
        }

    }

    property var  lm: [
        {label:qsTr("导航1"),children:["选项1"],opened:true}, //默认展开
        {label:qsTr("导航2"),children:[]},
        {label:qsTr("导航3"),children:["选项1"]},
        {label:qsTr("导航4"),children:[]},
    ]



    Column{
        x: 10
        y: 10
        spacing: 10

        Row{
            Label{
                text: qsTr("当前被选中的菜单项：")
            }
            Label{
                id: selectedMenu_Label
            }
        }

        BinMenuBar{
            id: menuBar

            onSelectedChanged: {
                selectedMenu_Label.text = instance.text
            }
        }


    }

    Component{
        id: com_menu
        Menu{
        }
    }


}