Qt Quick实践系列-Qml与Widget交互
❝QQuickWidget类提供了一个用于显示Qt Quick用户界面的小部件。❞
QQuickWidget底层继承的是QWidget，但它可以加载Qml文件(组件)，但我们有时候需要和Qml文件(组件)数据交互使用，本文介绍几种QQuickWidget与Qml交互数据的方法。
通过设置上下文属性
setContextProperty可以将变量设置到Qml环境中。
- C++代码：
QQuickWidget *view = new QQuickWidget;
QString str = "Hello world";
/* 设置变量到Qml中 */
view->rootContext()->setContextProperty("str", str);
view->setSource(QUrl("qrc:/View.qml"));
view->show();- Qml代码：
import QtQuick 2.0
Rectangle {
width: 640; height: 320
Text {
anchors.centerIn: parent;
text: str /* 引用C++传入的str变量。*/
}
}通过注册Qml类型方式
使用qmlRegisterType注册一个QObject派生类到Qml中。
- C++代码：
/* 导入MyObject类到Qml中 */
qmlRegisterType<MyObject>("MyModel", 1, 0, "MyObject");
QQuickWidget *view = new QQuickWidget;
view->setSource(QUrl("qrc:/View.qml"));
view->show();- Qml代码：
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)
}
}「注意：导入的类型必须实例化才能使用」。
通过调用Qml函数的方式
使用invokeMethod可以调用Qml中的函数。通过设置Qml的实例，函数名字，输入参数和返回值即可调用Qml中的函数。
- C++代码：
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代码：
import QtQuick 2.0
import MyModel 1.0
Rectangle {
width: 640; height: 320
/* Qml函数，注意是在顶级控件下定义 */
function execute(var1, var2) {
console.log(var1, var2)
return true;
}
}- 打印输出：
Hello world
value: QVariant(bool, true)相关
- Qt项目配置：
QT += quickwidgets- 需要用到的头文件：
#include <QQuickWidget>
#include <QMetaObject>
#include <QQuickItem>
#include <QQmlContext>
#include <QQmlEngine>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-03-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
