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

关于这个问题，Stackoverflow上还有另一个问题，但我找不到可接受的解决方案。所以我再问一次，因为老问题不被注意了。

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

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

有什么解决方案吗？

假设您有一个名为 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文件的最简单方法。

最后我从互联网上挖出来了。假设要包含的文件是这个目录结构中的"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";
  }
  ...
}

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

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

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

这样很容易。将所有文件组件放在类似"组件"的文件夹中。在您的情况下，文件名可以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
}

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

main.qml
componentsToolbar.qml

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

我刚刚打电话给商人。它应该以智能感知显示。

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

}

你可以把它称为加载器

您可以直接调用：

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

像这样，加载Feature1.qml

使用通过构建向导创建的样板 QMake 项目，我能够在添加后简单地使用其文件名从相邻的 QML 文件导入组件

import "."

导入当前目录。

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

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

相关内容

最新更新

热门标签：