luoyayun361的专栏

使用Qt5.15.2，QML实现简单的歌词动态播放效果。效果图如下：注：这里只是为了演示播放效果，并未真正加载音频进行播放。可以在此基础上进行扩展。

实现一个简单的小工具，使用Qt QML实现Windows桌面颜色提取器，实时显示鼠标移动位置的颜色值，包括十六进制值和RGB值。该功能在实际应用中比较常见，比如截图的时候，鼠标移动就会在鼠标位置实时显示坐标和颜色值，做项目实现UI的时候可能会经常用到这个功能，快速提取设计图的颜色值。效果图如下：代码使用Qt 5.15.2版本实现，QML实现UI交互。后期可以在此基础上扩展更多的功能，比如鼠标右键的时候，就暂停提取，然后添加一个复制按钮，可以方便复制当前的颜色值，然后直接取用。

Qt6提供了更丰富的多媒体支持类，使用Qt6 QMediaCaptureSession、QScreenCapture、QMediaRecorder，来实现一个屏幕录制的demo，其中QScreenCapture 最低版本 Qt6.5。支持录制的清晰度设置，选择视频保存位置，UI使用QML来实现。Qt6还有一个比较好用的类 QWindowCapture, 可以针对窗口录屏。使用静态函数可以获取当前可用的录制窗口，选择窗口进行录制。可以在本demo的基础上进行扩展。

本项目实现了使用QT QML创建一个音频波形图进度条的功能。用户可以在界面上看到音频波形图，并且可以点击进度条上的位置进行定位，也可以拖动进度条来调整播放进度。可以让用户更方便地控制音频的播放进度，并且通过音频波形图可以直观地了解音频的节奏和节奏变化,为音频播放功能增添了更多的交互性和用户体验。

在QML中直接使用SVG图片，使用Image控件加载资源，显示出来图片是模糊的，很影响使用体验。本文介绍重新绘制SVG图片，然后注册到QML中使用。效果图：左边是直接使用Image加载资源显示的效果右边是重绘后的效果。

视频是由一系列静止的图像帧组成的，而视频帧率则决定了这些图像帧在单位时间内播放的速度。较高的视频帧率可以提供更流畅的视频画面，而较低的视频帧率则可能导致画面卡顿和不连贯的情况。在实际的应用开发中，经常会遇到需要处理视频的情况，例如提取视频帧用于图像处理、分析等应用。本文将介绍如何利用Qt QML实现视频帧的提取，通过简单的代码示例将图片提取保存到本地中。本示例通过QML实现UI，Qt5.15 cmake编译，使用多线程处理提取，保证UI主线程不会卡顿，将提取的图片保存到本地。

弹球消砖块游戏想必大家都玩过，很简单的小游戏，通过移动挡板反弹下落的小球，然后撞击砖块将其消除。本文使用QML来简单实现这个小游戏。

不规则区域进行截图是一种常见的应用场景，通常用于程序截图工具或者图像处理软件中。主要是为了让用户可以自由选择任意形状的区域进行截图，而不仅仅局限于矩形区域。这样用户可以更灵活地进行截图操作，特别是对于需要截取特定形状区域的情况下非常实用。通过实现鼠标自由选择不规则区域进行截图，用户可以更精确地选择需要截取的内容，避免不必要的部分被包含在截图中。可以看到，截图内容是根据鼠标自由选区来截取不规则的图形，其他区域为透明的。

在开发QtQuick项目中，当项目文件很多的情况下，可能会分成多级文件夹来进行分类，还有一些通用类型文件，如公共组件，通用配置等等，需要在各个不同的文件中进行调用，这种情况下，一种方式是在当前需要引用的文件中通过关键字import加上相对路径，从而找到通用文件目录。另一种方式就是将通用文件目录设置成qml模块形式，通过import直接引入模块名称就可以直接调用相关qml了，这样的好处是在任何不同的目录中都可以随处导入模块，而不用考虑相对路径的问题。

qml实现一个类似手机端闹钟或其它时间设置控件。可以用ListView实现其效果，但是QML提供有现成的控件可以用，所以要实现这个效果更方便。先看效果图本文Demo下载。

前面文章介绍过在QML中使用ListView实现TabBar标签拖拽交换位置效果（文章在这里）先在此基础上升级一下，结合KDDockWidget做一个可浮动的窗口效果。关于KDDockWidget的介绍，以前的文章有写过，可参考：qml dockwidget窗口停靠KDDockWidgets源码编译及安装KDDockWidget是第三方开源项目，可以用于实现QML中Dock窗口效果，Qt本身不支持QML的Dock效果，所以正好弥补这部分空缺。而KDDockWidget中其实是支持Tab合并效果，但是在实

QML中TabBar要实现标签移动效果比较麻烦，不像QTabBar控件那样可以设置属性后就能移动，虽然在父类Container中提供了moveItem接口，但是要实现拖拽交换的视觉效果还是没那么容易。本demo使用QML的ListView来实现该功能，并动态切换对应的page内容。demo提供了动态添加页、删除页、移动交换标签位置功能。1.点击顶部“Add Panel”按钮，可以动态添加tab标签及对应的页面，名称相对应；2.按住标签左右拖拽可交换标签位置；

QML中有时候需要实现一些特殊定制化页面，比如不同的圆角矩形，如果直接用Rectangle控件定义radius圆角属性，会将四个角统一设置成一样的圆角，但是如果仅仅只想实现两个圆角效果，另外两个直角，或者圆角的弧度不同，这时候就不能直接用现有的Rectangle去做了，有两种方法， 一种是直接用Canvas进行绘制，一种是通过Shape组件来实现。两种方法均可，区别是前者稍微复杂一点，代码量会多一些，后者相对简单点，而且便于封装，多处使用。

应粉丝的请求，想做一个列表控件，点击item的时候右侧列表项动态切换，效果如下：他的设想是点击左边列表item的时候右边切换页面，这样做其实也可以，但是没必要搞这么复杂，直接就用两个列表来实现就可以了， 右边列表动态切换model就可以更新数据。抽半小时实现了一个简单样式。经常会收到一些粉丝的私信，我会尽量回复，有空的情况下可以帮忙一起解决问题，相互学习。...

前言使用Qt在开发桌面程序时，通常会去除默认的程序边框，从而实现自定义的标题栏。然而当设置窗口属性为Qt.FramelessWindowHint后，窗口的拖动，以及在边缘拖动缩放的功能就没有了，在以前的Qt版本中，就需要自己写很多繁琐代码来实现这些功能，尽管Qt为此也提供了一个类 QSizeGrip，但是它仅仅只能在窗口角落进行调整，在窗口上下左右边缘是不行的。庆幸的是，在Qt5.15中官方在QWindow中提供了两个新的方法：startSystemMove和startSystemResize。这些方法

前言QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。正文我们直接针

前言总所周知，Alt+F4是系统快捷键，可以直接强制关闭当前活动的应用程序，那么，如果我们的程序退出的时候有弹窗确认，而系统在捕获到Alt+F4快捷键也需要弹窗确认该怎么做呢，今天来解决这个问题。正文首先，我们知道Alt+F4快捷键是可以直接关闭应用程序，在Qt应用中，如果要在响应该快捷键的时候在应用程序中弹窗，有两种思路，一种是直接抓取该快捷键，一种是直接响应快捷键后的关闭函数。如果是QWidget项目，抓取Alt+F4快捷键，有两种方式：响应nativeEvent事件去捕获，另一种是通过wind

前言前面一篇文章介绍了KDDockWidgets的使用（文章在这里），其实主要目的就是为了用KDDockWidgets提供的Qt quick 下的窗口停靠功能。Qt原生部并没有提供Qt quick的dockwidget，也不知道为啥。其实窗口停靠功能其实是非常常见的，但是Qt只支持QWidget的。KDDockWidgets刚好可以解决这个问题，详细介绍在之前的文章已经介绍过了，其功能比QDockWidget更加丰富。那么，今天就来看一下如何用KDDockWidgets做自己的在qml 下的窗口停靠功

翻译自What about Qt 3D in Qt 6?原文作者：Sean Harmer在Qt 6中，我们希望可以在很多方面对Qt 3D进行改进，本文将着重介绍几个主要方向：渲染器工作缓存和现代图形API的支持，如Vulkan、Metal和DirectX 12。渲染器缓存Qt 3D的运行是基于两种现有的数据结构：Scene Graph-描述场景的内容；Frame Graph-描述渲染...

原文作者：Sean Harmer翻译：Richard Lin如您所知，Qt推出了名为Qt Quick 3D的全新模块，它基于QML API为Qt Quick增加了3D绘图能力（预计在Qt 6提供C++ API）。这对Qt 3D有什么影响，未来在Qt世界中它又该如何定位呢？希望本文以及后续文章可以解答这一问题，同时能深入介绍我们对Qt 3D正在进行的改进。本文将聚焦在Qt 5.x中即将发布的...

概述经过前面两篇文章的描述，我们知道了Felgo的大致应用，Felgo支持跨平台 windows、macos、Linux以及移动平台Android、IOS、Windows Phone和Windows Runtime的本地开发和部署，那么本篇栏看一下如何将Felgo应用程序部署到Android移动设备中。在上一篇文章【在这里】中介绍了安装Felgo的步骤，按照那种安装方式，装完过后默认只有win...

前言上一篇文章中介绍了Felgo的用途，大致知道了Felgo可以用来干些什么，在本篇中我们介绍下Felgo的安装，以及创建我们的第一个Felgo程序。软件下载首先我们在官网下载相应平台的安装包，下载地址在这里。如下：注意，在下载的时候会提示要先登录才行，可以使用Github账号登录，或者重新创建一个新的账号。ok，我们选择windows版进行下载，注意，这里下载的是在线安装包，只有十几...

考虑时间因素开发程序时，必须尽可能实现一致的60帧/秒刷新率。600帧/秒意味着每帧之间大约有16毫秒可以进行处理，其中包括将绘图基元上传到图形硬件所需的处理。那么，就需要注意以下几个重要的点：1.尽可能使用异步，事件驱动编程2.使用工作线程进行重要处理3.永远不要手动控制事件循环4.在阻塞函数中，每帧的花费不要超过几毫秒如果不这样做，那么将会发生调整，影响用户体验。注意：永远...

前言大多数开发者都希望创建一个可维护的应用程序，要达到该目的的方法之一就是将用户界面与业务逻辑分开，应用程序的 UI 应该用 QML 编写的几个原因如下：声明性语言非常适合定义 UIQML 代码编写很简单，因为它比 C++更简洁，并且不是强类型的。这也是使他成为原型的优秀语言。JavaScript 可以很容易地在 QML 中用于响应事件。作为一种强类型语言，C++最适合做应用程序的逻...

前言前一篇文章已经介绍了 QML 的基本类型，这里来介绍 QML 类型系统，包含了所有的在 QML 中可使用的类型。可以再 QML 中使用的类型包含以下几种：由 QML 语言提供的基本类型从 C++中注册成 QML 可用的类型由 QML 模块提供的类型无论类型定义来自何处，引擎都将对属性和这些类型的实例强制执行类型安全检查。基本类型QML 语言内置支持各种基本类型，包含整型，浮...

前言随着Qt版本的不断升级，现在用QML做移动开发越来越方便，并且代码也非常简洁容易理解，Android原生开发中的材料设计界面很普遍，很多软件都是走这个风格设计，并且随着Android开发很多开源代码不断的共享，使得用原生开发Android程序变得越来越简单并且还越来越漂亮，而QML中其实也有，只是没那么成熟，并且风格也没有Android原生开发的那么漂亮。正文今天要做的是关于QML的ListVi

我们一直致力于提高Qt的性能和优化其内存消耗。Qt 5.12的一个重点关注是在于减少QML引擎的内存消耗和优化JavaScript性能。与上一个长期支持版Qt 5.6 LTS相比，Qt 5.9 LTS总体性能已经发生了明显改善。这都在一篇博客中进行了总结，它在64-bit ARM基础上分析了Qt 5.9 LTS版本中的Qt Quick 性能提升。在Qt 5.12 LTS中，我们更深入研究了QML...

前言接前一篇文章，QML 性能优化建议(一)，这里接着来介绍性能优化建议的第二部分：通用接口元素，在这里会介绍一些常见的元素，如：图片、布局之类的写法。通用接口元素图片图片是任何用户界面的重要组成部分，但是由于加载图片所花费的时间以及内存占用问题，将会是影响性能的一个很大的因素。异步加载如果加载的图片非常大，那么在加载的时候要保证不会阻止UI线程。可以将QML Image元素的“异步”...

前言C++中的 list 和 map 使用非常方便， 对应到 Qt 中的类型为 QList 和 QMap，在和 QML 交互的时候，可能也想用到这两个类型，或者说将 C++中的参数和 QML 中的参数进行相互转换使用，在 QML 中用到的是 JavaScript 语法，那么，今天来看一下如何在 C++和 QML 之前来对这两个类型进行相互转换使用。正文先明确一点，要在 C++和 QML 中使...

前言开发Qt应用时，想把QImage发送到QML端通过Image组件显示出来，这种场景主要用在例如在C++端调用android系统接口截图然后发送到QML端显示，或者C++端QWidget截图然后让QML界面中显示。要想实现该功能，需要用到一个重要的类QQuickImageProvider，这是专门从C++端提供图片到QML显示的。正文先来看看Qt的示例首先定义一个类并继承...

概述用QML来做一个Android手机上的相册浏览软件，支持相册列表展示，相册中相片列表展示，以及点击相片过后可以进行浏览。类似于android手机的相册功能，还支持在浏览大图时进行两指缩放，左右切换浏览。正文本示例主要为了提供一个思路，使用Qt进行相片展示。目前代码还在完善中，还处于一个粗糙的demo，就不进行代码展示了。先来看一下实际的效果：打开软件后直接是相册列表展示：点击某...

前言QML 有许多基本类型，例如整型int或字符串类型string，这和 QML 对象类型形成对比，QML 对象类型是指具有属性、信号、方法等的对象，与对象类型不同的是，基本类型不能用于声明 QML 对象，例如不能声明 int{}对象或size{}对象。基本类型可用于定义：单个值（例如，int 表示单个数字，var 可以指单个项目列表）包含一组简单的属性值对（例如size 包含 wid...

前言众所周知，如果要在 QML使用 C++中定义的类型，有些数据类型是是可以直接使用的，如常见的 int，但是还有一些相对特殊的类型就需要做些特定的操作才可以使用了，那么，这里来看一下如何在 QML 中使用 C++中定义的枚举类型。正文1要将自定义枚举用作数据类型，必须注册其类，并且还必须使用Q_ENUM（）声明枚举，以将其注册到Qt的元对象系统。话不多说，直接上代码：首先我们定义一个...

前言

前言在 QML 中的 PathView 来实现一个 Cover Flow 图片切换效果，非常酷炫，并且代码也非常精简，先来看看效果图 源代码Rectangle { id:coverflow color:"black" property ListModel model property int itemCount: 5 PathView{ id......

前言用 QML 做图片倒影,主要是用ShaderEffect组件来实现,先来看看实际效果,如下: 还可以用同样的方式来做其他控件的倒影,例如: 正文直接来看源码import QtQuick 2.0import QtQuick.Controls 1.4Rectangle { id: window width: 600 height: 500 gradient: Gra

前言用 QML 来实现一个呼吸动画效果的字体，非常酷炫，主要使用 Glow 组件来实现，然后通过控制透明度的改变来实现想要的效果，代码非常简单。正文先来看看效果 源码：Item { Rectangle { anchors.fill: parent color: "black" } Text { id: text a

要在QWidget中加载QML页面首先要用到一个很重要的类QQuickWidget示例：m_pQuickWidget = new QQuickWidget(this); m_pQuickWidget->setFixedSize(1131,586); m_pQuickWidget->setAttribute(Qt::WA_AlwaysStackOnTop); m_pQuickW

前言之所以写这篇文章，是因为在项目中经常会碰到一个问题，qml 文件该如何加载到工程中，其实 Qt Quick APP 有两种模式，另外，还有一种场景是，在 QWidget 界面上加载 QML 页面，这三种情况的使用方式都不太一样，这里总结一下。正文QQmlApplicationEngined搭配 Window示例：#include <QGuiApplication>#include <QQmlA

额…什么都不说了,直接看代码吧Item{ id:item anchors.fill: parent Camera { id: camera focus { focusMode: Camera.FocusAuto; focusPointMode