包含 QML 文件中的另一个 QML 文件

Question

Stackoverflow 上还有一个关于此事的问题，但我找不到可行的可接受的解决方案。所以我再问一次，因为老问题已经不受关注了。

情况是这样的。我有由“main.qml”、“feature1.qml”、“feature2.qml”定义的应用程序屏幕。

这些屏幕在标题栏下方共享相同的工具栏。工具栏有多个项目，因此复制粘贴 QML 代码就像疯狂一样。这个问题：QML 文件包含 - 或一个整体文件（结构 QML 代码）？ 说可以只使用 QML 文件名作为组件名称，但我无法让它工作。

有什么解决办法吗？请详细说明。

Answer 1

假设您有一个名为

main.qml

的文件，以及另一个名为

MyCustomText.qml

的文件中的组件。如果两个文件位于同一目录中，您可以直接加载组件，如下所示：

// in Main.qml
Rectangle {
  id: root
  MyCustomText {
    text: "This is my custom text element"
  }
}

如果

MyCustomText.qml

位于另一个子目录中

MyComponents

例如，要将所有自定义组件分组在一起，您首先需要

import

目录，然后以相同的方式使用该组件：

// in Main.qml
import "MyComponents"

Rectangle {
  id: root
  MyCustomText {
    text: "This is my custom text element"
  }
}

另一个需要注意的重要事项是，如果您希望能够以这种方式使用它们，您的

QML

文件应该始终以大写字母开头

当然，您的

Loader

解决方案也可以工作，但这是在其他组件中导入 QML 文件的最简单方法。

Answer 2

终于从网上挖出来了。假设此目录结构中要包含的文件是“mycomponent.qml”（Qt Quick）：

projectdir/
  qml/
    projectname/
      main.qml
      mycomponent.qml

'mycomponent.qml'的内容（例如）：

Text {
  text:"Hello, Scooby Doo!";
}

我们必须以这种方式加载它（在“main.qml”中）：

Rectangle {
  ...
  Loader {
    source:"mycomponent.qml";
  }
  ...
}

Answer 3

请参阅有关可重用组件的 Qt 文档。

导入的 QML 文件定义了一个类型，其名称与文件名相同（大写，减去 .qml 后缀）。 QML 将该类型称为可重用组件。您可以使用该类型名称来实例化导入 QML 文档（文件）中的对象。

它不像C语言的include那样，将被包含文件的文本插入到包含文件中。它更像是在 Python 中导入类的名称，然后在导入文件中实例化该类的对象。或者有点类似于Javascript，导入的文件正在创建一个原型对象，并且导入的文件原型地继承自它。除了注意关于根对象的讨论以及组件的哪些属性将是可见的（因为 QML 的文档范围）。您将无法访问导入文件中的所有内容，就好像它是 C 包含、Python 导入一样，或者 JS 继承。

Answer 4

就这么简单。将所有文件组件放入“组件”之类的文件夹中。在您的情况下，文件名可以是

Toolbar.qml

。为您的工具栏编写 QML 代码，我的示例将绘制一个红色矩形。

 import QtQuick 2.6
    
    Item {
        width: 500
        height: 100
        Rectangle {
            width: 500
            height: 100
            color: "red"
            radius: width * 0.5
        }
    }

然后，在您想要使用此组件的屏幕中（例如，文件

main.qml

），就这么简单：

import "components" as Components
        
       
Components.Toolbar {
    Layout.fillHeight: true
}

注意文件的位置，所有组件仍然应以大写字母开头，在此示例中：

\main.qml
\components\Toolbar.qml

Answer 5

您只需调用 qml 的名称即可。 对于前。 我有 2 个 qml 文件。 main.qml 和 Merchant.qml

我刚刚给商家打电话了。它应该在智能感知中显示。

ApplicationWindow {
id: mainWindow
visible: true
Component{
    id: merchantsComponent
    Merchant{
        id: merchants
        width: mainWindow.width
        height: mainWindow.height
    }
}

}

你可以直接调用该组件到Loader

Answer 6

您可以直接拨打：

Window {
    id: mainWindow
    visible: true
    Feature1{}
}

像这样，加载

Feature1.qml

Answer 7

使用通过内置向导创建的样板 QMake 项目，我可以通过简单地使用其文件名

after我添加从相邻的 QML 文件导入组件

import "." 导入当前目录。

我还必须添加新的 QML 文件作为资源。在 .pro 中，我需要

resources.files = \
    main.qml \
    MyComponent.qml
resources.prefix = /$${TARGET}
RESOURCES += resources