1. 新建qmldir文件

打开源码文件夹，直接复制FlightDisplay文件夹改名为QmldirTest，里面只有一个qmldir文件：
在这里插入图片描述

2. 新建QML文件

src下新建QmldirTest文件夹，然后在该文件夹下新增 “TestQml1.qml” 文件，如下：
在这里插入图片描述
要添加在 /qml的前缀下：

3. qrc中添加qmldir和QML文件

具体步骤如下，其一添加上面1 2中的qmldir和qml文件，其二再修改别名使得都在QmldirTest下，其三记得“ctrl + s” 保存qgroundcontrol.qrc，再左侧就会自动出现在QmldirTest同一文件下。
在这里插入图片描述

4. 修改qmldir和QML文件

QmldirTest\qmldir 中：

Module QGroundControl.QmlTest  #声明模块的模块标识符，必须与模块的安装路径匹配，必须是文件的第一行

#依次为类型名称 | 类型的模块版本 | QML文件名（这里还有可选参数[singleton]用于声明单例类型）
TestQml1              1.0        TestQml1.qml

QmldirTest\TestQml1.qml 中：

import QtQuick 2.0
import QtQuick.Controls 2.5

Rectangle {
    
    
    anchors.top:                parent.top
    anchors.topMargin:          20
    anchors.horizontalCenter:   parent.horizontalCenter
    width:                      labeltest.implicitWidth * 1.2
    height:                     labeltest.implicitHeight * 1.5
    color:                      "green"
    radius:                     height / 2
    border.width:               2
    border.color:               "black"

    Label {
    
    
        id:                     labeltest
        anchors.centerIn:       parent
        text:                   "qmldir 模块添加测试！"
        color:                  "white"
        font.bold:              true
        font.pointSize:         14
    }
}

5. 如何使用

FlightDisplayView.qml 中导入模块：
在这里插入图片描述
最后一行调用 TestQml1 ：

代码：

//qgroundcontrol\src\FlightDisplay\FlightDisplayView.qml:
import QGroundControl.QmldirTest    1.0
...

// 最后一行调用TestQml1 
TestQml1 {
    
    
}

如下，执行后TestQml1被执行
在这里插入图片描述
当然中间也还有两个步骤是qmldir模块的关键，且看第6和第7点，QGC已经写了，我们只需知道在哪就好。

6. pro文件导入QML模块的路径

（无需操作）

如下， qgroundcontrol.pro 中指定 QML_IMPORT_PATH 的路径为 $$PWD/src/QmlControls
在这里插入图片描述
即：

每个文件夹下只有一个qmldir文件

7. 安装模块路径

（无需操作）

如下，执行 pEngine->addImportPath(“qrc:/qml”); 即可。
在这里插入图片描述
绿色框，为QGC加载整个QML界面的根文件，可点击这里进一步了解：QGC源码分析——UI界面的启动流程（从mian.cc到五大视图），安装模块一定需要在根文件启动前执行。

好了，到此为止，你也尝试一下吧~

关于QGC地面站其它文章请点击这里: QGC地面站

姊妹篇:

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

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

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

QGC地面站手把手教你改——如何添加qmldir模块文件

QGC中手把手教你添加qmldir模块