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、創建插件工程

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,

 

2、使用插件

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