龚建波

基本效果：上浮逐渐显示，短暂停留后上浮逐渐消失

QML自带的GridView只能定义delegate，没有section，类似手机相册带时间分组标签的样式就没法做。但是ListView是支持section的，可以自定义分组样式，所以可以通过ListView来实现带section的GridView。当然，你也可以直接修改GridView的C++源码给他加上section。

根据QQuickImageProvider 的文档说明，该类其实是支持在独立线程中异步加载的，但是 Async 类提供了专用于异步加载的接口，操作起来也不复杂，对于大文件或者网络文件，都可以采用异步方式加载图片。

QML 中虽然也提供了 FileDialog 组件，但是使用体验远不如 QtWidgets 中的 QFileDialog，故做了简单的封装，使得可以在 QML 中使用QFileDialog 来选择文件或者文件夹。因为文档提示不应直接在 QML 逻辑中启用自己的事件循环，所以我是通过信号槽来弹出和传递返回结果，操作流程和 QML 的 FileDialog 类似。

QML 中使用 Image 来加载图片，有三种加载方式：从 Qt 资源系统加载；文件加载；由 ImageProvider 提供数据。通过 ImageProvider，我们可以将内存中的图像由 QML Image 呈现。当然，如果单纯是想渲染内存中的图像数据，也可以直接用 QQuickItem 或者 QQuickPaintedItem 等。

QML 中提供了DropArea 类型来处理拖放，使用containsDrag 属性判断是否有拖拽动作，使用 dropped(DragEvent drop) 信号处理拖拽的释放动作，此信号带一个DragEvent 参数，可以从中获取拖放的内容。如果拖放的是文件，可以通过DragEvent 的 urls 属性取文件路径列表，再将路径设置给 Image source。

Qt5 QML Controls1.4中的 TreeView 存在诸多问题，比如节点连接的虚线不好实现，currentIndex 的设置和 changed 信号的触发等。我想主要的原因在于 TreeView 是派生自 BasicTableView，而 TableView 内部又是由 ListView 实现的。

C++可以通过QMetaObject::invokeMethod或者信号槽调用QML中定义的函数，需要先通过engine查找到这个QML对象，或者传递QML对象给C++。QML可以调用C++对象的信号槽或者Q_INVOKABLE注册过的函数。C++使用QJSValue类型接收QML中的函数参数，再调用QJSValue::call执行这个JS函数。如果是C++函数作为QML的回调函数就比较简单了，Q_INVOKABLE注册过的函数可以在QML中直接调用，和QML中定义的JS函数使用方式一致。

当多个 View 展示同一个数据集中的部分数据项时，其中一个 View 进行了增删改操作，也需要同步到其他的 View。有两种比较简单的解决方案：方案一：共用一个 Model 实例，通过 Proxy 来辅助完成过滤和选择等操作。方案二：多个Model 持有同一组数据项指针（建议用智能指针），更新之后通知所有关联的 View 进行同步刷新。...............

0.前言Qt Creator 中提供了两个 QML 和 OpenGL 混合使用的示例。示例 "fbo" 是在帧缓冲对象（FBO）上渲染小部件，可以和已有的 QML Item 混合使用；示例 "opengl under qml" 是在 QML Item 渲染之前或之后绘制自定义的 OpenGL 内容，是对整个 Window 操作，和 QML Item 一起用比较麻烦，不是处于最底层就是浮在表面。在 Qt Creator 搜索 opengl under qml，或者源码示例中查找Qt 安装后示例

Qt6.3 终于新增了一个 TreeView，之前 Controls1 中的 TreeView 废弃后，一直没出新的 TreeView 组件。先不说这个新的 TreeView 是继承自 TableView 的，光是看只有几百行源码，就感觉又是个半成品。此外，还附带提供了一个 TreeViewDelegate 默认的 delegate 实现。TreeView 文档：https://doc.qt.io/qt-6/qml-qtquick-treeview.htmlTreeView 继承自 TableVie

Qt6 把 Qt5 labs 中的日历组件放到了 Controls2 里，和 Qt5 Controls1 中的 Calendar 组件不同，新的日历由三个部件组成：MonthGrid 展示月内日期、DayOfWeekRow 展示星期几、WeekNumberColumn 展示第几周。因为文档示例过于简单，所以还需要借鉴源码中的默认实现。MonthGrid 日期表格，主要是定义 delegate 单元格样式，文档提供了 delegate 中可以访问的 model role：（model.day 表示日期，m

才发现 Qt 文档中 Shapes 模块的三种渐变没有参考代码，只在官方示例里有。其中的 LinearGradient 的使用还有点区别，得指定起止点位置才有渐变效果，我想是因为 ShapePath 自身是没有宽高属性的，所以没有默认的起止点；并且其渐变方向也是根据起止点来确定的。效果和代码如下：//Circle.qml 定义一个圆形的shape组件import QtQuick 2.12import QtQuick.Shapes 1.12//两个圆弧组成的圆Shape { i

Qt Quick 没有像 QtWidgets 那样的 QSS 样式表机制，只能通过自定义组件或者设置 Controls 主题来实现样式定制。目前网上搜到的换肤功能，大多是定义一个全局的样式文件，在自定义组件中绑定全局样式属性，切换主题时更换全局属性的值。详情可参考 TaoQuick 中的换肤：Qml组件化编程3-动态切换皮肤 - 知乎//Skin.qml 单例pragma Singletonimport QtQuick 2.12QtObject { property string the

Qt5 中本身提供了扇形菜单 PieMenu，属于 QtQuick.Extras 模块，这个模块是拓展自 QtQuick.Control1 的，QtQuick.Control1 在 Qt5 高版本被废弃，并在 Qt6 移除。不过我们也可以用 QtQuick.Control2 的组件自定义样式来实现环形或扇形的菜单和选择框。主要思路就是使用 PathView 来替换默认的 ListView，再改下弹框的背景样式。ItemDelegate 需要设置给 ComboBox 或者 Menu，而不是 Vie

前言在一个带圆角的 Rectangle 上放置一个 MouseArea，当点击圆角外区域时，依旧能触发点击事件。用 OpacityMask 遮罩裁出来的图形也一样。Rectangle { width: 100 height: width radius: width / 2 color: "green" MouseArea { anchors.fill: parent onClicked: console.log('click'

QMLCanvas绘制进度条（环形和波浪水球）

接上回的样式（一）：https://blog.youkuaiyun.com/gongjianbo1992/article/details/112748866新增了两种 Loading 样式。效果如下：代码链接（CustomLoading3 / 4）：https://github.com/gongjianbo/QmlComponentStyle实现代码：import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Shapes 1..

QtWidgets 的 QLineEdit 输入框可以设置 QCompleter 来实现自动补全，用法如下： QStringList words; words<<"123456"<<"234567"<<"345678"<<"456789"; QCompleter *completer = new QCompleter(words, this); //默认从头开始匹配，MatchContains设置为任意位置匹配 c

在做文件保存提示框需求时，发现很多地方都会判断文件是否保存，未保存时就需要弹框提示，但是操作完又需要根据调用时的情况做后续处理。保存要提示，保存方式覆盖还是另存要提示，另存命名要编辑，命名后有重命名检测，以此等等，所以我叫他任务链，要根据当前任务上下文来做不同的操作。一开始我就在对话框中放一个枚举变量，弹出时设置对应的值，操作结束后根据这个枚举做后续操作。如下： Connections{ target: warn_save onAccepted: {

前言以 Windows 网络设置里的 IP 地址输入框为参照，先看看他提供了哪些功能输入数值范围不满足 0-255 ，或者该段的规定值，会弹错误提示框；字符满三个后自动跳转到下一个 IP 段，或者按小数点也会进入下一段；删除键删除完本段后再按删除自动去上一段进行删除 ；按左右键如果光标在该段文本末尾或打头，光标自动进入相邻段；如果选中了某个段的文本，则复制的是选中的文本，否则复制完整 IP 地址；粘贴时如果是完整 IP 地址就覆盖每一项，如果是单个段数字则只覆盖当.

上一节学习了画线，通过设置顶点参数也可以绘制任意几何图元，这一节学习纹理的基本操作。回顾下基本知识，一个几何节点 Node 由顶点 Geometry 和材质 Material 组成；QQuickItem 如果是可视类型需要设置 "setFlag(ItemHasContents, true);"；Geometry、Material 及其他更新后单独设置 dirty 标志，这样在刷新时判断对应的 dirty 标志可以减少不必要的操作。.........

使用 C++ 自定义 QML 可视组件有多种方式：自定义 render，使用 QSG 开头的场景图类，使用 QPainter 配合QQuickPaintedItem绘制（就像 QWidget paintEvent 那样）等等。QSG 库的封装思路和大部分 3D 库/引擎的封装差不多。像一个可视节点QSGGeometryNode 需要包含 geometry 顶点和 material 材质两部分，类似于其他架构中的entity、mesh、material。...

0.前言对于 ShaderEffect 的介绍请看 Qt 文档：https://doc.qt.io/qt-5/qml-qtquick-shadereffect.html之前用QtGraphicalEffects 模块的镜像渐变做过波纹效果，但是那个GradientStop 不能放到 Repeator 里，要根据参数动态设置波纹大小就需要 createComponent 之类的。最近用 ShaderEffect 又重新实现了下波纹效果。感觉最麻烦的就是抗锯齿，最终效果勉强，不过没 QtGraphi..

（Qt 的 按键输入都是在应用激活时才能触发的，所以要注册系统全局快捷键请用系统 API）0.前言一般情况下，一个按键事件的流程是这样的：Qt接收按键动作并生成一个按键事件 KeyEvent 如果 QQuickWindow 是 active 的，则将按键事件传递给它 按键事件由 scene 传递到 activeFocus 的 Item，如果没有 activeFocus Item，则事件被忽略 如果按键事件被接受，即 accepted=true，则传递结束，否则将一直往父节点传递，知道根.

不同类型的消息我用了不同的delegate，因为要动态选择delegate又使用了Loader进行加载。为了在Loader的sourceComponent里像一般的ListViewdelegate那样访问model数据，需要把Component声明到Loader里。虽然思路很简单，但是实现时遇到不少QML的Bug，比如滚动时图片闪烁、拉伸时位置/宽度绑定错误（所以我放弃了Layout）等，可能在别的版本还会有其他QML渲染上的Bug。不过这样也只能选中一个Label里的文本，不能全选。...

绘制圆后对该圆路径clip会有一圈虚线，绘制前后加上save、restore解决了；小球的实现思路比较简单，就是填充一个带正弦路径的区域，然后clip截取出圆球部分。clip对抗锯齿有一点影响，可以计算下水球圆弧的起止角度直接绘制圆弧；要对文本差异性着色在有多个波浪时比较麻烦，待完成。阴影等特效很占资源不建议使用；......

问题根据 QML Item 类型 clip 属性的文档：https://doc.qt.io/qt-5/qml-qtquick-item.html#clip-prophttps://doc.qt.io/qt-5/qtquick-visualcanvas-scenegraph-renderer.html#clipping可以看到，他描述的是根据 Item 的矩形边框剪切，没有对圆角或其他异形进行处理。实测默认效果： Rectangle{ anchors.c

ToolTip是一个较为常用的组件，一般有两种使用方式，直接创建组件或者用附加属性： Text{ text: "..." anchors.centerIn: parent //附加属性的方式 ToolTip.text: "..." ToolTip.visible: mouse.containsMouse //直接创建组件

0.前言FontAwesome是一套可免费使用的字体图标库，可通过如下链接获取对应的字库文件。官网介绍：官网：https://fontawesome.com/中文网（含v4下载）：http://www.fontawesome.com.cn/新版下载：https://fontawesome.com/downloadGitHub：https://github.com/FortAwesome/Font-Awesome如果下载的第四版，那么可以用fontawesome-webfont..

QML 自带的 BusyIndicator 自定义效果不大理响，所以自己做了一些 Loading 样式。（新增了两种样式：https://gongjianbo1992.blog.youkuaiyun.com/article/details/122824084）本文效果如下：代码链接（CustomLoading1/ 2）：https://github.com/gongjianbo/QmlComponentStyle实现代码：import QtQuick 2.12import QtQuick..

日期范围选择只需要组合几个组件就行了，着实很简单，这里只是水一篇。有两个要注意的地方，弹框的 closePolicy 可以设置为 Popup.CloseOnPressOutsideParent|Popup.CloseOnReleaseOutsideParent|Popup.CloseOnEscape，这样点击弹框关联的编辑框的时候弹框也消失了；另一点就是 js Date 对象是个引用类型，所以每次使用我都 new 一个，避免重复使用被影响。实现效果：（日历弹框暂时用的 Control1 的日历...

当列表数据项较多的时候，会有分页展示的需求，可能需要展示数据总数、每页显示数、总页数、当前页数等。因为数据可能是通过网络分页请求得到，或者本地数据会刷新，那么这些信息就得通过外部设置，组件只负责请求和展示页码信息就行了。点击某一页之后先预设置为该页按钮高亮，待数据返回后根据参数重新设置。主要难点就在页码按钮数值的计算、显示隐藏上了，剩下的样式就根据需求调整。效果展示：主要实现代码：（github链接：https://github.com/gongjianbo/MyTestCode/t

0.前言Qt 的multimedia 多媒体模块提供了一些基本的音视频接口，虽然不带编解码器，不过对于录音来说，能处理 PCM 数据就够了。实现中，使用 QAudioDeviceInfo 获取输入输出设备信息，使用 QAudioInput 获取音频输入数据，使用QAudioOutput 播放音频数据。本文代码效果及仓库链接如下：github 链接（SimpleAudioRecorder 类）：https://github.com/gongjianbo/QmlAudioView1...

0.前言在一些 QML 代码中，可以看到 createComponent 或者createObject 这样的函数被调用，这就是动态创建 QML 对象的接口。QML 支持从 JavaScript 内部动态创建对象，这对于延迟对象的实例化很有用，缩短了应用程序的启动时间。它还允许根据用户输入或其他事件动态创建可视对象并将其添加到场景中。本文主要参考自官方文档：参考文档：https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.h.

QML 的 ListView 本身有 move 过渡（Transition）属性，可以用来做一些交换动画效果。其中 move 为当前项的过渡，moveDisplaced 为被交换项的过渡。鼠标拖拽可以用一个 MouseArea 来实现，当鼠标滑动到相邻行后就调用 model 的 move 接口，这样就会触发 view 的 move 过渡动画。效果如下：感觉有点生硬，勉强能用。完整代码如下：import QtQuick 2.12import QtQuick.Window 2.12//演

1.前言QML 自定义窗口目前看到的主要有两种方式，一种是纯 QML 实现，使用 MouseArea 来处理鼠标相关事件；另一种是事件过滤，用系统本地 API 进行操作。前两天看了涛哥的自定义窗口（https://github.com/jaredtao/TaoQuick），是继承 QQuickWindow + 本地 API 的方式实现的。我本来也想借鉴下，但是发现 QML 的 Window 在 Qt5 后面的版本改为了 QQuickWindow 的子类QQuickWindowQmlImpl ，还是个没.

1.需求对话框大小适应内容区域文本，也不排除会放入其他组件；按钮区域肯定需要一定的自定义，比如显示隐藏哪些按钮。2.实现大小的适应，我让根组件的高度绑定内容的高度来适应；内容区域的组件切换，我放了一个Loader{}进行动态加载，且初始为一个Text显示文本信息；按钮区域我只放了一个Row{}排列按钮组，通过枚举来控制显示隐藏，暂时没扩展按钮的接口，全都是预先定义好的；此外还做了按钮焦点切换，弹出居.

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

（相信不少人都会用 ECharts 这个网页图表库，我这里也只是学 WebEngine 顺带做个笔记）我的环境：Qt5.15.1 MSVC 32bit，不同的版本可能 webengine 的初始化有所不同，以官方文档为准。本文完整项目链接：https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlWebEngineECharts0.下载ECharts下载地址：https://echarts.apache.org/zh/downlo