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

Answer 4

您可以只调用 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 5

您可以直接调用：

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

像这样，加载Feature1.qml

Answer 6

就这么简单。 将所有文件组件放在“components”之类的文件夹中。 在您的情况下，文件的名称可以是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