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

Posted 2023-02-14

【中文标题】如何在 Qt QML 中创建多屏应用程序

【英文标题】：how to create multiscreen application in Qt QML

【发布时间】：2016-10-04 06:34:39

【问题描述】：

很简单的问题。

这是关于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 文件应该如何？？？

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

谁能给我发个代码？

【问题讨论】：

如果您不了解如何编码，您应该先阅读 Qt 的文档。您需要学习正在使用的工具包，而不是要求为您编写代码。如果您已经有，请发布您的（最少）代码并说明具体问题是什么。

我刚刚开始学习。但是文档非常模糊。是的，他们有很好的细节。但是像这样的细节很难找到。我只是想知道做一些基本的东西而不是高级的..谢谢！请建议是否有可用的教程。

文档其实很丰富，尤其是对于新手的需求。滚动您自己的堆栈视图元素是微不足道的。但是你必须先学习语言基础，急于学习并不是最好的学习方式。

qmlbook.github.io/index.html

你真正需要的只是一个常规的Item，了解如何动态创建对象，以及如何将它们放入 JS 数组中以便跟踪和管理他们的知名度和寿命。

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

【讨论】：

再问一个问题。如果我将所有屏幕都放在单独的文件中。那么使用 C++ 代码控制它们将易于调试或使用 QML？哪个是专业的方式？

@Dannysam 您不应该真正从 C++ 控制 QML 对象，即使它可能更像是一种反模式。专业的方法是使用 C++ 作为核心逻辑，使用 QML 作为 GUI。然后，您可以连接要从 QML 使用的公共核心逻辑 API。 GUI 应该访问核心逻辑，而不是相反。如果屏幕很大或者您打算重用它们，建议将屏幕放在不同的文件中，并且将它们放在单独的文件中允许将它们用作封装组件。

【参考方案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"
    

【讨论】：

你能检查一下这个问题吗。link Loader 是一项繁重的任务，在 QtQuick 1.1 中是否有堆栈视图？如果没有，我该如何进行？

@Dannysam Qt 4.8 中没有 StackView，它仅包含在 Qt 5.7 中。您可以尝试使用 Loader::sourceComponent 从 Component element 加载屏幕，我不确定，但它可以更快。

这行不通。当您加载新屏幕时，这将破坏前一个屏幕，这不是堆栈视图的工作方式。当您返回上一个屏幕时，您会发现您的所有更改都已被破坏，因为它不是您在打开子视图之前使用的视图，而是一个全新的空视图。

ddriver 正确。这不是最好的解决方案。但在某些情况下，它可能已经足够好了。

" 在某些情况下它可能已经足够好了" - 不是在问题的情况下。此外，该鼠标区域将阻挡下方的所有内容，无法与加载的元素进行交互。