QML-自定义模块

一、使用场景

使用情景就是不可再修改的QML或者js文件，可定义成模块，分为如下情况

1、自定义控件

这里的自定义控件可以理解为最小单位控件，不可再修改，与QML的Button、Text等有同样的地位；不要与能够修改或者带逻辑的控件混淆；

2、存放公共变量、函数的JS

如某个JS文件里存放工程所需的公共函数；

3、字体库等

如FontAwesome。

本文以自定义公共控件为例 。

二、工程准备

1、新建工程，在根目录下添加专门存放QML文件的文件夹：

Qml

2、Qml文件夹添加资源文件用于管理所有QML文件

qml.qrc

3、资源文件添加前缀

qml

可根据自己需要设置其他名字，也可不添加

4、在Qml文件夹里新增文件夹

WPControls

这个文件夹以后就用于存储我们所有的公共/自定义控件

5、在WPControls文件夹里添加一些自定义QML控件，注意大写字母开头。这里增加了三个：

FaBtn.qml
WpTextInput.qml
ComboboxView.qml

6、在WPControls文件夹里添加文件：qmldir，并输入模块信息、控件信息

module WPControls
WPFaBtn 1.0 FaBtn.qml
WpTextInput 1.0 WpTextInput.qml
ComboboxView 1.0 ComboboxView.qml

WPControls：模块名，必须写在开头

WPFaBtn、WpTextInput、ComboboxView：控件名

1.0：版本号

Xxx.qml：对应qml文件

7、通过qml.qrc资源文件将所有自定义QML文件添加到工程

 

 

 8、设置QML运行时搜索库路径

上面的步骤只是将模块定义好了，但是运行的时候QML是无法找到这个模块的，所以需要告诉QML去哪里寻找模块。

 可以写一个单例类做这个事情：

 

 方法就是：获取运行main.qml的view的engine，通过addImportPath函数，将寻找路径放进去。

为什么这个路径是：qrc:/qml呢？

【这个有个重点也是难点，这地方弄错了会运行时报：xxx模块没有安装】

因为在Qt里一个模块就是一个文件夹，这里我们的模块就是WPControls文件夹，我们需要告诉Qt我们的模块文件夹在哪里，通过第七步的图可看到，WPControls文件夹的就在qrc:/qml里。

这个"qml"就是我们资源文件的前缀，如果没有前缀【也就是前缀为：/】，那么这里应该填：qrc:/

 9、使用模块

import QtQuick 2.6
import QtQuick.Window 2.2
import WPControls 1.0   //引入模块
Rectangle {
    visible: true
    width: 640
    height: 480
    
    //自定义的控件
    WPFaBtn{

    }
}

9、设置模块语义高亮

其实前面步骤完成之后，程序是可以正常运行起来了的，但是我们可能看到import模块时，QtCreator提示没有找到这个模块，这个问题单纯就是在工程非运行时，Qt不知道这个模块在哪里，毕竟上面第八步的import函数是写在cpp中，只有运行才有效。

所以为了解决这个问题，我们打开.pro文件，加入这句话：

 

 

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH += $$PWD/Qml            #support:WPControls

这句话代表，QtCreator高亮语法时，会从当前的Qml文件夹下去查找模块，如果找到了就不会报错了。

注意这里的路径是文件夹路径，是以源码路径为基础往下查找的地方【PWD就是当前源码路径】；

而第八步的import路径是以资源文件路径，以qrc开头。【即使有多个qrc文件，Qt都认为是一个qrc，只通过前缀去区分？】

 

 

 

PS：

1、查看cpp中当前import了的路径：

QQmlApplicationEngine engine;
for(QString path : engine.importPathList())
    qDebug() << path;

 2、设置单例控件

qml文件开头：

//XXX.qml
pragma Singleton

qmldir：

singleton XXX 1.0 XXX.qml

js设置单例：https://www.cnblogs.com/judes/p/15672337.html

 

3、QML找模块的步骤

import XXX 1.0

①、在addImportPath的路径和默认路径里去找XXX文件夹

②、没找到则报模块未安装；

③、找到了则加载XXX文件夹里的qmldir文件，解析里面的实例化内容

 这样理解了，就容易填这个路径了

 

4、如果运行没有问题，并且很确定高亮路径也没有问题，但是代码就是高亮失败，可以尝试重启下QtCreator

5、如果XXX是一个文件夹，并且是一个模块【里面有个qmldir】，如果里面有个a.qml，那么这个a.qml是不能import XXX 1.0的，运行时会报找不到文件

 6、

qmldir: 用于组织自定义的QML插件

.qmltypes：qml插件的解释文件，用于QtCreator语法高亮。可通过Qt提供的工具qmlplugindump自动生成

QML_IMPORT_PATH: 导入插件路径，以支持插件的语法高亮。个人理解是如果纯QML文件的扩展，没有封装到C++中，则直接导入路径，即可支持语法高亮，如果有C++封装，则需要通过.qmltypes支持高亮。

addImportPath: 添加import寻址目录，c++代码里添加，没有前两项，只是QtCreator不能高亮，没有这种，则插件无法使用