本专栏是一个 QML (Qt Quick) 演示工程合集包括了基础组件、动画、布局、图表、粒子系统等各个方面。后面计划进行版本迭代修复一些bug统一视觉效果新增一些未补充的类型。Qt 官方的 QML 资料比较单薄初学时容易摸不着方向。从 2025 年起我利用业余时间借助 DeepSeek 生成演示代码再手动调试修 bug一路积累到现在这个规模——可以说我就是在修 bug 的过程中学会 QML 的。每个示例的代码量都很小通常 50~200 行专注于演示一个知识点。没有复杂的项目结构干扰适合从布局 基础示例开始按分类逐步深入。最低 Qt 版本6.5已验证环境Win11 Qt 6.8 / Qt 6.11注意Qt 6 程序无法在 Win7 上运行QML Demo Launcher示例管理器做 QML 开发的人时间一长手里难免攒下一大堆零散的小示例动画的、控件的、布局的、图表的……每个都是独立的文件夹独立的 CMakeLists.txt独立的构建产物。问题是找起来费劲—— 想看一个滑块效果得在几十个qml_*文件夹里挨个翻。跑起来麻烦—— 每次都要在 Qt Creator 里切换构建目标或者手动找到 build 目录去双击 exe。没有全貌—— 到底有哪些示例哪些看过、哪些没看过完全靠记忆。所以我做了一个QML Demo Launcher—— 一个带界面的管理器把所有子 Demo 按类别组织起来点击卡片直接启动。粒子系统示例目录qml_particlesystem/粒子系统Particle System是 QML 中用于模拟大量相似元素火焰、烟雾、雪花、星河等的高效方案。下面按「核心概念 → 发射形状 → 运动方向 → 随机性 → 影响器 → 尾迹 → 综合」的顺序组织方便由浅入深地查阅。基本概念示例说明系统概述展示 ParticleSystem、Emitter、ImageParticle 三者的协作骨架系统控制生命周期管理支持 start / stop / pause / resume / reset发射器方法Emitter 的两种瞬时发射burst()一次性发射、pulse()持续发射指定时长渲染器对比ImageParticle 走图像渲染ItemParticle 走 QML 组件渲染各有性能与灵活性取舍ItemParticle 方法take()获取粒子控制权、give()归还、freeze()冻结粒子状态ImageParticle 属性粒子图像的颜色、透明度、旋转等视觉属性配置粒子组管理ParticleGroup 定义粒子状态与生命周期支持状态间自动转换发射区域控制粒子从什么形状的区域里喷出示例说明矩形区域RectangleShape 在矩形范围内随机发射椭圆区域EllipseShape 在椭圆范围内发射适合圆形特效线性区域LineShape 沿直线发射形成线状粒子流图像遮罩MaskShape 按图像灰度决定发射密度实现任意形状移动发射区域发射区域随时间移动产生动态粒子轨迹扩散方向决定粒子飞出去的角度与轨迹示例说明水平扩散AngleDirection 通过角度与扩散角控制发射方向抛物线轨迹PointDirection 设置 x/y 分量速度形成抛物线运动锥形扩散PointDirection 配合角度变化形成锥形扩散目标扩散TargetDirection 让粒子朝目标点或目标 Item 发射组合方向CumulativeDirection 叠加多个方向产生复杂轨迹粒子随机性让每一颗粒子都不太一样画面更自然示例说明大小随机性sizeVariation 控制粒子尺寸变化范围生命周期随机性lifeSpanVariation 控制存活时间变化颜色随机性colorVariation 控制颜色偏移程度位置随机性发射点位置随机偏移增加分布自然感角度随机性angleVariation 控制发射角度变化范围速度随机性magnitudeVariation 控制发射速度变化范围粒子影响器在粒子飞行途中施加力或改变状态示例说明Age 控制提前终止生命周期用于强制消亡或状态转换Attractor 吸引器将粒子吸引到指定点支持多种衰减模式Friction 摩擦力施加阻力使粒子逐渐减速直至停止Gravity 重力添加恒定方向的力模拟下落或飘升Wander 随机游走让粒子随机漂移增加运动自然感Turbulence 湍流基于噪声图像产生流体扰动效果尾迹发射器示例说明运动轨迹示例TrailEmitter 跟随粒子发射新粒子形成拖尾扩散粒子示例TrailEmitter 发射扩散粒子增强轨迹视觉表现综合示例把前面的能力组合起来做完整效果示例说明粒子组切换运行时动态切换发射的粒子组展示组间状态管理雪花飘落模拟自然飘落综合运用方向与随机性爆炸效果burst 配合重力与摩擦实现爆炸动画银河背景多层旋转粒子构成星系旋臂烟花效果分段发射配合颜色渐变模拟绽放与消散基础组件qml_hello/ - Hello World 入门最简单的 QML 程序展示 Hello World 文字动画文字从顶部弹跳落下同时颜色从白色渐变为深色。适合 QML 初学者了解基本的动画和属性绑定。qml_signals/ - 信号交互示例说明QML 直接绑定最基础且性能最优的交互方式适用于对象内部或具有明确父子层级关系的组件JavaScript 动态连接适用于逻辑较为复杂、需要在运行时根据条件建立或切换信号连接的场景QML 跨文件信号槽通信实现组件化设计的关键通过中立的父组件作为调度员来连接两个独立的子组件C 信号发送给 QML前后端分离架构中的基本做法利用Connections元素监听后端业务状态qml_layout/ - 布局管理展示 QML 中主要的布局方式Row RowLayout、Column ColumnLayout、Grid GridLayout、StackLayout、Flow让用户能够直观地对比它们的布局效果和差异。qml_container/ - 容器组件展示 QML 中主要的容器组件Pane、Frame、GroupBox、ScrollView、Page。所有容器以卡片形式展示方便直观对比外观和功能差异。qml_repeater/ - Repeater 中模型的 5 种定义方式展示 Repeater 组件的 5 种模型定义方式示例说明StringList 模型使用字符串列表作为数据源ListModel 模型使用 QML ListModel 组件JS 数组模型使用 JavaScript 数组C 模型使用自定义 C 数据模型整数模型使用整数作为重复次数qml_loader/ - 加载器示例说明从文件加载组件通过 source 属性加载外部 QML 文件加载 Component 组件通过 sourceComponent 属性加载内联定义的 Component加载状态监控监控 Loader 的 status 变化处理加载成功、失败等状态动态标签页模拟多页面切换动态加载不同页面内容动态创建控件使用 Qt.createComponent 和 createObject 在运行时创建多个子控件延迟加载配合 Timer 和 BusyIndicator 实现延迟加载效果切换组件通过 Switch 在两个 Component 之间切换属性传递通过输入文字和选择颜色动态修改 Loader 加载的组件属性qml_windowflags/ - 窗口标志展示 8 种不同类型的窗口标志效果通过主界面的按钮可以打开对应的演示窗口。用户界面组件qml_button_collection/ - 按钮组件合集包含 10 个示例示例说明普通按钮Button支持文本、图标显示具有正常、悬停、按下、禁用等多种状态工具按钮ToolButton专为工具栏设计通常只显示图标支持弹出菜单功能圆形按钮RoundButton具有圆形外观常用于需要突出显示的快捷操作延迟按钮DelayButton需要长按一段时间后才会触发常用于需要用户确认的重要操作开关Switch模拟物理开关适用于布尔状态切换如 Wi-Fi、蓝牙等设置复选框CheckBox用于多选场景支持父子节点关联可通过 ButtonGroup 管理状态单选按钮RadioButton用于单选场景同一组内的选项互斥标签按钮TabButton通常在 TabBar 中使用作为选项标签委托按钮ItemDelegate通常在滚动视图的委托组件中使用自定义按钮CustomButton定制按钮样式能够设置文本、描述以及背景色定制了点击效果qml_textfield/ - 文本输入框示例说明TextField 基础示例基础示例、输入限制TextField 校验年龄校验、邮箱格式校验、手机号校验、掩码与日期校验TextField 样式自定义文本框、带图标的文本框、带删除的文本框、主题切换TextField 应用动态关联、表单提交2025-11-25 优化优化整体结构新增导航标签方便查看所有示例2025-12-07 新增IP 地址验证器支持 IPv4 和 IPv6 地址格式验证身份证号验证器支持中国大陆身份证号格式验证qml_textarea/ - 多行文本区域演示多行文本输入组件包含 TextArea 基础用法、样式以及应用。2025-11-23 优化优化整体结构新增导航标签方便查看所有示例优化【基本示例】新增文本边框防止界面在没有光标输入时一片空白优化【富文本】增加上下对照展示 PlainText 与 RichText 的差异优化【Markdown 编辑器】展示文本与 Markdown 对照解决滚动同步失败的 bug新增【保持滚动】使用场景较多可以滚动展示输出日志qml_progressbar/ - 进度条示例说明基础进度条展示 ProgressBar 最基本的使用方式动画效果进度条进度值变化时带有平滑动画效果支持自定义背景和内容项自定义样式进度条完全自定义的进度条带有百分比显示使用 Rectangle 绘制、百分比颜色自动变化Material 风格进度条基于 Material 设计风格支持不确定模式、自定义高度和颜色带遮罩动画的进度条带遮罩动画的自定义进度条支持不确定模式、带有流动效果的遮罩环形进度条基于 Shape 实现支持不确定模式、显示具体的进度百分比qml_slider/ - 滑块组件示例说明基础滑块展示 Slider 最基本的使用方式包括水平/垂直方向切换和当前值显示自定义样式 1自定义手柄样式创建带有双层圆形设计的滑块自定义样式 2带有刻度标记和数值标签的滑块实现支持自动对齐到刻度值自定义样式 3带有进度显示和颜色变化的自定义滑块音量控制滑块实现了一个现代化的音频音量控制滑块带有静音切换功能视频进度控制滑块实现了一个功能完整的视频进度条带有播放控制功能qml_dial/ - 旋钮组件展示不同风格、功能和交互方式的 Dial 组件实现。Dial 是 QML 中的圆形旋钮控件常用于音量控制、亮度调节、参数设置等场景。qml_tumbler/ - 滚轮选择器示例说明基础 Tumbler展示 Tumbler 最基本的使用方式用于时间选择Tumbler 样式 1自定义样式当前选中项为红色透明度随位移变化Tumbler 样式 2带绿色高亮背景的滚筒用于尺寸选择Tumbler 样式 3深色主题带 3D 旋转和缩放效果的滚筒日期选择器 1简单的日期选择包含月份、日期和年份日期选择器 2高级日期选择器根据年月动态更新天数颜色选择器每个选项显示不同颜色的滚筒2026-04-24 补充 —— 水平滚动选择器qml_spinbox/ - 数字输入框示例说明基础 SpinBox 示例展示 SpinBox 最基本的使用方式支持直接编辑输入自定义步长 SpinBox支持通过下拉框改变步长适合角度等数值输入自定义 SpinBox缩放完全自定义外观包括圆角、阴影、动画效果在数值增加/减少时支持数值缩放效果自定义 SpinBox滚动基于缩放示例之上变更了数值组件与动画效果支持数值滚动效果自定义 SpinBox(1)简约风格使用矩形实现加减号支持焦点状态显示自定义 SpinBox(2)Material 设计风格带有涟漪效果和 Material 设计元素qml_combobox/ - 下拉选择框示例说明基础用法展示 ComboBox 最基本的字符串列表展示功能ListModel 动态模型使用 ListModel 作为数据源实现更结构化的数据展示自定义样式通过重写背景、内容项、指示器等元素创建完全自定义的外观样式系统展示 Material Design 风格的 ComboBox可编辑模式支持用户输入和自定义选项添加动态更新实时更新 ComboBox 的数据源响应用户的交互操作分组 ComboBox实现带有分组标题的下拉列表提升选项的可读性多列 ComboBox在一个下拉项中展示多个数据字段适用于信息密集的场景大型列表针对包含数千个选项的大型数据集进行加载性能优化自定义显示文本灵活控制 ComboBox 的显示内容支持格式化输出部分选项禁用实现部分选项不可选择的功能qml_busyindicator/ - 加载指示器示例说明BusyIndicator 状态控制通过按钮切换运行状态展示最基本的控制方式自定义样式 - 旋转圆环基于 Rectangle 和 RotationAnimation 的简单实现自定义样式 - 动态弧线利用 Shape 和 PathAngleArc 的高级动画效果来自 Qt 官方示例自定义样式 - 现代简约使用 BusyIndicatorImpl 的简单实现qml_tooltip/ - 工具提示演示工具提示的使用包括自定义提示内容。列表和表格组件qml_listview/ - 列表视图示例说明ListView 样式头像、状态徽标、section 分组标题ListView 数据交互输入框 按钮驱动 ListModel 增删可拖拽列表按住拖动列表项完成重新排序C 模型联系人列表C 后端模型 搜索过滤 增删改ProxyModel 大数据列表10 万条随机数据 实时关键词过滤qml_tableview/ - 表格视图示例说明基础表格使用TableModel展示静态数据自定义样式表格自定义表头、交替行颜色、悬停高亮和行选中效果可排序表格点击表头列可按升序/降序排序支持数值与字符串两种排序方式可编辑表格点击单元格原位弹出输入框支持编辑价格和库存字段SQLite 表格增删改查对接QSqlTableModel实现完整的数据库增删改查操作qml_treeview/ - 树形视图演示树形结构的数据展示包括展开/折叠功能。qml_delegatechoice/ - 委托选择演示如何根据数据选择不同的委托用于条件性显示不同组件。qml_itemdelegate/ - 项目委托展示 QML ItemDelegate 组件的多种实现方式示例说明ItemDelegate基础列表项委托支持点击选中CheckDelegate带复选框的列表项委托RadioDelegate带单选按钮的列表项委托SwitchDelegate带开关的列表项委托SwipeDelegate (left/right)支持左右滑动的列表项委托SwipeDelegate (behind)支持背景滑动的列表项委托TreeViewDelegate树形视图的委托组件导航和布局组件qml_drawer/ - 侧滑面板QML Drawer 是一种侧边滑动面板组件常用于显示导航菜单、设置选项或临时功能面板。包括左侧导航抽屉、右侧设置面板、顶部消息通知和底部功能面板等。qml_tabbar/ - 标签页示例说明TabBar 基础用法展示 TabBar 最基本的用法点击切换显示当前索引TabBar 位置使用 Page 容器的 header/footer 设置 TabBar 位置TabBar 与 StackLayout标准的标签页实现点击标签切换内容页自定义 TabButton自定义按钮样式圆角背景 颜色过渡动画动态添加/删除标签页运行时动态增删标签模拟浏览器标签效果TabBar 与 SwipeView双向绑定支持点击和滑动两种切换方式qml_stackview/ - 堆栈视图示例说明基本操作展示 StackView 最核心的 Push、Pop、Replace 操作批量操作批量 Push 多个页面、批量 Pop、清空栈等高级操作Push 对象演示 Item、Component、URL 三种不同的页面加载方式TabBar 联动TabBar 与 StackView 配合实现标签页导航过渡效果自定义页面切换的淡入淡出动画效果来自 Qt 官方示例堆叠效果多层页面的视觉堆叠展示带有偏移和透明度效果来自 Qt 官方示例qml_swipeview/ - 滑动视图示例说明SwipeView 与指示器基础的 SwipeView 用法配合 PageIndicator 显示当前页面位置自定义指示器自定义 PageIndicator 的样式添加数字标签和点击跳转功能SwipeView 与 TabBarTabBar 与 SwipeView 双向绑定点击标签或滑动页面均可切换SwipeView 与 Loader使用 Loader 延迟加载页面内容配合日志展示生命周期图片浏览器完整的图片浏览器应用支持自动轮播、手动切换和指示器导航qml_page/ - 页面组件示例说明Page 基础用法展示 header 和 footer 的基本配置Page 与 SwipeView 联动滑动切换页面配合 PageIndicatorPage 与 StackLayout 结合按钮切换页面内容Page 嵌套结构外层 Page 嵌套内层 Pageqml_navigation_layout/ - 导航布局示例说明侧边导航栏左侧固定导航 右侧内容区适合桌面应用抽屉式导航点击按钮展开侧边菜单适合移动端或空间受限场景顶部导航栏StackView 实现页面切换动画适合向导式流程底部导航栏图标文字的底部 Tab适合移动应用主导航qml_scrollbar/ - 滚动条示例说明ListView 滚动条内置完善的滚动条支持适合展示大量同质化的列表数据ScrollView 容器自动处理内容测量和滚动条管理是最简单的滚动解决方案Flickable 滚动条支持触摸滚动、弹性边界和惯性滑动特别适合移动设备ScrollIndicator 指示器轻量级的滚动位置指示器常与 Flickable 搭配使用自定义 ScrollBar自定义滚动条的背景、滑块等外观属性Rectangle 滚动条使用 Rectangle 和 ScrollBar 实现滚动功能展示基本工作原理来自 Qt 官方qml_splitview/ - 分割视图示例说明基础分割视图2 分视图支持水平和垂直方向切换自定义手柄渐变色手柄带有中心指示器嵌套分割视图3 分视图支持嵌套滑动状态持久化保存和恢复分割视图布局状态qml_flickable_flipable/ - 轻弹和翻转示例说明Flickable 基础用法展示 Flickable 最基本的滚动列表功能Flickable 边界行为对比两种边界模式的视觉效果Flipable 翻转卡片扑克牌正反面翻转动画Flipable 登录设置登录界面与设置面板的翻转切换动画和效果qml_animation/ - 动画系统示例说明属性动画使用 PropertyAnimation 直接作用于元素的 x 属性预定义动画使用 NumberAnimation 实现旋转动画行为动画Behavior 自动为属性变化添加弹性动画动画控制演示动画的启动、暂停、恢复、停止、重启操作顺序动画SequentialAnimation 按顺序依次执行三个旋转动画并行动画ParallelAnimation 同时执行三个旋转动画qml_state/ - 状态管理示例说明状态切换通过按钮在两个状态之间切换展示 State 的基本用法多属性更改一个状态同时修改两个矩形的颜色和圆角When 条件状态复选框选中时自动激活状态取消时自动恢复状态扩展扩展状态继承基础状态的属性实现状态复用qml_animatedsprite/ - 动画精灵示例说明AnimatedSprite 基础用法使用精灵图Sprite Sheet实现循环播放动画Image Timer 实现帧动画使用独立图片文件通过 Timer 定时切换实现动画Image Timer 多动画切换通过下拉框动态切换攻击、行走、奔跑等不同动画AnimatedSprite 单次播放播放一次动画后自动停止适合技能特效等场景qml_graphical_effects/ - 图形效果整合了 Qt 官方示例示例说明色阶调整LevelAdjust 效果通过滑块实时调整 Gamma X/Y/Z 参数伽马调整GammaAdjust 效果通过滑块控制伽马值调整整体亮度曲线置换效果Displace 效果通过置换贴图对图像进行扭曲变形遮罩效果OpacityMask不透明度遮罩和 ThresholdMask阈值遮罩模糊效果7 种模糊效果 —— DirectionalBlur、GaussianBlur、FastBlur、RecursiveBlur、MaskedBlur、RadialBlur、ZoomBlur阴影效果DropShadow投影阴影和 InnerShadow内阴影发光矩形RectangularGlow 为矩形添加发光效果发光效果Glow 为图像添加发光效果亮度对比度BrightnessContrast 效果实时调整亮度和对比度颜色效果Colorize、HueSaturation、ColorOverlay、Desaturate 四种颜色调整效果渐变效果RadialGradient、ConicalGradient、LinearGradient 四种渐变效果混合效果Blend 效果混合两张图像支持 22 种混合模式qml_blur/ - 模糊效果示例说明FastBlur 背景模糊使用 FastBlur 对背景图片进行快速模糊处理Layer 模糊效果通过 layer.enabled 和 layer.effect 组合实现模糊GaussianBlur 高斯模糊高质量高斯模糊支持采样数控制矩形区域模糊局部区域模糊实现类似毛玻璃的效果图像和媒体qml_image/ - 图像组件示例说明图片缩放通过 Slider 控制图片的缩放比例图片平移鼠标拖拽实现图片平移效果图片旋转通过 Slider 控制图片旋转角度网络图片加载异步加载网络图片显示加载状态图片填充模式演示六种不同的 fillMode 效果图片镜像水平和垂直方向的镜像切换图片 Mipmap对比开启/关闭 Mipmap 的显示效果动态图播放播放 GIF 动图支持暂停控制qml_borderimage/ - 边框图像示例说明BorderImage 基础用法展示 BorderImage 的基本使用支持点击交互九宫格辅助线使用虚线可视化展示九宫格边框区域平铺模式对比Stretch、Repeat、Round 三种平铺模式的效果对比边框尺寸对比不同 border 值对拉伸效果的影响镜像效果mirror 属性实现水平翻转动态切换图片源运行时切换图片源显示加载状态qml_animatedimage/ - 动画图像示例说明播放 GIF展示 AnimatedImage 最基本的用法自动播放 GIF 动画播放/暂停控制通过按钮控制动画的播放和暂停状态帧进度指示器实时显示当前帧和总帧数带进度条可视化播放速度控制使用滑块动态调整动画播放速度日期和时间组件qml_calendar/ - 日历组件示例说明MonthGrid 基础用法展示当月日历网格当天日期加粗显示DayOfWeekRow 星期标题自定义星期标题周末显示为红色CalendarModel 月份切换左右滑动切换月份支持整年浏览日历导航完整的日历组件支持月份导航、周数显示、日期点击qml_date/ - 日期组件示例说明日期格式化使用系统内置 Locale 格式展示长/短风格的日期、时间显示效果多地区日期显示适配中文、英文、德文、日文、法文等多国语言的日期格式日期解析支持将自定义格式的字符串转换为 Date 对象包含输入有效性校验自定义日期格式通过格式字符串实现任意风格的日期时间输出支持星期、上下午等显示时间戳转换实现日期对象与毫秒/秒级时间戳的双向互相转换时间选择器基于 Tumbler 实现的 24 小时制滚动选择器支持小时、分钟选择日期时间选择器完整的年/月/日/时/分选择组件自动适配不同月份天数、闰年 2 月模拟时钟使用 Canvas 2D 绘制的动态时钟包含刻度、数字标识、时分秒指针每秒实时更新对话框和弹出组件qml_dialog/ - 对话框示例说明消息对话框基础消息提示和自定义表单对话框颜色对话框点击色块调出系统颜色选择器文件对话框四种文件操作模式演示文件夹对话框目录浏览和文件列表展示字体对话框字体选择和实时预览qml_popup/ - 弹出窗口示例说明Simple Popup基础弹出框显示简单内容Modal Popup模态弹出框阻止背景交互Custom Popup自定义样式的弹出框Animated Popup带动画效果的弹出框qml_menu/ - 菜单组件示例说明鼠标右键菜单鼠标右键点击时显示的上下文菜单动态菜单使用 Instantiator 动态加载菜单项顶部菜单栏应用程序顶部的菜单栏支持快捷键的菜单带有键盘快捷键的菜单项可选项菜单带有单选功能的菜单项主题菜单栏自定义样式的主题菜单qml_messagebox/ - 消息框演示自定义消息框包括信息、警告、错误、成功、问题等类型。颜色和样式qml_color/ - 颜色组件示例说明命名颜色展示 QML 内置的 12 种常用命名颜色十六进制输入通过输入框实时修改前景色、背景色、边框色颜色对话框使用系统颜色选择器选择任意颜色渐变色支持水平和垂直方向的线性渐变组件应用展示颜色在 Button、Slider、Switch、TextField 等组件中的应用Charts 组件qml_charts/ - Charts 组件的使用示例说明坐标轴类型数值、对数、日期、分类、柱形图分类ChartView 属性Legend图例、主题、动画基础示例折线图、曲线图、散点图、折线图的鼠标交互极坐标示例极坐标图、雷达扫描柱形图类型柱形图、水平柱形图、百分比柱形图、水平百分比柱形图、堆叠柱形图、水平堆叠柱形图交互示例柱形图信号交互、饼图交互、面积图交互等其它示例箱线图、蜡烛图K 线图、股价走势图等其他示例qml_timer/ - 定时器示例说明单次触发延时执行和一次性任务处理重复触发周期性任务的连续执行启动触发组件初始化时的时间控制动画控制与界面动画的协调配合qml_separator/ - 分隔符示例说明Rectangle 分隔线使用 Rectangle 实现基础的水平和垂直分隔线菜单分隔线MenuSeparator 在弹出菜单中的标准应用工具栏分隔线ToolSeparator 在工具栏中对操作按钮进行分组自定义分隔线使用圆点组成的创意分隔线效果qml_login/ - 登录界面演示完整的登录界面包括表单验证和用户交互。qml_js_interaction/ - JavaScript 交互示例展示 QML 与 JavaScript 的四种交互方式内联调用、外部文件、信号处理、工作线程WorkerScript。学习资源Qt 官方文档Qt Quick 控件本专栏演示项目下载地址