qmldir的化繁为简

1. qmldir模块化管理流程
- 1.1 添加qmldir文件
- 1.2 修改qmldir文件
- 1.3 pro文件导入QML模块的路径
- 1.4 main.cpp导入安装模块路径
- 1.5 修改文件别名
- 1.6 模块使用
2. 源码和运行结果

所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！

QML其它文章请点击这里: QT QUICK QML 学习笔记

姊妹篇:

qmldir实例——QGC地面站中手把手教你添加qmldir模块文件

QT QML 模块化管理(一)——添加工程组(文件组)

QT QML 模块化管理(二)——前缀(Prefix)和别名管理

当然仅用别名相对路径的管理是不够的，当项目越大的时候，就得看qmldir的管理管理了，具体使用流程如下：

1. qmldir模块化管理流程

1.1 添加qmldir文件

添加空文本，并命名为qmldir。

其中路径相当重要，如上qmldir的父目录为QmlTest1，那么qmldir的模块名必须为QmlTest1，这是经过了多次测试得出来的惨痛教训。

1.2 修改qmldir文件

具体格式和说明可搜官方帮助文档： Module Definition qmldir Files
这里只介绍最简单的形式（能用就好）

Module QmlTest1 #声明模块的模块标识符，必须与模块的安装路径匹配，必须是文件的第一行#依次为类型名称 | 类型的模块版本 | QML文件名（这里还有可选参数[singleton]用于声明单例类型）
Qml11           1.0           Qml11.qml
Qml13           1.0           Qml13.qml

1.3 pro文件导入QML模块的路径

打开工程文件pro1.pro 并修改如下：

# QML_IMPORT_PATH =
#修改为
QML_IMPORT_PATH += $$PWD

能正常运行，但是有显示错误，如下：（pro1.pro 中不做任何修改也能正常运行，也会报显示错误）

添加路径为 $$PWD/qmldir，不会有显示错误

QML_IMPORT_PATH += $$PWD/qmldir

1.4 main.cpp导入安装模块路径

在main.cpp中增加红色框语句即可

engine.addImportPath(QStringLiteral("qrc:/"));

1.5 修改文件别名

注意：
① 经测试不管qmldir在实际文件中是否和qml文件处于同一文件夹下，都需要修改别名使得在同一层文件夹下
② 如果qmldir和qml在实际文件中不在同一目录下，组件调用的时候会索引不到，建议qmldir和qml放入同一目录下如QmlTest2

1.6 模块使用

只需导入模块，然后调用文件名就好

...
import QmlTest1 1.0
import QmlTest2 1.0Window {...Qml11 {anchors.horizontalCenter:   parent.horizontalCenter}Qml13 {anchors.horizontalCenter:   parent.horizontalCenter}
}

2. 源码和运行结果

测试代码如下：

//Qml11.qml
import QtQuick 2.0Text {text: qsTr("Text11")
}

import QtQuick 2.12
import QtQuick.Window 2.12import QmlTest1 1.0
import QmlTest2 1.0Window {visible: truewidth: 250height: 250title: qsTr("Image")Column {spacing:  10anchors.fill:       parentText {text: qsTr("--------------Text Test--------------")anchors.horizontalCenter:   parent.horizontalCenter}//可以直接调用，因为同文件级别Qml1 {anchors.horizontalCenter:   parent.horizontalCenter}//导入的 QmlTest1模块中Qml11 {anchors.horizontalCenter:   parent.horizontalCenter}//导入的 QmlTest1模块中Qml13 {anchors.horizontalCenter:   parent.horizontalCenter}//导入的 QmlTest2模块中Qml21 {anchors.horizontalCenter:   parent.horizontalCenter}}
}

运行如下：

【参考】【原创】qmldir模块化管理qml资源