Qt Quick QML窗口中的多种模式

Question

假设我有一个QML窗口，它包含一堆不同的控件：

Window {
...
TextEdit { ... }
CheckBox { ... }
Button { ... }
etc

}

现在我想要我的窗口改变"；模式"；并显示一组完全不同的控件。

想象一下它是一个多屏幕表单的一部分。当前状态是表单的第一页；下一个"；按钮转到表单的第2页。我想添加一组代表第2页的新控件。

在QtQuick/QML中，正确的组织方式是什么？

Answer 1

一种常见的方法是使用StackView。组织应该是这样的：

Window {
StackView {
id: stackView
initialItem: page1
}
Item {
id: footerItem
// Maybe add other buttons here too
Button {
id: nextBtn
text: "Next"
onClicked: {
stackView.push(page2);
}
}
}
Component {
id: page1
Page1 {
// Define this in separate Page1.qml file
// This is where your page 1 controls go.
}
}
Component {
id: page2
Page2 {
// Define this in separate Page2.qml file
// This is where your page 2 controls go.
}
}
}

Answer 2

我可能会用"返回"；以及"；下一个"；按钮使用StackLayout。StackLayout类提供了一个项目堆栈，其中一次只有一个项目可见。您可以通过更新currentIndex进入下一个或上一个模式。

StackLayout {
id: layout
anchors.fill: parent
currentIndex: 1
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
Rectangle {
color: 'plum'
implicitWidth: 300
implicitHeight: 200
}
}