QML StackLayout_stacklayout qml 官网

QML StackLayout

• 官方参考文档：https://doc.qt.io/qt-5/qml-qtquick-layouts-stacklayout.html
• 参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd

示例

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs
 
Window
{
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"
 
    Item
    {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)
 
        Row
        {
            id: header
            Component
            {
                id: menuButton
                Button
                {
                    required property string menuText
                    required property var layout
                    required property int index
 
                    text: menuText
                    onClicked:
                    {
                        layout.currentIndex = index
                    }
 
                }
            }
 
 
            Component.onCompleted:
            {
                let munu = ["Home", "Help"]
                munu.forEach(function(item, index)
                {
                    menuButton.createObject(header, {layout:stacklayout, menuText:item, index: index})
                }
                )
            }
        }
 
        StackLayout {
            id: stacklayout
            anchors.top: header.bottom
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
 
           Component
           {
               id: pageComponent
               Rectangle{}
           }
 
           Component.onCompleted:
           {
               for(let i = 0; i < 2; ++i)
               {
                   pageComponent.createObject(stacklayout, {color: rootItem.colorBuilder()})
               }
           }
        }
    }
}

• 效果：