Qml 快速使用

栏目: IT技术 · 发布时间: 4年前

内容简介:这周简单的了解了下Qt的

点击上方蓝字可直接关注!方便下次阅读。如果对你有帮助,可以点个在看 或点个赞,感谢~

这周简单的了解了下Qt的 qml 。个人对它的定位就是可以方便快速地绘制一些精美的 UI ,对快速开发前端 (UI) 还是有挺大帮助的。所以并没有从整体上了解,而是快速的组合了一个小 Demo ,效果如下。试想下,如果自定义 Widget 需要实现多少东西呢?

Qml 快速使用

Demo总体概述:通过 Widget 上的 Slider 控制 Qml 中的拨码盘刻度指向,实现了 QmlWidget 通信。

程序环境:Windows、 Qt5.9.8(MSVC2015)

一、  项目准备

由于使用到了Qml以及 QQuickWidget ,所以 pro 中要添加 quickquickwidgets 模块,不然会报出一些奇葩的问题。qml文件以及用到的图片是通过资源文件形式添加进来的。

QT += quick

QT += core gui quickwidgets

二、 程序源码

1. Widgwet部分

该部分主要使用了QQuickWidget用来嵌入 Qml 的显示,并使用 Qt 的信号和槽来进行通信。

ui->quickWidget->setSource(

QUrl(QStringLiteral("qrc:/main.qml")));

QObject *item = (QObject *)ui->quickWidget->rootObject();

if(nullptr != item)

{

connect(this,SIGNAL(signal_position(int)),

item,SIGNAL(posSignal(int)));

}

2. Qml部分

该部分程序几乎都是Qt官方自带例子的源码,为方便阅读,直接删去了例子中没 有用到的部分。

***\Qt5.9.8\Examples\Qt5.9.8\quick\customitems\dialcontrol\content

所以主要说下信号部分

Rectangle {

color: "#545454"

width: 300; height: 300


signal posSignal(int pos)


// 信号处理程序(处理从 Qt Widgets 接收到的信号)

onPosSignal: {

dial.value = pos

}

//官方例子拨码盘调用,删除其他程序

Dial {

id: dial

anchors.centerIn: parent

// value: slider.x * 100 / (container.width - 32)

value: 0

}

}

蓝色字体部分是Qml中信号声明以及实现的部分,与 Widget 中信号槽连接对应起来看。

三、 小结

对于地面站软件显示一些参数的情况下,使用Qml还是很方便的。以后有机会使用自定义 Widget 做一个类似的效果。

如果对其他前端语言比较熟悉的话,如h5、 js 等,使用它们也可以快速的搭建前端界面。越了解就会发现一个应用程序往往是多种语言结合在一起的,把合适的语言用在合适的地方。

需要工程源码的小伙伴可直接在公众号后台留言。

Qml 快速使用


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Pro JavaScript Techniques

Pro JavaScript Techniques

John Resig / Apress / 2006-12-13 / USD 44.99

Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web s......一起来看看 《Pro JavaScript Techniques》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具