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

---

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

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

如果有帮助到您，还请点赞+关注哦，感谢感谢！！！

---

姊妹篇:

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

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

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

QGC地面站——Release下模块未安装(module “QGroundControl.xxx“ is not installed)

---

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到五大视图） ，安装模块一定需要在根文件启动前执行。

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

如果在Release下遇到了模块未安装的bug，可以看看这里：QGC地面站——Release下模块未安装(module “QGroundControl.xxx“ is not installed)

---

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

如果有帮助到您，还请点赞+关注哦，感谢感谢！！！

---

姊妹篇:

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

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

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

QGC地面站——Release下模块未安装(module “QGroundControl.xxx“ is not installed)