C++和QML混合编程

最新推荐文章于 2024-07-09 17:12:58 发布
最新推荐文章于 2024-07-09 17:12:58 发布
阅读量2.9k 收藏 12
点赞数 4
分类专栏： Qt Qt
Qt 同时被 2 个专栏收录
18 篇文章 4 订阅
订阅专栏
Qt
17 篇文章 1 订阅
订阅专栏

QML中使用C++对象

官方文档：http://doc.qt.io/qt-5/qtqml-tutorials-extending-qml-example.html

创建一个新类型

创建C++对象

piechart.h

#ifndef PIECHART_H
#define PIECHART_H
#include <QtQuick/QQuickPaintedItem>
#include <QColor>
#include <QPainter>

class PieChart : public QQuickPaintedItem
{
    //为了使用信号和槽系统和QML交互
    Q_OBJECT
    //Q_PROPERTY是QObject的宏定义，具体的含义可以去QObject中去查看
    //这里的意思是PieChart有一个属性name，获取属性的函数名是name，设置属性的函数名是setName
    Q_PROPERTY(QString name READ name WRITE setName)
    Q_PROPERTY(QColor color READ color WRITE setColor)
public:
    PieChart(QQuickItem *parent=0);
    QString name() const;
    void setName(const QString &name);
    QColor color() const;
    void setColor(const QColor &color);
    void paint(QPainter *painter);
private:
    QString myName;
    QColor myColor;
};

#endif // PIECHART_H

piechart.cpp

#include "piechart.h"
#include <QPainter>

PieChart::PieChart(QQuickItem *parent)
    :QQuickPaintedItem(parent)
{

}
QString PieChart::name() const
{
    return myName;
}
void PieChart::setName(const QString &name)
{
    myName = name;
}
QColor PieChart::color() const
{
    return myColor;
}
void PieChart::setColor(const QColor &color)
{
    myColor = color;
}
void PieChart::paint(QPainter *painter)
{
    QPen pen(myColor, 2);
    painter->setPen(pen);
    painter->setRenderHints(QPainter::Antialiasing, true);
    painter->drawPie(boundingRect().adjusted(1, 1, -1, -1), 90 * 16, 290 * 16);
}

将C++对象注册到QML中

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <piechart.h>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    //4个参数的含义是，包名，主版本号，此版本好，QML类型名
    qmlRegisterType<PieChart>("Charts",1,0,"PieChart");
    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    return app.exec();
}

在QML中使用C++注册到QML中的对象

main.qml

import QtQuick 2.7
import QtQuick.Controls 1.4
import Charts 1.0

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

    PieChart {
        id: aPieChart
        anchors.centerIn: parent
        width: 100; height: 100
        name: "A simple pie chart"
        //这里自动转换为C++中的QColor类型
        color: "red"
    }

    Text {
        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
        text: aPieChart.name
    }
}

这里写图片描述
QML和C++数据类型转换
http://doc.qt.io/qt-5/qtqml-cppintegration-data.html

连接C++的方法和信号

点击控件，图形消失，并且在QML中处理chartCleared信号
piechart.h增加的代码

public:
    //将这个方法注册到元对象系统中，这样QML就能直接调用这个方法
    Q_INVOKABLE void clearChart();
signals:
    void chartCleared();

piechart.cpp增加的代码

void PieChart::clearChart()
{
    setColor(QColor(Qt::transparent));
    update();
    emit chartCleared();
}

main.qml的代码变为如下

import QtQuick 2.7
import QtQuick.Controls 1.4
import Charts 1.0

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

    PieChart {
         id: aPieChart
         anchors.centerIn: parent
         width: 100; height: 100
         color: "red"
         onChartCleared: console.log("The chart has been cleared")
     }

     MouseArea {
         anchors.fill: parent
         onClicked: aPieChart.clearChart()
     }

     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: "Click anywhere to clear the chart"
     }
}

属性绑定

2个图形A和B，B的颜色就是A的颜色，点击整个控件，A的颜色变化，如果属性不绑定，就只有A的颜色发生变化，因为B不知道A的颜色发生变化，属性绑定后A和B的颜色会一起变化
piechart.h增加和修改的代码

//当color这个属性发生变化时，发送colorChanged这个信号，更新这个属性
Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
signals:
    void colorChanged();

piechart.cpp修改的代码如下

void PieChart::setColor(const QColor &color)
{
    if (color != myColor)
    {
       myColor = color;
       update();   // repaint with the new color
       emit colorChanged();
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 1.4
import Charts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Row {
         anchors.centerIn: parent
         spacing: 20

         PieChart {
             id: chartA
             width: 100; height: 100
             color: "red"
         }

         PieChart {
             id: chartB
             width: 100; height: 100
             color: chartA.color
         }
     }

     MouseArea {
         anchors.fill: parent
         onClicked: { chartA.color = "blue" }
     }

     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: "Click anywhere to change the chart color"
     }
}

这里写图片描述

使用自定义属性类型

C++中使用QML对象

官方文档：http://doc.qt.io/qt-5/qtqml-cppintegration-interactqmlfromcpp.html

从C++中加载QML对象

按照官方文档写一直不对，也不知道问题出在哪里，就按照Qt Quick核心编程上的例子写了
通过C++改变QML文档中Item的宽度
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

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

    Item {
        objectName: "item"
        width: 100
        height: 100

        Rectangle {
            anchors.fill: parent
            border.width: 1
        }
    }

}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QList>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    QList<QObject*> rootObjects = engine.rootObjects();
    int count = rootObjects.size();
    QObject *root = NULL;
    for(int i=0; i<count; i++)
    {
        if(rootObjects.at(i)->objectName() == "window")
        {
            root = rootObjects.at(i);
            break;
        }
    }
    QObject *item = root->findChild<QObject*>("item");
    //判断是否是空指针
    if(item)
    {
        item->setProperty("width","200");
    }
    return app.exec();

}

QML中定义的是正方形，显示出来是长方形
这里写图片描述

从C++获取QML对象的成员

属性

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0


ApplicationWindow {
    objectName: "window"
    visible: true
    width: 640
    height: 480
    property int someNumber: 100
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlProperty>
#include <QList>
#include <QDebug>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    QList<QObject*> rootObjects = engine.rootObjects();
    int count = rootObjects.size();
    QObject *root = NULL;
    for(int i=0; i<count; i++)
    {
        if(rootObjects.at(i)->objectName() == "window")
        {
            root = rootObjects.at(i);
            break;
        }
    }
    qDebug() << "Property value:" << QQmlProperty::read(root, "someNumber").toInt();
    QQmlProperty::write(root, "someNumber", 5000);

    qDebug() << "Property value:" << root->property("someNumber").toInt();
    root->setProperty("someNumber", 100);
    return app.exec();

}

这里写图片描述

调用QML方法

在C++中调用QML中的方法
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

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

    function myQmlFunction(msg) {
        console.log("Got Message",msg)
        return "some return value"
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlComponent>
#include <QDebug>
#include <QMetaObject>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

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

    QList<QObject*> rootObjects = engine.rootObjects();
    int count = rootObjects.size();
    QObject *root = NULL;
    for(int i=0; i<count; i++)
    {
        if(rootObjects.at(i)->objectName() == "window")
        {
            root = rootObjects.at(i);
            break;
        }
    }
    QVariant returnedValue;
    QVariant msg = "Hello from C++";
    //参数含义：被调用对象的指针，方法名字，返回值，参数
    QMetaObject::invokeMethod(root, "myQmlFunction",
            Q_RETURN_ARG(QVariant, returnedValue),
            Q_ARG(QVariant, msg));

    qDebug() << "QML function returned:" << returnedValue.toString();
    //这个是运行完毕删除图形界面
    delete root;
    return app.exec();
}

这里写图片描述

连接QML的信号

在C++中接收QML中发出的信号
myclass.h

#ifndef MYCLASS_H
#define MYCLASS_H
#include <QObject>
#include <QDebug>
class MyClass : public QObject
{
    Q_OBJECT
public slots:
    void cppSlot(const QString &msg) {
        qDebug() << "Called the C++ slot with message:" << msg;
    }
};
#endif // MYCLASS_H

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlComponent>
#include <QDebug>
#include <QMetaObject>
#include <myclass.h>
#include <QQuickView>
#include <QQuickItem>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

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

    QList<QObject*> rootObjects = engine.rootObjects();
    int count = rootObjects.size();
    QObject *root = NULL;
    for(int i=0; i<count; i++)
    {
        if(rootObjects.at(i)->objectName() == "window")
        {
            root = rootObjects.at(i);
            break;
        }
    }
    MyClass myClass;
    QObject::connect(root, SIGNAL(qmlSignal(QString)),
                     &myClass, SLOT(cppSlot(QString)));
    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    objectName: "window"
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    signal qmlSignal(string msg)

    MouseArea {
        anchors.fill: parent
        onClicked: window.qmlSignal("Hello from QML")
    }
}

这里写图片描述

Java识堂
关注
专栏目录
C++和QML混合编程-C++访问QML元素
yang1fei2的博客
05-26 461
QML在处理一些UI显示的时候比较擅长，但当涉及到一些后台业务的时候就比较乏力了。这里介绍一下如何通过C++对QML的能力进行扩展。C++访问操作QML的方式主要分为两种: 1.通过findChild查找QML子元素 2.通过QQmlComponent动态创建元素。
C++和QML混合编程-QML界面访问C++类型
yang1fei2的博客
05-08 4679
在QML工程中，一般QML界面只负责前端交互，而真正的业务逻辑都是C++模块实现的。为了实现前端和后端的顺利衔接，我们需要做好QML界面与C++的交互。这里就介绍一下如何在QML中调用对应的C++模块。在QML中调用C++模块的方法主要有三种，分别是: 1.设置上下文属性(setContextProperty()) 2.在QML引擎里面注册新类型(qmlRegisterType) 3.导出对应的QML扩展插件。 下面介绍一下三个方法的优缺点: 对于小型应用来说，方法一设置上下文属性是最简单实用的方
QML与C++混合编程使用
01-27 1万+
C++与QML的交互是通过暴露C++对象给QML环境得以实现的： 在C++实现中，非可视化的型别均为QObject的子类，可视化的类型均为QDeclarativeItem的子类。注意：QDeclarativeItem等同于QML的Item类。 如果用户想要定义自己的型别，做法如下： 在C++中，实现派生于QObject或QDeclarativeItem的子类，它是新定义item的实体对象； 在C++中，将1中实现的新item类型注册给QML； 在QML中，导入含有1中定义的新item的模块； 在
QML与C++混合编程
aming090的博客
10-29 1539
QT开发（六十九）——QML与C++混合编程 一、QML与C++混合编程简介     QML与C++混合编程就是使用QML高效便捷地构建UI，而C++则用来实现业务逻辑和复杂算法。 二、QML访问C++     Qt集成了QML引擎和Qt元对象系统，使得QML很容易从C++中得到扩展，在一定的条件下，QML就可以访问QObject派生类的成员，例如信号、槽函数、枚举类型、属性、成员函数等。...
[QML笔记] C++与QML通信
最新发布
weixin_44797288的博客
07-09 567
除了调用一些方法外，我们可能还需要访问 C++ 类中的一些成员，要访问这些成员可以通过 Q_PROPERTY 宏来表示哪些成员是可以被访问的，比如我们希望 QML 允许访问成员变量 m_loggedIn。除了调用 C++ 的方法和访问自定义属性外，我们还可以在 QML 中添加一个信号处理程序来处理 C++ 层发出的信号，注意QML的绑定规则，通过 Q_PROPERTY 宏来告诉 QML，要访问这个变量你需要调用的各个函数。接着上面这个代码，我们新建一个。类与QML通信有两种方式。单例类注册到全局上下文。
Qt Quick 之 QML 与 C++ 混合编程详解
热门推荐
安晓辉生涯——聚焦程序员的职业规划与成长
07-04 19万+
Qt Quick 技术的引入，使得你能够快速构建 UI ，具有动画、各种绚丽效果的 UI 都不在话下。但它不是万能的，也有很多局限性，原来 Qt 的一些技术，比如低阶的网络编程如 QTcpSocket ，多线程，又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等，在 QML 中要么不可用，要么用起来不方便，所以呢，很多时候我们是会基于这样的原则来混合使用 QML 和 C++： QML 构建界面， C++ 实现非界面的业务逻辑和复杂运算。
一、Qt widget应用、C++、qml混合编程之一
06-30 810
1、关键字：Qt widget、qml、image 2、首先我们创建一个Qt widgets application,给它工程名称CallQml,然后一路下一步创建完成； 3、在CallQml.pro中添加 QT += qml quick QT += quickwidgets 4、双击mainwindow.ui,在设计窗口中随意添加一个控件，我们添加一个button吧，然后在窗口上点击右键，选择布局，选择栅格布局，可以看到这个控件就最大化了，这时候窗口中的任何控件都可以随着窗口最大化、最小化...
QML 和C++混合编程宝典.zip_C语言能实现gui编程吗
11-23
通过"QML与C++混合编程.docx"和"QML与C++混合编程.pdf"这两份文档，读者可以深入理解QML和C++的协同工作原理，学习如何在实际项目中有效地运用这两种技术。无论是初学者还是经验丰富的开发者，这份资料都将提供宝贵...
四、Qt widget应用、C++、qml混合编程之三
06-30 291
关键词：ChartView，ValueAxis，ScatterSeries 1、建立一个中间层DataSource类，更新qml图表的数据在这个类中完成，主要代码如下： void DataSource::updateD(QAbstractSeries *series,QPointF pointHA) { qDebug()<<"series name,A "<<series->name()<<pointHA.y(); m_paradata.appe...
C++与QML交互，混编
03-13
支持QML访问C++的信号槽，C++访问Qml的信号槽，C++访问QMl的函数 编译环境是Qt5.6.2
Qml和C++混合编程
quietbxj的博客
08-10 221
Qml和C++运行环境不同，是两个平行的世界，但Qml和C++支持混合编程。 Qml使用C++类和对象 C++中的类，注册为Qml环境中的一个类型，在Qml中使用该类型创建对象，使用方法：qmlRegisterType()。 C++构造一个对象，将这个对象设置为Qml上下文，在Qml中直接使用该属性，使用方法：view.rootContext()->setContextProperty("classOb", new ClassName()) 定义C++类 继承QObject类或者其派生类。
QML_Qml和C++混合编程
会选科技的博客
06-15 752
QML_Qml和C++混合编程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值