QML plug-in extension (i)

Two sections are prepared to introduce the QML extension, respectively

(i) Extension mode based on QML file

(ii) C + +-based plug-in extension

This article first describes the plug-in extension based on QML.

Introduce several basic concepts first:

qmldir: QML plug-in for organizing customizations, Qmldir's specific wording can be consulted

. Qmltypes: QML Plugin's explanatory file for Qtcreator syntax highlighting. Automatic generation of qmlplugindump tools available through QT

qml_import_path: Import the plugin path to support the syntax highlighting of the plugin. Personal understanding is that if the pure qml file extension, not encapsulated in C + +, the direct import path, you can support syntax highlighting, if there is a C + + package, you need to pass. Qmltypes support highlighting.

addimportpath: Add import addressing directory, add in C + + code, there are no first two items, just qtcreator can not highlight, without this, plug-in can not be used.

Step one, build plug-in engineering

1. Establish the project, first create a qmlplugintest sub-directory Project through Qtcreator:

2. Under the Qmlplugintest subdirectory, add the app test project

3. New QML plug-in project, Myplugin

4. The new wizard will automatically create the sample file and plug-in name, where you can modify the URI name, that is, your plug-in name

5. Automatically created Myplugin build directory structure

Where the Qmldir file describes the composition of the plug-in:

Module Myplugin

   Plugin Qmlplugin

6. This section only describes the pure QML plug-in method, regardless of the automatically generated plug-in files.

7. In the Myplugin directory, add the extension qml, add a test rectangle here, MYRECT.QML

8. Add Myrect.qml in Qmldir,

Second, the use of plug-ins

1. In the app Project MAIN.QML, import Myplugin 1.0,

2. There is a depressing wavy line in the main to the right code, stating that Qtcreator does not recognize your plugin, need Qml_import_path to mark, open App.pro file

Default Creation Qml_import_path =, no assignment, modify the path of the plugin, it is recommended to use relative path

Qml_import_path = $ $PWD/.. /

3. Close the Qtcreator, turn it back on, can you get a red wavy line?

4. In main.qml, use the created Myrect

5. The last step, import the plugin path, add the import code in the app's main.cpp, if not, the program will report an error:

Qrc:/main.qml:3 module "Myplugin" is not installed

So you need to add Importpath in C + + with the following code:

Qqmlapplicationengine engine;

Engine.addimportpath ("e:/t/qmlplugin/qmlplugintest/"); (Note that the import path here is the upper-level folder of Myplugin, not the Myplugin folder)

Engine.load (Qurl (qstringliteral ("qrc:/main.qml"));

6. The final program directory structure:

Appendix:

1. Program Generation Path: E:\T\QMLPlugin\build

2. Program source code

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

QML plug-in extension (i)