C++ 从 QML 文件中包含另一个 QML 文件

Include another QML file from a QML file

提问by jondinham

There's another question on Stackoverflow about this matter but I don't find the accepted solution possible. So I ask again because the old question is out of attention.

Stackoverflow 上还有另一个关于此问题的问题，但我找不到可接受的解决方案。所以我又问了一遍，因为老问题已经不在意了。

The situation is this way. I have application screens defined by 'main.qml', 'feature1.qml', 'feature2.qml'.

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

These screens share the same toolbar below title bar. The toolbar has multiple items so copy-paste the QML code is like crazy. This question: QML file include - or one monolithic file (structure QML code)?says it's possible to just use QML file name as component name but I can't get it working.

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

Any solution? with details pls.

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

回答by koopajah

Let's assume you have a file called main.qmland a component in another file called MyCustomText.qml. If both files are in the same directory you can directly load the component like this:

假设您有一个名为的文件main.qml和另一个名为MyCustomText.qml. 如果两个文件在同一目录中，您可以像这样直接加载组件：

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

If MyCustomText.qmlis in another subdirectory MyComponentsfor example to group all your custom components together, you first need to importthe directory before using the component the same way:

如果MyCustomText.qml在另一个子目录中MyComponents，例如将所有自定义组件组合在一起，import则在使用组件之前首先需要以相同的方式访问该目录：

// in Main.qml
import "MyComponents"

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

Another important thing to note is that your QMLfiles should always start with an uppercase letterif you want to be able to use them this way

另一个需要注意的重要事项是，如果您希望能够以这种方式使用它们，您的QML文件应始终以大写字母开头

Of course your Loadersolution works too but this is the easiest way to import QML files in other components.

当然，您的Loader解决方案也有效，但这是在其他组件中导入 QML 文件的最简单方法。

回答by jondinham

Finally I have dug it out from internet. Let's say the to-be-included file is 'mycomponent.qml' in this directory structure (Qt Quick):

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

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

The content of 'mycomponent.qml' (for example):

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

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

We have to load it this way (in 'main.qml'):

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

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

回答by bootchk

See Qt documentation about reuseable components.

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

The imported QML file defines a type whose name is the same as the filename (capitalized, less the .qml suffix). QML calls the type a reuseable component. You use that type name to instantiate an object in the importing QML document (file.)

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

Its not like a C language include, where the text of the included file is inserted into the including file. Its more like importing the name of a class in Python, and then instantiating an object of that class in the importing file. Or somewhat similar to Javascript, the imported file is creating a prototype object, and the importing file is prototypically inheriting from it. Except note the discussion about the root object and what properties of the component will be visible (because of QML's document scoping.) You won't be able to access everything in the imported file as if it were a C include, a Python import, or a JS inheritance.

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

回答by Kent Vincent Dela Cruz

You can just call the Name of the qml. for ex. I have 2 qml file. The main.qml and Merchant.qml

您可以只调用 qml 的名称。例如。我有 2 个 qml 文件。main.qml 和 Merchant.qml

I just called the Merchant. it should be showed in intellisense.

我刚给商家打了电话。它应该以智能感知方式显示。

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

}

}

You can just call that compenent to Loader

您可以将该组件称为 Loader