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

使用時請根據這篇博客所說作相應修改。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM