QML中使用C++类的实现

      之前用Qt写过串口的小软件。STM32 IAP工具 和 用qt写的一个简单到不能在简单的上位机 。后来接触了QML，觉得传统的那种界面太那个了，写样式也麻烦。所以很早就想过用QML来为串口上位机做界面。无奈没搞懂QML到底是如何去调用C++的。百度了一堆文章，多半是翻译官方的例子。不知所云。直到最近在csdn上看到一篇文章 Qt Quick 之 QML 与 C++ 混合编程详解 ，终于有点懂了。不过，文章似乎有点长了。博客园上面也有见过，有朋友写过类似的文章。今天，总算实现了QML访问一个自定义类中的属性。故写下这篇文章。

      例子很简单，main.qml访问stringt类中的一个属性并显示其内容：m_String 

      注意：Qt版本 5.4.0 | Creater版本 3.3.0

     首先创建一个新的 Qt Quick Application-->选择controls 1.3。选择带controls的，生成的main.qml的根是ApplicationWindow 而另一种则是Window，其他的看起来没什么区别。具体要查文档咯

项目中有个MainForm.ui.qml。把他删掉。然后修改main.qml文件。

ApplicationWindow {
    title: qsTr("Hello World")
     640
    height: 480
    visible: true     //显示窗口

    
}

然后创建一个stringt类继承QObject。如果想要让一个类可以被qml访问。这个类必须是继承QObject或其派生类。

使用宏Q_PROPERTY可以让方法被moc感知。stringt类的代码如下

#ifndef STRINGT_H
#define STRINGT_H

#include <QObject>

class stringt : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString Ttext READ Ttext WRITE setTtext)
public:
    explicit stringt(QObject *parent = 0);
    ~stringt();

    QString Ttext(void) const;
    void setTtext(const QString str);
signals:

public slots:

private:
    QString m_String;
};

#endif // STRINGT_H

上边是头文件，接下来是源文件

#include "stringt.h"

stringt::stringt(QObject *parent)
    : QObject(parent)
    , m_String("Text just")
{

}

stringt::~stringt()
{

}

QString stringt::Ttext() const
{
    return m_String;
}

void stringt::setTtext(const QString str)
{
    m_String = str;
}

接着就是main文件里面，注册这个类就可以了，用qmlRegisterType这个函数

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include "stringt.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    qmlRegisterType<stringt>("m.stringT", 1, 0, "StringT");
                   //要导入的类  包名 主版本号 次版本号 元素名
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

最后就是QML文件了。这里定义了两个矩形。点击左边的矩形后，右边的矩形会改变颜色和文本。

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import m.stringT 1.0    //导入类

ApplicationWindow {
    title: qsTr("Hello World")
     640
    height: 480
    visible: true

    StringT{    //创建一个元素
        id: stringT
    }

    Rectangle {
        id: rect1
        x: 12; y: 12
         60; height: 60
        color: "lightsteelblue"
        MouseArea {
            id: rect1_area
            anchors.fill: parent
            onClicked:
            {
                rect2.color = "lightgreen"
                rect2_text.text = stringT.Ttext
            }
        }
    }

    Rectangle {
        id: rect2
        x: rect1.x + rect1.width + 10
        y: rect1.y
         rect1.width; height: rect1.height
        border.color: "lightsteelblue"
        border. 3
        radius: 3
        Text {
            id: rect2_text
            text: qsTr("Hello")
            font.pixelSize: 12
            anchors.centerIn: parent
        }
    }
}

效果大概是这样的。

 

 ---------------------------------传值给C++类---------------------------------

      上面，我们将C++注册到QML，便使QML可以访问C++的内容。那怎样将QML中的值，比如Text传给C++呢。只要在函数开头使用Q_INVOKABLE宏便可以了。比如上面的类中的set方法。

//void setTtext(const QString str);
Q_INVOKABLE void setTtext(const QString str);

然后在main.qml中就可以使用这个set方法了

    Rectangle {
        id: rect1
        x: 12; y: 12
         60; height: 60
        color: "lightsteelblue"
        Text {
            id: rect1_text
            text: qsTr("QML")
            anchors.centerIn: parent
        }
        MouseArea {
            id: rect1_area
            anchors.fill: parent
            onClicked:
            {
                rect2.color = "lightgreen"
                stringT.setTtext(rect1_text.text)
                rect2_text.text = stringT.Ttext
            }
        }
    }

这段代码里面给第一个矩形里面设置了Text。然后在点击这个矩形的时候，第二个矩形的Text就会变成和第一个Text一样了。QML先是调用了类的write方法m_String，接着调用了Ttext这个read方法