通俗易懂玩QT:QQuickWidget学习

因为项目需求,需要将 qml 实现的瓦片地图嵌入 mainwindow 中,以便于实现数据库存取数据,特意学习了一下,这里分享给大家。

一、使用 QQuickWidget 在 QMainWindow 中嵌入 QML

QQuickWidget 是 QT 中专门用于将 qml 实现的窗口界面嵌入 QWidget 或 QMainWindow 的控件,使用也比较方便,这里分享两种方法将 QML 窗口嵌入 QWidget 或 QMainWindow 中。

方法一:在 ui 文件中嵌入

  1. 打开新建工程的 .ui 文件:
    新建一个包含 ui 文件的工程

  2. 在左边的列表框中找到 Display Widget 下的 QQuickWidget
    元素(最下面一个),将其拖入右边的窗体中:
    将 QQuickWidget 拖入窗体

  3. 讲一个写好的 qml 文件包含至工程中:
    包含一个 qml 文件到工程中去

  4. 给 QQuickWidget 对象引入 qml 文件的地址:
    引入 qml 文件的地址

  5. 点击运行会报错,原因是缺少模块,打开 .pro 文件,引入 quickwidgets 模块:

//引入前
QT       += core gui
//引入后
QT       += core gui quickwidgets
  1. 再次点击运行,效果图如下:
    运行结果

方法二:使用代码嵌入

  1. 打开 .pro 文件,引入 quickwidgets 模块:
QT       += core gui quickwidgets
  1. 在头文件中引入 QQuickWidget 控件:
#include <QtQuickWidgets>
  1. 在 MainWindow 中新建并初始化一个 QQuickWidget 控件:
QQuickWidget* widget = new QQuickWidget(this);
  1. 为 QQuickWidget 控件设置加载资源:
widget -> setSource(QUrl("qrc:BDYQml.qml"));
  1. 点击运行,效果图如下:
    运行效果图

二、使用 C++ 与嵌入窗口中的 QML 交互数据

使用 C++ 向嵌入窗口中的 QML 传递数据

//使用以下方式可向 qml 传递数据,在 qml 中直接使用 obj 即可
widget -> rootContext() -> setContextProperty(obj, value);

使用 C++ 获取嵌入窗口中的 QML 的对象

//使用以下方式可获取 qml 对象,并以 QQuickItem* 格式返回
QQuickItem* qmlItem = widget -> rootObject();

三、注意事项

  1. 嵌入窗体的 qml 对象不能使用 QtQuick.Controls 中的 ApplicationWindow 对象,否则该 qml 无法嵌入;
  2. 将要嵌入的 qml 文件放置 qrc 中,以便调用,否则大型项目有时引入使用的是绝对地址,具有比较差的移植功能;
  3. 使用 QQuickWidget 控件需要在 pro 文件中引入 quickwidgets 模块;
  4. 使用 C++ 向嵌入窗口中的 QML 传递数据时,需要在 setSource 之前,虽然不会影响正常运行,但是会报错。
  5. 使用 C++ 获取嵌入窗口中的 QML 的对象时,需要在 setSource 之后,虽然不会影响正常运行,但是会报错(本条为推测,没有亲自测试过)。

学习分享,一起成长!接触QT的时间不长,有不足之处,欢迎大佬指出来,我会进行更正。有问题可以发送邮件至 mjzhutianxiu@163.com ,不定时上线查收。

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐