QML 与 C++交互 - 01QML实例化C++类

前言

本系列会介绍几种QML与C++进行数据交互的方法，包括信号槽的链接，QML调用C++类的方法等。
本文为第一篇：QML实例化C++类。可以点击这里访问官方示例。

在QML页面输入内容时，可以发现C++函数被触发：

优点：
可以方便的利用Qt的属性系统从QML中访问C++类中的属性。在QML程序中定义该C++类时会直接实例化该类。
缺点：
1、无法在C++中对QML中实例化的类对象进行操作；
2、只能访问使用属性系统Q_PROPERTY声明的属性；
3、无法设置QML中访问指定的对象，即无法访问C++中的单例

详细描述

1、使用Qt Creator中的“Qt Quick Application”模板创建一个新项目

注意：取消选中New Project Wizard的Define Project Details部分中的With ui.qml文件选项。

2、添加C++类，命名为BackEnd，类的方法如下：
头文件：

#ifndef BACKEND_H
#define BACKEND_H

#include <QObject>
#include <QString>

class BackEnd : public QObject
{
    Q_OBJECT
    //所有能访问的属性必须通过Q_PROPERTY声明
    Q_PROPERTY(QString userName READ userName WRITE setUserName NOTIFY userNameChanged)

public:
    explicit BackEnd(QObject *parent = nullptr);

    QString userName();
    void setUserName(const QString &userName);
    void callClassFunction();

signals:
    void userNameChanged();

private:
    QString m_userName;
};

#endif // BACKEND_H

源文件：

//BackEnd.cpp
#include "backend.h"
#include <QDebug>

BackEnd::BackEnd(QObject *parent) :
    QObject(parent)
{
    qDebug() << "-------- construct";
    m_userName = "hello world";
}

QString BackEnd::userName()
{
    qDebug() << __FILE__ << __func__ << m_userName;
    return m_userName;
}

void BackEnd::setUserName(const QString &userName)
{
    qDebug() << __FILE__ << __func__ << userName;
    if (userName == m_userName)
        return;

    m_userName = userName;
    emit userNameChanged();
}

void BackEnd::callClassFunction()
{
    qDebug() << __FILE__ << __func__ << __LINE__;
}

每次值改变时，该setUserName函数都会发出userNameChanged信号。可以在QML中使用onUserNameChanged处理该信号。

3、在main.cpp中注册该方法到QML
包含头文件BackEnd.h
使用 qmlRegisterType<BackEnd>("io.qt.examples", 1, 0, "BackEnd");注册方法

4、将main.qml的内容替换如下

import QtQuick 2.6
import QtQuick.Controls 2.0
import io.qt.examples 1.0
//io.qt.examples 是使用qmlRegisterType进行注册的方法，名称必须和注册时一致
ApplicationWindow {
    id: root
    width: 300
    height: 480
    visible: true

    BackEnd {
        id: backend
    }

    Text {
        id: txt1
        x: 20
        y: 20

        text: backend.userName

    }

    TextField {
        text: backend.userName
        placeholderText: qsTr("User name")
        anchors.centerIn: parent

        onTextChanged:{
            backend.userName = text
        }
    }
}

代码下载：https://download.csdn.net/download/baidu_33850454/10617660
本人使用的环境是Qt5.10, MinGW。如有疑问欢迎与我交流