如何在 Qt QML 中创建多屏应用程序

Question

很简单的问题。

这是关于Qt 4.8.5, QML, QtQuick 1.1

我无法理解 QML 中屏幕转换是如何发生的以及如何编码。

为简单起见，我在 3 个不同的 QML 文件中有 3 个不同的屏幕。

1.Home Screen
2.Setting Screen
3.Help Screen
all with width: 640 and height:480

每个屏幕不同，里面有不同的孩子。

现在我在主屏幕上有一个按钮可以进入设置屏幕，它有一个返回按钮可以返回。然后在 1 和 2 中都有一个显示帮助屏幕的帮助按钮。

现在我的 main.qml 文件应该如何？？？

为简单起见，请考虑屏幕只有导航按钮。

谁能给我发个代码？

Answer 1

如果您确定您的应用将固定在这 3 个屏幕上，您可以通过以下简单的方式摆脱困境：

Rectangle {
  id: app
  anchors.fill: parent
  Row {
    anchors.centerIn: parent
    Button {
      text: "settings"
      onClicked: set.visible = true
    }
    Button {
      text: "help"
      onClicked: help.visible = true
    }
  }
}
Rectangle {
  id: set
  anchors.fill: parent
  color: "red"
  visible: false
  Button {
    anchors.centerIn: parent
    text: "close"
    onClicked: set.visible = false
  }
}
Rectangle {
  id: help
  anchors.fill: parent
  color: "blue"
  visible: false
  Button {
    anchors.centerIn: parent
    text: "close"
    onClicked: help.visible = false
  }
}

您依次拥有所有 3 个“屏幕”，因此应用屏幕位于底部，设置和帮助位于顶部。然后你可以通过简单地控制可见性来切换屏幕。

如果您想要一个更动态的解决方案，请按照我在 cmets 中的提示来实现一个简单的堆栈视图，这很容易，并且是学习 QML 的一个很好的练习。

你绝对不想效仿 Konstantin T. 的榜样，而为什么一开始就支持这样一个有缺陷的例子是个谜。每次打开设置或帮助时，这种方法都会破坏您的应用程序屏幕，返回时您不会转到以前的屏幕，而是转到它的全新实例，丢失您以前的所有输入。此外，在其上放置鼠标区域可确保您无法与屏幕的任何元素进行交互。

Answer 2

您可以使用Loader 元素。它用于动态加载可视化 QML 组件。它可以加载 QML 文件（使用 source 属性）或 Component 对象（使用 sourceComponent 属性）。

例如：

Item {
    width: 200; height: 200
    Loader { 
        id: pageLoader
        source = "Page1.qml"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page2.qml"
    }
}