首页 > 解决方案 > Qt Quick QML 窗口中的多种模式?

问题描述

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

Window {
  ...

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

}

现在我希望我的窗口在某个事件上改变“模式”,并显示一组完全不同的控件。

想象一下它是多屏表单的一部分。当前状态是表单的第一页。当用户单击“下一步”按钮时,它会转到表单的第 2 页。我想添加一组代表第 2 页的新控件。

在 QtQuick/QML 中组织这个的正确方法是什么?

标签: qtqmlqt5qtquick2qt-quick

解决方案


一种常见的方法是使用 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.
        }
    }

}

推荐阅读