Qt QML 模块化管理(三)—— qmldir的化繁为简

---

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

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.0

Window {
	...
	Qml11 {
	    anchors.horizontalCenter:   parent.horizontalCenter
	}
	Qml13 {
	    anchors.horizontalCenter:   parent.horizontalCenter
	}
}

2. 源码和运行结果

测试代码如下：

//Qml11.qml
import QtQuick 2.0

Text {
    text: qsTr("Text11")
}

import QtQuick 2.12
import QtQuick.Window 2.12

import QmlTest1 1.0
import QmlTest2 1.0

Window {
    visible: true
    width: 250
    height: 250
    title: qsTr("Image")

    Column {
        spacing:  10
        anchors.fill:       parent

        Text {
            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资源

---

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

---

姊妹篇:

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

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

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