QML插件擴展(一)


准備分兩節來介紹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子目錄工程:

image

2.在QMLPluginTest子目錄下,添加app測試工程

3.新建QML插件工程,MyPlugin

image

4.新建向導會自動創建示例文件及插件名稱,這里可自己修改URI名稱,即你的插件名稱

image

5.自動創建的MyPlugin生成目錄結構如圖:

image

其中qmldir文件描述的插件的組成:

       module MyPlugin

   plugin QMLPlugin

6.這節只介紹純QML的插件方式,先不管自動生成的插件文件。

7.在MyPlugin目錄下,添加擴展qml,這里添加一個測試矩形,MyRect.qml

image

8.在qmldir中添加MyRect.qml,

image

 

二、使用插件

1. 在app工程的main.qml中,import MyPlugin 1.0,

image

2.主要到右邊代碼中有讓人郁悶的波浪線,說明QtCreator沒有識別你的插件,需要QML_IMPORT_PATH來標記,打開app.pro文件

默認創建時QML_IMPORT_PATH =,沒有賦值,修改為插件的路徑,建議這里使用相對路徑

QML_IMPORT_PATH = $$PWD/../

3.關閉QtCreator,重新打開,可以紅色波浪線么有了

4.在main.qml中,使用創建的MyRect

image

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.最后的程序目錄結構:

image

 

 

附錄:

1.程序生成路徑:E:\T\QMLPlugin\build

2.程序源代碼下載地址

https://github.com/youngerking1985/QML_Learn/tree/master/QMLPlugin1


免責聲明!

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



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