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