![](https://img-blog.csdnimg.cn/20210414220343612.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Qt Quick(Qml)开发之旅
文章平均质量分 81
Qt Quick(Qml)从基础开始,学习,实战,提升。
啊。。还有好多坑(ಥ _ ಥ)
梦起丶
这个作者很懒,什么都没留下…
展开
-
Qml 实现瀑布流布局
最近在刷掘金的时候看到一篇关于瀑布流布局的文章,然鹅他们的实现都是前端的那套,就想着 Qml 有没有类似实现。结果百度了一圈也没有( T_T Qml 凉了凉了 ),于是,我按照自己理解,简单实现了一个 Qml 版的瀑布流布局。瀑布流布局(Waterfall Layout),也被称为瀑布式布局或多栏自适应布局,是一种网页布局技术,它允许内容以多列的形式显示,类似于瀑布一样从上到下流动。这种布局方式特别适合于展示图片或卡片式内容,如图片库、新闻摘要、商品列表等。原创 2024-05-18 20:55:15 · 1082 阅读 · 0 评论 -
提升性能:QML Canvas 绘图优化技巧
优化QML Canvas绘图性能是确保应用程序流畅运行的关键一环。通过采用上述技巧和策略,你可以提升绘图性能,改善用户体验,并确保应用程序在各种设备上都能够高效运行。只有不断地优化和调整绘图代码,结合性能分析工具的使用,才能使你的应用在绘图方面达到最佳状态。原创 2024-04-16 18:19:27 · 978 阅读 · 0 评论 -
Qt 6.5 中 QML 模块的新功能
尽管QML模块已经存在很长时间了,它们的使用在 Qt6 之前相当稀少。在 Qt6 中,它们变得更加普遍。并且有充分的理由:只有将所有相关的 QML 放在一个模块中,才能使qmllint或Qt Quick 编译器等工具正常工作。但是,到目前为止,Qt 自己的 API 的某些部分还不知道 module。与 QML 类型相互作用时,例如通过,您需要使用明确的文件路径。从 Qt 6.5 开始,现在有一个替代解决方案来利用模块,我们将在此博客文章中介绍。原创 2024-04-14 23:55:53 · 1223 阅读 · 0 评论 -
Qml 中的那些坑(六)---对象被错误删除,看不见的垃圾回收
在 Qml 中,很多时候我们需要动态创建一些 Qml 对象,通常是:createComponent + createObject 或createQmlObject。然而,最近工作中却出现了一个相当难以察觉的问题,花了很多时间才定位到关键位置。其根本原因在于:未给动态创建的对象分配 parent ( 即:没有任何对象持有其引用 ),结果就是,当 Qml 引擎运行垃圾回收时,这些对象会被错误清除掉。原创 2024-04-14 16:28:43 · 460 阅读 · 0 评论 -
QT6 中的隐式导入与 QML 模块解析
在 QML6 开发中,每个 QML 文档都默认具有隐式导入。这意味着我们可以在同一目录下使用其他 QML 文档,而无需显式导入。这大大减少了编写冗余代码的工作量。通常,我们不需要为QML文件所属的模块进行导入。然而,如果隐式导入不能识别文件所属的模块,这一功能的价值就会大打折扣。虽然理论上这种情况不应该发生,但由于 Cmake API 的限制,我们不能完全排除这种可能性。原创 2024-04-10 23:43:05 · 475 阅读 · 0 评论 -
Qt / Qml 视频硬解码(CUDA)中如何实现无上传硬渲染(一)
很多时候,我们在对视频的解码和渲染的处理都要经过以下步骤: ◦ 软解码,视频帧位于内存。 ▪ 软渲染,需要拷贝到图像然后渲染;硬渲染则需要上传纹理,然后渲染。 ◦ 硬解码,视频帧位于显存。 ▪ 软渲染,需要下载到内存,然后拷贝到图像再渲染;硬渲染则直接拷贝到纹理,然后渲染。 然而,对于超高分辨率( 4K 8K )而言,上传下载带来的的性能损失太大了( CPU瓶颈 ),为了实现更流畅的体验和更低的资源占用,应当考虑更好的方案。原创 2023-01-09 16:13:07 · 2529 阅读 · 1 评论 -
Qt6 中如何使用 qsb
Qt 6 以后,对于 Qt Quick 不再直接使用各个图形 API 的着色器语言,而是使用一种 .qsb 的文件,这个文件由 qsb.exe 工具生成,它包含了各个图形 API 使用的字节码。通过使用 qsb,我们便可以自由切换硬件渲染后端而无需写多个平台的着色器代码。另一方面,.qsb 文件主要由 Qt Scene Graph 和 Qt3D 使用,当然,Qml 中相关的组件也同样使用,例如:ShaderEffect。因此,本篇使用前一篇的圣诞树作原创 2023-01-03 08:00:00 · 2751 阅读 · 2 评论 -
Qml 中用 Shader 实现圣诞树旋转灯
2022年圣诞节到来啦,很高兴这次我们又能一起度过~这次给大家带来一个简单漂亮圣诞树灯。当然了,本篇文章主要是讲解一下如何在 Qml 中使用GLSL来实现自己的特效。至于代码嘛,我比较喜欢在Shaderjoy上寻找,那里有很多超级炫酷的着色器实现的特效,并且可以很轻松的集成到 Qml 中。原创 2022-12-24 19:17:52 · 3002 阅读 · 0 评论 -
Qt / Qt Quick程序打包的一些坑 (三)
最近想把项目升级到 Qt6,因为代码的改动不算很大,所有想着打包也应该差不多。结果因为我使用了 Qt Charts,怎么也运行不起来,后来通过动态库依赖才发现 Qt6 新增加了一个 Qt6OpenGLWidgets.dll,并且打包时并不会自动复制,只能手动拷过来了。原创 2022-11-29 12:56:43 · 1500 阅读 · 0 评论 -
Qml中的那些坑(五)---MouseArea上的ListView滚轮事件穿透
最近在 Qml 中使用 MouseArea 时发现了一个奇怪的现象:位于 MouseArea 上的 ListView 在处理了滚轮事件的情况下进行滚轮,下面的 MouseArea 却在某些情况下接收到了这个事件。按照直觉,ListView 明明有内部的滚轮事件处理,应该阻止事件向下传递才对,然而此时的情况却出乎意料,因此在此记录并附上解决方案。原创 2022-11-28 09:00:00 · 1675 阅读 · 2 评论 -
Qt 中捕获三方库&自身标准打印方法
很多时候,我们为了方便调试,常常需要加入一些打印。例如 Qt 中的 QDebug,C 和 C++ 中的 printf / cout 等等,又或者是三方库提供的标准打印接口。然而大部分时候,这些打印相当不统一(格式和位置),并且因为 Qt 作为 GUI 框架,调试信息实在不应该直接置于 UI 之上。因此,需要一种能统一和标准化所有标准打印的方法( 所谓标准打印即标准输出 stdout),并且能够动态配置。原创 2022-11-22 09:00:00 · 2110 阅读 · 0 评论 -
纯 Qml 实现仿画图3D的颜色选择器(更强更易用)
在做编辑相关的应用经常会用到颜色选择器。实际上, Qt Widgets 时代使用 QColorDialog 或者 Qml 中 ColorDialog即可完成一般的颜色选择的需求。 然鹅现在都 Windows 11了!!还在用那么拉跨的东西,实在是看不下去了。 然后自己一直很喜欢用 Windows 画图3D的那个颜色选择器,因此我决定仿照实现一个,并且还为它增加了一个透明度。原创 2022-11-16 10:00:00 · 2156 阅读 · 4 评论 -
Qml 计算实际帧率(FPS)的方法
在 Qml 中,任何可视化的项的显示 ( 渲染 ) 都依赖一个根 QQuickWindow,它们包含了底层的场景图渲染器。 因此,如果我们想要在 Qml 中获取 FPS,则只需在窗口渲染场景图时记录帧数并计算帧率即可。 不过,需要注意的是:GUI 程序一般不会频繁刷新,并不建议使用循环 update() 来计算 ( 可行但并非最佳 )。 .........原创 2022-07-05 00:01:37 · 1640 阅读 · 0 评论 -
QWidgets 与 Qml 相互嵌入方法,以及其中的一些坑
【写在前面】有时候,当我们接手一个老项目( 也可能不老-.-)时,会碰上这些情况:1、老项目实用 QWidgets,想要部分或全部迁移到 Qml。2、老项目实用 Qml,想要部分或全部迁移到 QWidgets。然而,很多时候全部迁移几乎不现实,此时,折中的方案应运而生:QWdigets 和 Qml 相互嵌套使用。本篇主要内容:1、Qml 嵌入 QWiidgets中的方法及一些坑;2、QWiidgets嵌入Qml中的方法及一些坑;【正文开始】Qml 嵌入...原创 2021-05-30 19:41:29 · 8984 阅读 · 15 评论 -
Qml 中的那些坑(四)---MouseArea 的 Click / Hover 事件穿透
【写在前面】我们在 Qml 中经常会遇到这样的情况:有某个 Item ( 这里称为 Parent ),需要它在鼠标 Enter 时显示,鼠标 Exit 时隐藏。这时候我们会用一个 MouseArea,然后处理 onEntered / onExited。但是,有一个巨大的坑:如果这个 Item 里嵌入了其他Item ( 这里称为 Child )并且处理自己的 MouseArea,则会导致 Parent Item 的 MouseArea 失效( 即不能接收到相应的事件 )。本篇主要内..原创 2021-04-16 23:30:49 · 7178 阅读 · 5 评论 -
Qml 中实现对原始视频图像格式( YUV / RGB )支持
【写在前面】之前一直在学着视频相关的知识,然后工作也正好是监控相关的。并且界面部分用Qml 开发的。一开始,我觉得相当容易,只是显示解码好的图像而已,没什么难度。因为之前写过一篇在 Qml 中实现:https://blog.csdn.net/u011283226/article/details/104051033?spm=1001.2014.3001.5501这个方法优点是简单,但是缺点是只支持 QImage/QPixmap/QQuickTextureFactory。...原创 2021-04-11 17:11:07 · 3346 阅读 · 5 评论 -
Qml实现简易版Qt Linguist(语言家) & QXmlStreamReader / QXmlStreamWriter 的使用方法
【写在前面】因为之前写了几篇文章,是Qt 翻译的相关的,然后自己就去了解了下 TS 文件( Translate Source 翻译资源文件 )。发现只是比较简单的 XML 文件,又因为自己对 Qt 读写 XML 用的并不是很多,就想着学习一下在 Qt 中读写XML。结果。。顺便做了个 Qml 版的 Qt 语言家 ─.─|||。。【正文开始】在Qt 中,有三种读写 XML 文档的方法:1、QXmlStreamReader / QXmlStreamWriter :QXmlStr..原创 2020-06-30 23:05:31 · 810 阅读 · 0 评论 -
Qt / Qml 中支持多国语言
【缘起】最近找到一个看起来比较好用的开源工具( 然鹅不太会用 ),但整个界面都是英文的。不过由于是 Qt 写的,所以就尝试自己做些汉化。然后了解到不少实现多国语言相关的技术( 以及一些坑 (‾◡◝) )。这里写一篇完整且具体的,「 如何在 Qt / Qml 中支持多国语言 & 动态翻译」。【正文开始】按例先上效果图。QtWidgets 的:实际上,这里包含两部分: 静态部分: - MainWindow Title「 MainWindow =>...原创 2020-05-25 17:44:50 · 3353 阅读 · 3 评论 -
Qt / Qt Quick程序打包的一些坑 (二)
【写在前面】打包方法见Qt / Qt Quick程序打包的方法。这里是再次记录一个坑(爹)。【正文开始】直接进入正题:如果我们的 Qml 中使用了【Qt Labs】模块,那么在打包的时候,目录下多出一个 Qt\labs文件夹。但是,在 labs 下面会缺少一个文件夹,导致应用无法运行。只能使用 Process Explorer 找到每一个 dll,然后复制进去尝试。...原创 2020-05-06 16:06:14 · 1456 阅读 · 8 评论 -
Qml中使用QtSingleApplication & QtService
【写在前面】在很多软件中,程序通常需要这样一个状态:只有一个实例运行中。而另一些特殊的应用程序,它们又需要长期运行。实际上,对于这些情况,Qt 早已提供了解决方法:QtSingleApplication 和 QtService。不过要注意的是,它们并没有被包含在官方库中。【写在前面】...原创 2020-04-29 15:41:58 · 1120 阅读 · 9 评论 -
Qt / Qml 实现历史编辑器 ( 支持历史搜索 & 关键字匹配 )
【写在前面】这几天突然想起来,之前公司有个需求,是类似于搜索引擎的那种关键字排序。当然了,并不是做搜索,而且对历史输入记录的一个匹配 + 排序。然鹅因为疫情,工作已经辞了,但想着这个东西挺有意思的,还是决定实现一下。【正文开始】老样子,先展示一下效果图:...原创 2020-03-19 16:59:20 · 1849 阅读 · 2 评论 -
Qml中实现多视图,多图像源(QImage / QPixmap)
【写在前面】在 Qml 中,实现多视图很容易,无非是多个 Image 而已。但是,如果需要动态刷新,则变得困难。再或者,来自多个不同的图像源,将更加复杂。实际上,这在 Qt( Widgets ) 中实现却很容易,究其原因,是 Qml 中缺少对 QImage ( 或者说 原始图像) 的支持 。即便如此,Qt 仍提供了一种解决方法。本篇主要内容:1、QML 中支持 QI...原创 2020-01-30 19:52:32 · 5499 阅读 · 11 评论 -
Qml中的那些坑(三)---KeyEvent 的 key / virtualKey / scanCode
【写在前面】在 Qt 中,对于一个键盘事件 QKeyEvent ,通常包含三种键值:1、key:Qt 键值,例如Qt::Key_Escape。2、nativeVirtualKey:本机虚拟键值,例如 VK_ESCAPE ( windows )。3、nativeScanCode:本机扫描码。【正文开始】在 Qml 中,也存在着键盘事件:KeyEvent。看起来它...原创 2019-12-22 17:27:24 · 2964 阅读 · 1 评论 -
Qml中的那些坑(二)---QWindow的closeEvent
【写在前面】在很多应用中,很可能会需要这样的功能:我们点击窗口上的 × ,并不是要真的退出应用,而是要它们以小托盘的形式继续运行。情况 1:如果 × 是自定义的按钮,我们可以轻易控制它的行为,hide ->system tray。情况 2:如果 × 是窗口自带的按钮,那么对于QWidgets 来说,我们只需要重写其 closeEvent 方法,然后实现想要的动作。然鹅,对...原创 2019-11-13 23:33:57 · 3698 阅读 · 0 评论 -
Qt Quick实现多边形窗口(不规则窗口)
【写在前面】在 Widgets 中,不管是绘图( 使用QPainter ),还是不规则窗口( 使用setMask )都很容易。但是,Qt5 以后( Qt Quick / QWindow中),事情就不那么简单了。即使是绘制一张图片( Image )都非常麻烦,能用的方法是:1、使用 OpenGL API。2、使用 Scene Graph API。3、使用 Image(QM...原创 2019-11-07 23:08:55 · 3402 阅读 · 4 评论 -
Qml 中的那些坑(一)---Image 的内存
【写在前面】首先,要提一个版本bug。因为一个类似的bug是在Qt 5.13.0 中 ( 5.12 则没有),由QQuickPaintedItem引起的。详见:https://bugreports.qt.io/browse/QTBUG-78063同样的,使用Image后,也会无限增长内存。但是先忽略这个bug,因为这里要讲的是Image的内存。【正文开始】在qml中,I...原创 2019-09-13 00:24:10 · 5607 阅读 · 1 评论 -
QML中动态创建组件(同步/异步)的方法
【写在前面】在QML中想要动态创建组件,一般有两种方法:1、使用Loader。2、使用JavaScript:Qt.createComponent() / Qt.createQmlObject()。当然,这里不仅会介绍他们的一般用法,还有如何使用它们来进行同步/异步的创建。【正文开始】首先介绍Loader:很简单,我们可以先声明,然后通过动态设置它的source / s...原创 2019-08-11 22:48:54 · 6673 阅读 · 6 评论 -
Qt / Qt Quick程序打包的方法以及一些坑
【写在前面】这篇只是记录一下,关于Qt Quick程序某些情况下打包会遇到的坑。当然,也包括一般Qt程序打包的方法。【正文开始】在windows平台,Qt使用【windeployqt.exe】来进行打包。因为我使用MinGW,所以它位于 mingw73_64\bin 目录下。Qt程序打包:1、进入需要打包的程序的目录,在cmd中,cd [程序目录]。2、接着wind...原创 2019-08-09 11:56:58 · 2621 阅读 · 3 评论 -
Qt实现的雷达扫描效果(QPainter)
【写在前面】本篇实际上是接上一篇的。本来上一篇中在 QML 中使用 Canvas 实现了类似的效果,但是,不仅性能非常差,而且在我的电脑上偶尔还会崩溃,很烦,所以决定使用 QPainter 来实现这种雷达扫描的效果。之前也提到过的在 QML 中使用 QPainter 的方法,因此这篇讲效果实现过程。【正文开始】首先,还是上效果图:之前说过,继承QQuickPainte...原创 2019-04-22 14:35:45 · 11384 阅读 · 10 评论 -
在QML中使用Canvas
【写在前面】在qml中,要进行一般的绘图,如果不想使用 C++ API,那么就只能使用 Canvas 了。qml Canvas 提供 HTML5 Canvas 类似的 API,需要修改 HTML5 Canvas 应用程序以在 Canvas项 中运行。使用 qml 属性绑定或 Canvas 项方法替换所有 DOM API 调用。使用 MouseArea 项替换所有 HTML 事件处理...原创 2019-04-18 13:40:13 · 10521 阅读 · 3 评论 -
在QML中使用QPainter
【写在前面】要想在qml中进行绘图,有很多方法,1、在我之前的博客中,就讲过如何在qml中使用opengl,这是一种方法,但它要求opengl的基础。2、一种方法是使用QPainter,它的好处是提供很多易用和实用的绘图API,而且在很多在widgets的使用的代码可以直接移到qml中来使用。3、当然还有一种方法就是使用场景图API,这种我了解的不多,以后再说。【正文开始】...原创 2019-03-05 14:54:05 · 3518 阅读 · 3 评论 -
QML实现的支持动图的编辑器(比之前要好)
【写在前面】在我之前的博客中就做过一个支持动图的编辑器,但是效果很差,而且还会出现其他的问题。然而最近找到了更好的实现方法,已经基本可以用了。【正文开始】老规矩,先上效果图:看起来还不错,现在开始讲解实现,实际上很简单,不过,有一些地方要注意。首先,是ImageHelper,这个类就是用来插入图片到qml中的TextEdit/TextArea等等的辅助类:imag...原创 2019-03-16 17:22:36 · 2094 阅读 · 10 评论 -
QML实现的天气预报,包含很多东西
【正文开始】还是老样子,先上效果图,我用的手机,电脑上效果基本一致:关于qt c++部分,比较有用的有:1、QGeoPositionInfoSource的使用(位置信息,可以当做是gps)关于qml部分,比较有用的有:1、ChartView的使用(基本就是QChartView的qml实现,但有一些地方要注意)2、提供下拉刷新的实现方法其他部分就比较的简单,可...原创 2018-09-10 13:20:08 · 1395 阅读 · 1 评论 -
在QML中使用QSystemTrayIcon(系统托盘)
【写在前面】写这篇文章的时候应该不算晚,因为qml中并没有正式的系统托盘组件。但是,在Qt Labs Platform模块中(Qt 5.8引入),已经有了SystemTrayIcon,相信以后会作为正式的模块进入qml。即便如此,本文仍提供了一种在qml中使用QSystemTrayIcon的方法,或者也可以作为qml与c++交互的例子来看。【正文开始】先上完成后的qml代码:...原创 2018-04-04 11:14:40 · 4673 阅读 · 0 评论 -
QML实现的简单图文编辑器
【写在前面】实现一个能自由插入图片的文本编辑器。注意,在后面使用更好的方法实现:QML实现的支持动图的编辑器(比之前要好)【正文开始】qml的TextEdit是直接支持富文本的,可以直接插入图片,使用<img src="" align="top,middle,bottom" width="" height="">但是对于动图而言,解决办法之一就是手动换...原创 2018-02-01 01:23:40 · 3897 阅读 · 3 评论 -
QML实现的无边框窗口的拉伸,拖拽,基本解决闪烁严重问题
【正文开始】注意:本篇所讲方法过于辣鸡,新方法见:https://github.com/mengps/QmlControls/tree/master/FramelessWindow这段话是后来加的。。使用qt制作的无边框窗口,只需在其flag中加入FramelessWindowHint。然而,无边框窗口意味着,无法使用原有的边框拉伸,拖拽功能。在qwidget中,有很多实现...原创 2018-03-28 12:30:01 · 10046 阅读 · 21 评论