本专栏是一个 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 与 TabBar | TabBar 与 SwipeView 双向绑定，点击标签或滑动页面均可切换 |
| SwipeView 与 Loader | 使用 Loader 延迟加载页面内容，配合日志展示生命周期 |
| 图片浏览器 | 完整的图片浏览器应用，支持自动轮播、手动切换和指示器导航 |
qml_page/ - 页面组件
| 示例 | 说明 |
|---|---|
| Page 基础用法 | 展示 header 和 footer 的基本配置 |
| Page 与 SwipeView 联动 | 滑动切换页面，配合 PageIndicator |
| Page 与 StackLayout 结合 | 按钮切换页面内容 |
| Page 嵌套结构 | 外层 Page 嵌套内层 Page |
qml_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）。