QML StackView

QML StackView

• 官方参考文档：https://doc.qt.io/qt-5/qml-qtquick-controls2-stackview.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)

        Component
        {
            id:rectPage
            Rectangle
            {
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        stack.pop()
                    }
                }
            }
        }


        StackView
        {
            id: stack
            anchors.fill: parent

            initialItem: Component
            {
                Rectangle
                {
                    color: rootItem.colorBuilder()

                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            stack.push(rectPage, {color: rootItem.colorBuilder()})
                        }
                    }
                }
            }
        }
    }
}

• 输出：

StackView加载自定义组件

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)

        Component
        {
            id:dateLab
            DateTimeLabel
            {
                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        stack.pop()
                    }
                }
            }
        }


        StackView
        {
            id: stack
            anchors.fill: parent

            initialItem: Component
            {
                Rectangle
                {
                    color: rootItem.colorBuilder()

                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            //方式1 属性值不能是required
                            stack.push(dateLab, {colorBuilder: rootItem.colorBuilder, text: "Test" })

                            //方式2   属性值不能是required  DateTimeLabel.qml 添加MouseArea，可使用stack
                           // stack.push("./DateTimeLabel.qml", {colorBuilder: rootItem.colorBuilder()})
                        }
                    }
                }
            }
        }
    }
}