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子目錄工程：

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/");

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

6.最後的程式目錄結構：

 

 

附錄：

1.程式產生路徑：E:\T\QMLPlugin\build

2.程式原始碼

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

QML外掛程式擴充（一）