一、模块的定义

在使用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

使用时请根据这篇博客所说作相应修改。

QML——添加自定义模块的更多相关文章

  1. qml: QtCharts模块的使用(基本配置)------<一>

    QtCharts模块可以用于绘制图表: 导入模块: import QtCharts 2.2 例子: import QtQuick 2.0 import QtCharts 2.2 ChartView { ...

  2. qml: QtCharts模块得使用(数据整合和显示) ---- <二>

    QtCharts目前已经可以免费使用,而且使用非常方便.快捷,并且提供了各种类别的支持(例如:曲线图,柱形图,折线图,饼图等). 这里讲解qml端图表显示,C++端进行数据整合,并能实现实时数据刷新( ...

  3. odoo11 添加自定义模块报错问题

    在昨天解决了数据库管理页面布局混乱的问题之后,如何设置自己的custom_addons模块文件夹成了主要问题,建立自己的custom_addons文件夹,可以使用git命令来管理自己所写代码的版本了, ...

  4. YII2中添加自定义模块

    有些时候系统功能过于复杂,这时我们需要通过模块把一些功能区分开来,便于管理与维护. 我用的是Yii2的基本应用程序模板,程序其实已经给我们提供了一个模块,就是app本身.YII2中是可以无限嵌套模块的 ...

  5. python: 添加自定义模块路径 —— 可以使用相对路径

    自定义模块时,添加模块路径: sys.path.append('..')

  6. linux python 修改环境变量 添加自定义模块路径

    举一个很简单的例子,如果你发现一个包或者模块,明明是有的,但是会发生这样的错误: >>> from algorithm import *Traceback (most recent ...

  7. Framework/base 下添加自定义模块的步骤

    在Android源码编译成功的基础上,重新编译带自己API的android.jar需要进行以下几个步骤操作:1.添加自己的源代码,在android源码的frameworks/base目录下新建一个文件 ...

  8. lua添加自定义模块的步骤

    以下方法在lua 5.2.4版本下成功实现: 1. lua.c为所有函数的主程序,参考Makefile的编译链接2. lua.c中int main (int argc, char **argv) { ...

  9. os和sys模块

    sys模块 sys模块主要是用于提供对python解释器相关的操作 函数 sys.argv #命令行参数List,第一个元素是程序本身路径 sys.path #返回模块的搜索路径,初始化时使用PYTH ...

随机推荐

  1. 如何在ajax请求中设置特殊的RequestHeader

    现在ajax应用已经相当广泛了,有很多不错的ajax框架可供使用.ajax是一个异步请求,也主要是一种客户端的脚本行为.那么,如何在请求之前为请求添加特殊的一些头部信息呢? 下面是一个简单的例子,我用 ...

  2. loadrunner使用过程中的问题记录

    一.录制时选错应用类型,导致提示“loadrunner sockets proxy auto-starter mercury interactive corp.(2002)” 解决办法:重新选择正确的 ...

  3. git 自己易忘的命令

    1. git 更新远程分支列表 git remote update origin --prune git remote update origin -p 2. 查看远程分支: git branch - ...

  4. 随机游走模型(RandomWalk Mobility)

    随机游走模型由首先由爱因斯坦在1926年以数学方式描述.由于自然界中的许多实体会以不可预知的方式移动,因此随机游走模型用来描述这种不稳定的移动.在这种移动模型中,移动节点随机选择一个方向和速度来从当前 ...

  5. electron快速开始

    初学electron 接触了两周的electron,感觉还不错,以后pc端基本上可以用electron加壳写pc端应用了,可以用nodejs的模块,也可以用es6.7,还可以直接操作系统文件.基本上可 ...

  6. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  7. 5. 使用Flask蓝图(blueprint)

    一直到现在都没有怎么写代码,可能更得比较慢. 作业回顾 先来看一下文章4的作业吧,使用logbook的时候,遇到了时区不对的情况.那么我们怎么去解决这个问题呢? 实际上logbook默认采用的是世界标 ...

  8. 07-matplotlib-箱线图

    import numpy as np import matplotlib.pyplot as plt ''' 箱形图(Box-plot)又称为盒须图,盒式图,或 箱线图: 是一种用在显示一组数据分散情 ...

  9. word2vec的理解

    在学习LSTM的时候,了解了word2vec,简单的理解就是把词变成向量.看了很多书,也搜索了很多博客,大多数都是在word2vec的实现原理.数学公式,和一堆怎么样重新写一个word2vec的pyt ...

  10. mysql 伪列

    select  @rownum:=@rownum+1 AS rownum,b.* from (SELECT @rownum:=0) r ,goods_description_new  b