QML StackLayout

最新推荐文章于 2024-07-29 17:24:40 发布

NGC_2070

最新推荐文章于 2024-07-29 17:24:40 发布

阅读量523

点赞数 1

分类专栏： # QT

本文链接：https://blog.csdn.net/baidu_41388533/article/details/117402715

版权

QT 专栏收录该内容

110 篇文章 25 订阅

订阅专栏

这篇博客介绍了如何在QML中利用QMLStackLayout组件进行页面切换。通过示例代码展示了如何创建菜单按钮并动态添加到布局中，以及如何在点击按钮时改变StackLayout的当前页面。示例还包含了颜色生成器的使用，为每个页面设置不同的背景颜色。

摘要由CSDN通过智能技术生成

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()})
               }
           }
        }
    }
}