准備分兩節來介紹QML擴展插件,分別為
(一)基於QML文件的擴展方式
(二)基於C++的插件擴展
這篇先介紹基於QML的插件擴展。
先介紹幾個基本概念:
qmldir: 用於組織自定義的QML插件,qmldir的具體寫法可參考
.qmltypes:qml插件的解釋文件,用於QtCreator語法高亮。可通過Qt提供的工具qmlplugindump自動生成
QML_IMPORT_PATH: 導入插件路徑,以支持插件的語法高亮。個人理解是如果純QML文件的擴展,沒有封裝到C++中,則直接導入路徑,即可支持語法高亮,如果有C++封裝,則需要通過.qmltypes支持高亮。
addImportPath: 添加import尋址目錄,c++代碼里添加,沒有前兩項,只是QtCreator不能高亮,沒有這種,則插件無法使用。
具體步驟
一、建立插件工程
1.建立工程,首先通過QtCreator創建一個QMLPluginTest子目錄工程:
2.在QMLPluginTest子目錄下,添加app測試工程
3.新建QML插件工程,MyPlugin
4.新建向導會自動創建示例文件及插件名稱,這里可自己修改URI名稱,即你的插件名稱
5.自動創建的MyPlugin生成目錄結構如圖:
其中qmldir文件描述的插件的組成:
module MyPlugin
plugin QMLPlugin
6.這節只介紹純QML的插件方式,先不管自動生成的插件文件。
7.在MyPlugin目錄下,添加擴展qml,這里添加一個測試矩形,MyRect.qml
8.在qmldir中添加MyRect.qml,
二、使用插件
1. 在app工程的main.qml中,import MyPlugin 1.0,
2.主要到右邊代碼中有讓人郁悶的波浪線,說明QtCreator沒有識別你的插件,需要QML_IMPORT_PATH來標記,打開app.pro文件
默認創建時QML_IMPORT_PATH =,沒有賦值,修改為插件的路徑,建議這里使用相對路徑
QML_IMPORT_PATH = $$PWD/../
3.關閉QtCreator,重新打開,可以紅色波浪線么有了
4.在main.qml中,使用創建的MyRect
5.最后一步,導入插件路徑,在app的main.cpp添加import代碼,如果沒有這句,程序啟動會報錯誤:
qrc:/main.qml:3 module "MyPlugin" is not installed
所以需在c++中添加importPath,代碼如下:
QQmlApplicationEngine engine;
engine.addImportPath("E:/T/QMLPlugin/QMLPluginTest/");(注意這里導入路徑是MyPlugin的上層文件夾,不是MyPlugin文件夾)
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
6.最后的程序目錄結構:
附錄:
1.程序生成路徑:E:\T\QMLPlugin\build
2.程序源代碼下載地址
https://github.com/youngerking1985/QML_Learn/tree/master/QMLPlugin1