如何使用 QML StackView?
Posted
技术标签:
【中文标题】如何使用 QML StackView?【英文标题】:How to Use QML StackView? 【发布时间】:2017-07-25 15:45:12 【问题描述】:我是 QMl 的初学者,在 QT C++ 中的 StackWidget 上工作得更多。在 QML 中,我对使用 stackView 感到困惑,并编写了以下代码:
Window
visible: true
width: 640
height: 480
title: qsTr("Stack view")
MainForm
StackView
id: stackView
x: 0
y: 0
width: 360
height: 360
initialItem: page1
Rectangle
id: page1
//anchors.fill: parent
color: "lightgreen"
Button
id: buttonPage1
text: "back to 2"
anchors.centerIn: parent
onClicked:
stackView.pop() //**Is THIS CORRECT**
stackView.push(page2) //**Is THIS CORRECT**
TextEdit
id: te1
width: 105
height: 40
text: "enter"
Rectangle
id: page2
//anchors.fill: parent
color: "lightblue"
Button
id: buttonPage2
text: "back to 1"
anchors.centerIn: parent
onClicked:
stackView.pop() //**Is THIS CORRECT**
TextEdit
id: te2
width: 109
height: 29
text: "enter"
以下是问题:
在 StackWidget 中,我使用 setCurrentIndex 设置所需的页面,我知道在 QML 中我应该使用 push 和 pop。在这种情况下,如何根据一些选择使用 push 和 pop 在 page1 和 page2 之间导航。 ?
最初,我可以将所有页面加载到 stackView 吗?
当我从stackView中弹出一个项目时,如何保存页面中的内容?
【问题讨论】:
听起来你想要StackLayout而不是StackView。 【参考方案1】:我知道我不会准确回答你关于如何使用StackView
的问题,因为我认为你不想在你的描述后面加上StackView
。
StackView
的用例是,当您将页面(顾名思义)放在堆栈上时。如果您只想在无法确定的页面之间切换,哪一个在逻辑上低于另一个,StackView
不是您想要的,您可能需要考虑SwipeView
。
在SwipeView
中,页面以并排的方式共存。从 Qt 5.9 开始,它们有一个 interactive
属性,您可以使用它来禁用 滑动行为。
在这里你可以通过设置currentIndex
来选择你想要显示的页面。
但是,SwipeView
将根据需要创建其页面,以减少内存和 CPU 负载(有效地禁用未加载页面的绑定)。如果数据未存储在页面本身之外的model
中,这可能会导致数据丢失。
如果您想同时加载所有页面,并且只想切换可见页面,则可以使用简单的自定义组件:
Item
property int currentIndex
Page1 visible: parent.currentIndex === 0
Page2 visible: parent.currentIndex === 1
Page3 visible: parent.currentIndex === 2
...
或者你喜欢:
MyView.qml
Item
id: root
property int currentIndex: 0
default property Item newContent
onNewContentChanged:
newContent.parent = root
newContent.visible = Qt.binding(bindingsClosure(root.children.length - 1))
function bindingsClosure(index) return function() return root.currentIndex === index
main.qml
MyView
Page1
Page2
Page3
【讨论】:
您上面的答案几乎符合我的要求,我会尝试 swipeView 然后将其标记为有答案。以上是关于如何使用 QML StackView?的主要内容,如果未能解决你的问题,请参考以下文章
如何在QML应用中得到一个Item的所有属性,信号及方法,qmlitem
QML StackView:动态更改replaceEnter/Exit动画