QtQuick 中的 qml 与 Qt 的 C++
QtQuick 可以使用内置的 JavaScript 引擎加载相应的 JS 代码,使用起来特别方便。
在 Qt 中使用 C++ 开发底层,QtQuick 用来加载、处理图像,然后使用 Qt 提供的接口保证两者能够正常通信即可。
1. 首先用Qt Creator新建项目,选择Qt Quick Controls 2 Application,命名项目…
2. 在资源文件qml.qrc中添加一个qml文件,命名…
3. 在qml文件中输入相应的元素(Item,Rectanger,Image,Canvas等等)。
import QtQuick 2.0
import QtQuick.Window 2.2 Window {
width:
height:
visible: true
title: "Test window"
}
这里仅用了一个 Window 元素,加载后只显示一个空白的窗体。
4. 在main函数中加载qml引擎需要用到QQmlApplicationEngine类,通过该类加载qml文件。如下:
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv); QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/Test.qml")));
return app.exec();
9 }
其中,engine 对象的 load() 方法,需要一个QUrl对象提供qml文件的url路径,这里加载了一个qml文件,即“Test.qml”文件。
运行之后得到空白的窗体。如果想要显示不同的内容,需要在qml文件中添加相应的元素或自己编写控件再添加。
用 QQmlApplicationEngine 加载的 qml 文件可以使用 QML 的 Window 控件。
但是在c++ 的类方法中无法直接使用 QQmlApplicationEngine 类,若使用该类加载 qml 文件,会导致在触发显示窗口事件时,窗口显示一下立即消失,但是程序依然在运行,因此就无法对qml窗口进行操作。
void Data::view() {
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/Test.qml")));
}
在Data类的view()方法中使用 QQmlApplicationEngine load() 方法无法正常显示窗口。
那么,如何在方法中调用加载 qml 文件呢?
要在 c++ 文件中显示qml文件的内容,Qt 提供了 QQuickView 类(QtQuick1.0则是使用 QDeclaritiveView 类,但是该类在加载 qml 文件时,响应缓慢)使用 QQuickView 即可加载 qml 并显示内容。
void Data::view() {
QQuickView *compassview = new QQuickView;
compassview->setSource(QUrl(QStringLiteral("qrc:/Compass.qml")));
// compassview->rootContext()->setContextProperty("dataRadius", this);
QQmlContext *context = compassview->rootContext();
context->setContextProperty("dataSource", this);
// 设置窗口图标
QIcon icon = QIcon(QStringLiteral(":/img/compass.ico"));
compassview->setIcon(icon);
// compassview->set
// 设置窗口缩放时,根对象也会随之缩放
compassview->setResizeMode(QQuickView::SizeRootObjectToView);
compassview->setTitle("Compass heading pitch & roll");
compassview->show(); }
compassview 指向一个 QQuickView 对象,setSource() 方法指定该 QQuickView 对象所要加载的qml文件。
而 compassview->rootContext() 则是获取对象的根元素上下文,然后用 context 对象的 setContextProperty(const QString *, const QVariant*) 方法设定上下文属性,即可通过 QVariant 指针从 C++ 向 QML 传递数据。
然而如果qml文件是以 Window 作为根元素的话,QQuickView加载时会出现一个警告,因为QQuickView继承自QQuickWindow(又继承自QWindow),它本身就是一个窗口类,如果再用 QML 的 Window 控件作为根元素,自然会出现警告,可以忽略掉该警告,也可以将 Window 改成 Item (但要注意,Window 的有些属性在 Item 中不存在),这样就不会出现警告了。
然后在 qml 文件中通过设定一个定时器 Timer,可以定时从 c++ 中获取数据。
/*
* 设置一个定时器,每隔 500ms 就从数据源中读取数据,修正图像
*/
Timer {
id: updateTimer
interval: 500
running: true
repeat: true onTriggered: {
// console.log("Timer is triggered! ")
// var data = DataSource.getData();
var data = dataSource.getRadius() data = [0, 0, 0]
// h_refresh(data[0])
refresh(data[0], data[1], data[2])
}
}
qml中 dataSource 需要与上面的 setContextProperty(“dataSource”, this) 语句中的 dataSource 同名(这样就可以直接调用相关对象的方法,比如 getRadius() 方法),否则 qml 将无法获取数据。
C++ 中设置 QQuickView 的窗口图标、标题等等与 QWindow 类似。
compassview->setResizeMode(QQuickView::SizeRootObjectToView) 设置了根对象大小随窗口大小改变而改变。这样就能动态缩放qml内容。
--------------------------------------------------------------------------------
另外需要注意的是,如果先用 Qt 新建了一个 Qt 应用,想要再添加 qml 文件并运行,需要修改项目的 .pro 文件,添加以下内容:
QT += qml quick
这样,在编译时才不会出错。
====================================================
另外,附上完整的代码
https://github.com/GitFuture/Compass
QtQuick 中的 qml 与 Qt 的 C++的更多相关文章
- QML与Qt C++ 交互机制探讨与总结
介绍 QML和 C++对象可以通过,signals,slots和 属性修改进行交互.对于一个C++对象,任何数据都可以通过Qt的 Meta-Object System暴露给QML(何总方法,后面介绍) ...
- Qt Widgets、QML、Qt Quick的区别
Qt Widgets.QML.Qt Quick的区别 简述 看了之前关于 QML 的一些介绍,很多人难免会有一些疑惑: Q1:QML 和 Qt Quick 之间有什么区别? Q2:QtQuick 1. ...
- QML与Qt C++ 交互机制探讨与总结(转)
原文转自 https://www.cnblogs.com/aoldman/p/4103510.html 介绍 QML和 C++对象可以通过,signals,slots和 属性修改进行交互.对于一个C+ ...
- 在 C++ 中使用 QML 对象
看过了如何在 QML 中使用 C++ 类型或对象,现在来看如何在 C++ 中使用 QML 对象. 我们可以使用 QML 对象的信号.槽,访问它们的属性,都没有问题,因为很多 QML 对象对应的类型,原 ...
- qml(Qt Quick)做界面
qml(Qt Quick)做界面 来源 https://www.zhihu.com/question/24880681/answer/29324824 本人是Qt初学者,正在写一个会计小软件(Lin ...
- Best Practices for QML and Qt Quick
Despite all of the benefits that QML and Qt Quick offer, they can be challenging in certain situatio ...
- Qt widget中使用QML自定义电池
1.效果 2.QML 在资源里新建Mybattery.qml: import QtQuick 2.0 import QtQuick 2.12 Item { id: root property colo ...
- [转载]震惊!QWidget竟然可以嵌入到QML中,QMl窗口句柄竟然是这样获取
背景 记得在初学qml时,就被大佬告知Qml的实现有两种方式“view+item”和“engine+widow”,那么能不能将QWidget嵌入到QML中来呢,我收到的答案是不可以,原因是QML的 ...
- QML用Qt.labs.settings实现保存用户设置
举个简单的例子: main.cpp中设置程序信息 QGuiApplication::setApplicationName("Gallery"); QGuiApplication:: ...
随机推荐
- 理解FMS中的实例
FMS服务器端安装后,唯一需要注意的是设置端口,默认的访问端口是1935和80,如果服务器上安装了IIS提供 WEB服务,那么需要将80修改为其他端口如8080,否则,IIS将会无法工作.如果愿意,也 ...
- redis使用Lua脚本
最近在看<Redis入门指南>第二版,感觉收获挺大,推荐大家有时间看一看.其中有一章讲Lua脚本,感觉挺实用,把总结整理一下. Redis在2.6中推出了脚本功能,允许开发者使用Lua语言 ...
- 使用数字签名实现数据库记录防篡改(Java实现)
本文大纲 一.提出问题 二.数字签名 三.实现步骤 四.参考代码 五.后记 六.参考资料 一.提出问题 最近在做一个项目,需要对一个现成的产品的数据库进行操作,增加额外的功能.为此,需要对该产品对数据 ...
- Rabbitmq无法监听后续消息
现象: 消息队列在处理完一条消息后,无法继续监听后续消息. 首先,系统启动时要启动接收方法如下: protected void Application_Start() { RouteTable.Rou ...
- 访问 Neutron 外部网络 - 每天5分钟玩转 OpenStack(143)
前面我们学习了位于不同 Neutron subnet 的 instance 可以通过 router 通信,今天开始讨论 instance 如何访问外部网络. 这里的外部网络是指的租户网络以外的网络.租 ...
- 内功心法 -- java.util.ArrayList<E> (1)
写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...
- python3 - 通过BeautifulSoup 4抓取百度百科人物相关链接
导入需要的模块 需要安装BeautifulSoup from urllib.request import urlopen, HTTPError, URLError from bs4 import Be ...
- java 双击jar包操作
如何使jar包直接双击运行? 测试:MyMenu.java 类名:MyMenu 写完java代码后,发现物理路径下为: 当我按住Shift键,在此处游记,打开命令行窗口: 执行命令:javac My ...
- bzoj1492--斜率优化DP+cdq分治
显然在某一天要么花完所有钱,要么不花钱. 所以首先想到O(n^2)DP: f[i]=max{f[i-1],(f[j]*r[j]*a[i]+f[j]*b[i])/(a[j]*r[j]+b[j])},j& ...
- phpcmsV9静态页面替换动态步骤
1.先在www目录下找到 phpcms + install_package + phpcms + templates在templates 文件夹里创建个自己的文件夹我弄得是 ceshi 文件夹,在 c ...