Implementation of using C + + classes in QML

Before using QT to write a serial port of the small software. STM32 IAP Tool and a simple to write with QT can not be in the simple upper computer. Later contacted QML, think the traditional kind of interface too that, write style also trouble. So very early thought to use QML to do the interface for the serial host computer. Helpless did not understand how QML is going to call C + +. Baidu has a pile of articles, most of which are official examples of translation. Unintelligible. Until recently in CSDN read an article Qt Quick QML and C + + mixed programming , finally a little understand. However, the article seems a bit long. Blog Park has seen above, have friends have written similar articles. Today, we finally realized that QML accesses a property in a custom class. So write down this article.

The example is simple, main.qml accesses a property in the Stringt class and displays its contents: m_string

Note: qt version 5.4.0 | Creater version 3.3.0

First create a new Qt Quick application--> Select Controls 1.3. Select with controls, the root of the generated main.qml is Applicationwindow and the other is Window, others look no different. We need to check the documentation .

There is a MainForm.ui.qml in the project. Cut him out. Then modify the Main.qml file.

1 Applicationwindow {2     title:qstr ("Hello World")3     width:6404     height:4805     true     // Display window 6 7     8 }

Then create a Stringt class to inherit the Qobject. If you want to allow a class to be accessed by QML. This class must be an inherited qobject or its derived class.

Using the macro Q_property allows the method to be perceived by the MOC. The code for the Stringt class is as follows

1 #ifndef Stringt_h2 #defineStringt_h3 4#include <QObject>5 6 classStringt: PublicQobject7 {8 Q_object9 Q_property (QString ttext READ ttext WRITE setttext)Ten  Public: One     ExplicitStringt (Qobject *parent =0); A~stringt (); -  -QString Ttext (void)Const; the     voidSetttext (ConstQString str); - Signals: -  -  PublicSlots: +  - Private: + QString m_string; A }; at  - #endif //Stringt_h

Above is the header file, next is the source file

1#include"stringt.h"2 3Stringt::stringt (Qobject *parent)4 : Qobject (parent)5, M_string ("Text Just")6 {7 8 }9 Tenstringt::~stringt () One { A  - } -  theQString Stringt::ttext ()Const - { -     returnm_string; - } +  - voidStringt::setttext (ConstQString str) + { AM_string =str; at}

Then the main file, register this class can be, with qmlregistertype this function

1#include <QApplication>2#include <QQmlApplicationEngine>3#include <QtQml>4#include"stringt.h"5 6 intMainintargcChar*argv[])7 {8 qapplication app (argc, argv);9 TenQmlregistertype<stringt> ("M.stringt",1,0,"Stringt"); One                    //Toimported Class Package name major version number minor version number element name A qqmlapplicationengine engine; -Engine.load (Qurl (Qstringliteral ("QRC:/MAIN.QML"))); -  the     returnapp.exec (); -}

The last is the Qml file. Two rectangles are defined here. When you click on the left rectangle, the right rectangle changes color and text.

1Import QtQuick 2.42Import Qtquick.controls 1.33Import Qtquick.window 2.24Import Qtquick.dialogs 1.25Import M.stringt 1.0//Import Class6 7 Applicationwindow {8TITLE:QSTR ("Hello World")9width:640Tenheight:480 OneVisibletrue A  -stringt{//Create a single element - Id:stringt the     } -  - Rectangle { - Id:rect1 +X:12; Y:12 -width:60; Height:60 +Color: "Lightsteelblue" A Mousearea { at Id:rect1_area - anchors.fill:parent - onclicked: -             { -Rect2.color = "LightGreen" -Rect2_text.text =Stringt.ttext in             } -         } to     } +  - Rectangle { the Id:rect2 *x:rect1.x + rect1.width + 10 $ y:rect1.yPanax Notoginseng width:rect1.width; Height:rect1.height -Border.color: "Lightsteelblue" theBorder.width:3 +Radius:3 A Text { the Id:rect2_text +Text:qstr ("Hello") -Font.pixelsize:12 $ anchors.centerIn:parent $         } -     } -}

The effect is probably like this.

Implementation of using C + + classes in QML