几种QQuickWidget与Qml交互数据的方法

QQuickWidget底层继承的是QWidget,但它可以加载Qml文件(组件),但我们有时候需要和Qml文件(组件)数据交互使用,本文介绍几种QQuickWidget与Qml交互数据的方法。

通过设置上下文属性

setContextProperty可以将变量设置到Qml环境中。

C++代码:

javascript 复制代码
QQuickWidget *view = new QQuickWidget;
QString str = "Hello world";
/* 设置变量到Qml中 */
view->rootContext()->setContextProperty("str", str);
view->setSource(QUrl("qrc:/View.qml"));
view->show();

Qml代码:

javascript 复制代码
import QtQuick 2.0
Rectangle {
    width: 640; height: 320
 
    Text {
        anchors.centerIn: parent;
        text: str  /* 引用C++传入的str变量。*/
    }
}

2.通过注册Qml类型方式

使用qmlRegisterType注册一个QObject派生类到Qml中。

C++代码:

javascript 复制代码
导入MyObject类到Qml中 */
qmlRegisterType<MyObject>("MyModel", 1, 0, "MyObject");
 
QQuickWidget *view = new QQuickWidget;
view->setSource(QUrl("qrc:/View.qml"));
view->show();

/*

「注意:导入的类型必须实例化才能使用」。

Qml代码:

javascript 复制代码
import QtQuick 2.0
/* 导入MyModel模块 */
import MyModel 1.0
 
Rectangle {
    width: 640; height: 320
 
    /* 使用MyModel模块的MyObject对象 */
    MyObject {
        id: myObject
        /* 设置text属性 */
        text: "12345"
        /* 读取打印text属性 */
        Component.onCompleted: console.log(text)
    }
}

3.通过调用Qml函数的方式

使用invokeMethod可以调用Qml中的函数。通过设置Qml的实例,函数名字,输入参数和返回值即可调用Qml中的函数。

C++代码:

javascript 复制代码
QQuickWidget *view = new QQuickWidget;
view->setSource(QUrl("qrc:/View.qml"));
 
QVariant retVal;
QMetaObject::invokeMethod(view->rootObject(), /* Qml实例 */
                          "execute",         /* 函数名字 */
                          Qt::DirectConnection, /* 连接方式 */
                          Q_RETURN_ARG(QVariant, retVal), /* 标记返回值 */
                          Q_ARG(QVariant, "Hello"), /* 输入参数1 */
                          Q_ARG(QVariant, "world"));/* 输入参数2 */
qDebug() << "value: " << retVal;
view->show();

Qml代码:

javascript 复制代码
import QtQuick 2.0
import MyModel 1.0
 
Rectangle {
    width: 640; height: 320
    
    /* Qml函数,注意是在顶级控件下定义 */
    function execute(var1, var2) {
        console.log(var1, var2)
        return true;
    }
}
相关推荐
QGC二次开发2 天前
QML项目实战:自定义Combox
qt·qml·自定义控件·combox
for(::)4 天前
QML旋转选择器组件Tumbler
qml
咩咩大主教13 天前
VSCode导入QSS文件
css·c++·vscode·qt·qml·quick·qss
for(::)14 天前
QML列表视图 ListView的使用
c++·qt·qml·1024程序员节
ly_zszcyx23 天前
Qml 分组动画(二) 动画嵌套(自学笔记)
c++·qt·qml
爱搞事的程小猿2 个月前
4.qml单例模式
单例模式·js·qml
梦起丶2 个月前
Qml 实现星级评分组件 已发布
qt·ui·控件·qml
梦起丶2 个月前
Qml 实现水波进度动画条
qt·ui·控件·qml
梦起丶2 个月前
Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)
qt·控件·qml