QML模块定义

一、模块的定义

在使用QML时,我们常常看到类似这样的语句:

?
import QtQuick 2.0
import QtSensors 5.0

通过这些import语句,我们就能使用QML中的相关控件了。

其实这就是导入模块的意思,它包括3个部分:import关键字、模块名称、版本号。

模块是一种封装的方式,设计它的人可以单独更新模块内容,然后更新版本号,对使用模块的人没有影响。在项目中,不同窗口可以使用同一模块中的一些类型。

Qt中已经有很多封装好的模块,我们可以在安装目录里找到:

更多介绍,可以参考官方文档:http://doc.qt.io/qt-5/qtqml-modules-topic.html

 

二、定义一个模块

模块是由一个名为 qmldir 的文件指定的,我们可以打开Qt中模块所在的文件夹看看,每个模块都对应一个qmldir文件:

为了便于理解,我举一个非常简单的例子——

定义一个名为CustomControl(自定义控件)的模块,这个模块里面有一个CustomButton.qml(自定义按钮)文件,也就是一个自定义的名为CustomButton的QML类型。

文件目录结构如下:

下面来分步说明:

1.CustomButton.qml

一个很普通的自定义按钮类型,代码可参考:按钮

2.qmldir

每个模块都有一个qmldir文件,在文件中设置模块的名称、指定自定义类型等。比如:

?
module CustomControl
CustomButton 1.0 ./controls/CustomButton.qml

 module <ModuleIdentifier> module关键字,后接模块标识符,每个qmldir文件只能有一个标识符。

 [singleton] <TypeName> <InitialVersion> <File> singleton用来声明一个单例类型,它是可省略的。TypeName是类型名称。InitialVersion用来指定版本号。File是QML类型对应文件所在的位置。

以本例来说,类型名是CustomButton,版本号为1.0,文件使用的是相对路径,表示controls文件夹下面的CustomButton.qml文件。

OK,通过以上两步,我们的模块就已经定义好了!

qmldir文件中更多复杂的定义可参考官方文档:点我!

 

三、使用自定义模块

我们在main.cpp中加载main.qml界面。

第一种方法,可以直接在main.qml中导入qmldir文件所在路径:

?
import "./CustomControl"

可以参考http://doc.qt.io/qt-5/qtqml-syntax-directoryimports.html中的讲解

 

另一种方法是使用QML导入路径,首先看一下main.cpp是如何加载QML文件的:

?
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral( "qrc:/main.qml" )));

首先定义一个QML引擎engine,然后通过engine传入qml文件。

当导入一个模块时,QML engine将会搜索导入路径 import path 来匹配模块。

可以通过 QQmlEngine::importPathList() 来查看导入路径有哪些:

?
QQmlApplicationEngine engine;
for (QString path : engine.importPathList())
     qDebug() << path;
engine.load(QUrl(QStringLiteral( "qrc:/main.qml" )));  

在我的电脑中,结果如下:

比如,我们平时使用的Qt Quick中的一些控件就在C:/Qt/Qt5.8.0/5.8/msvc2015/qml中。

可以看到,我们需要使用的自定义模块并不在这几个路径中的任意一个中,所以需要如何添加路径呢?

方法一:

使用 QML2_IMPORT_PATH 环境变量来指定模块所在路径,注意QML后面有个2。

在windows系统中,计算机 - 系统属性 - 高级系统属性 - 环境变量

设置完成后,Qt Creator中可能不会立即生效,不过重启一下就好了。

如果不想麻烦地修改电脑设置中的环境变量,我们可以直接在代码中添加:

?
qputenv( "QML2_IMPORT_PATH" , "C:/Users/kong/Documents/StyleDemo" );

方法二:

在代码中,调用 QQmlEngine::addImportPath() 方法添加路径。

 

最后,我们的模块就设计成功并能使用了。

上面的例子很简单,更多深刻的地方需要自己在学习和实践中探索!

例子:DefineAndUseModule/StyleDemo

1、qmldir文件的介绍

qmldir是一个纯文本文件,用来定义QML模块,下面是一些常用的命令:

module
声明模块id,id可以是带点的URI,注意与模块安装路径保持一致,这条命令写在首行,最多有一条,例如:
module ExampleModule


声明在模块中可以使用的QML对象类型,这条命令可有多行,例如:
MyCustomType 1.0 MyCustomType.qml

internal
声明属于模块的但不以使用的QML对象类型,这条命令可有多行,例如:
internal MyPrivateType MyPrivateType.qml


声明在模块中可以使用的JavaScript文件,这条命令可有多行,例如:
MyScript 1.0 MyScript.js

plugin []
声明在模块中可以使用的插件,是插件库名,这条命令可有多行,例如:
plugin MyPluginLibrary

classname

注释声明,例如:

this is a comment

有了qmldir文件,就可以在QML文件中导入相应的模块了,命令如下:
import [as ]是模块id,是模块版本号,[as ]是可选的,类似于C++的名字空间,例如:
import ExampleModule1.0
新版本兼容老版本的数据,反过来则不行。

2、qmltypes文件
xxx.qmltypes文件可以使用qmlplugindump工具生成。

3、QML文件目录导入
import“” [as ]
可以是本地目录,也可以是远程目录,例如:
import“../mycomponents”
import“http://www.my-example-server.com/myapp/mycomponents
[as ]是可选的,用来声明标识符,避免模块中的数据暴露到全局,例如:
import“../mycomponents” as MyComponents

4、C++插件
创建C++插件给QML使用,例子可参考:
($QtCreatorPath)/Examples/Qt-5.3/qml/tutorials/extending/chater6-plugins/

转载注明出处:https://www.cnblogs.com/hellovenus/p/6357585.html
出处二:https://blog.csdn.net/ieearth/article/details/41483469

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值