QML学习笔记总结
QML学习总结
- 一、概述
- 二、QML入门参考
- 三、QML用户界面
- 四、Qt Quick GUI 控件
-
- 1. 布局类
- 2. 按钮类
- 3. 委托类控件
- 4. 指示类控件
- 5. 容器控件
- 6. 输入类控件
- 7. 菜单控件
- 8. 弹出类控件
- 9. 分隔器控件
- 10. 导航控件
- 11. 图形化特效
- 12. 在QML中预览 Web 资源
- 五、系统对话框
- 六、多媒体支持
- 七、高级开发相关主题
一、概述
这个博客是我记录我自学Qt5 的QML语言的时候一些总结和个人理解概述，也是这个专栏的置顶文章，主要的帮助链接基本在这个专栏内部，主要的参考资料就是Qt 官方的帮助文档，这个官方的帮助文档相当详细，总的来说，QML 学习的成本不大，学习入门也很简单，语法也很清晰，QML真的更加快速的描述这个界面相关的构建方法。这个博客也会持续更新，也作为学习阶段性总结的一个监督方式吧。
QML 是一种声明性语言，其实就是和 html 类似，它可以根据可视化组件以及它们如何相互交互和关联来描述用户界面，也需要QML引擎来解析，和html 需要浏览器解析才能有效果一样的道理。 总的来说 QML 其实就是一个语法规则。它是一种高度可读的语言，旨在使组件以动态方式相互连接，并允许在用户界面中轻松重用和定制组件。Qt Quick模块就是 Qt官方基于 QML 语法规则开发的一个标准GUI库，设计人员和开发人员可以在QML 软件中构建流畅的动画用户界面，并可以选择将这些用户界面与 c++ 后端交互通信。这些就是我的理解。当然像 Qt 官方还提供了 Qt Quick Controls 这个控件库，Qt 里面的很多的 模块也提供了 QML 的声明方式，我们也可以通过 一定的规则来 在 QML 应用程序里面添加像 Qt Multimedia 模块里的 视频音频播放器之类的封装好的控件，
如MediaPlayer、Radio、Video 等，当然，我们也可以直接基于这个QML语法开发直接的控件库，同时引入第三方 控件库（如涛哥的 TaoQuick）。
这个下面是官方的 对于 QML 和 Qt Quick的定义
-
QML是一种用户界面规范和编程语言。它允许开发人员和设计人员创建高性能、流畅动画和视觉吸引力的应用程序。QML提供了一种高度可读的、声明式的、类似json的语法，支持命令式JavaScript表达式和动态属性绑定。QML语言和引擎基础设施由Qt QML模块提供。
-
Qt Quick是QML类型和功能的标准库。 它包括视觉类型，交互类型，动画，模型和视图，粒子效果和着色器效果。QML应用程序开发人员可以使用单个import语句访问所有这些功能。QtQuick QML库是由QtQuick模块提供的。
已经记录了完成的内容是用 ✔️ 表示的，没完成使用的 ❌ 来完成的。
二、QML入门参考
这里的一些内容就是记录一些 QML 的基础知识，在学习的时候也可以运行这些东西，这里知道如何构建一个qml应用程序，下面的内容主要是
━ ❌ QML- 开发QML软件必看入门
━ ✔️ QML- 编码规范 ☀️
━ ✔️ QML- 专业术语 ❄️
━ ✔️ QML- 语法基础知识
┗━━ ✔️ QML- 导入库包语法
━ ✔️ QML- 对象属性
━ ✔️ QML- 属性绑定 ✋
━ ✔️ QML- 信号和事件系统
━ ✔️ QML- QML与JavaScript交互综述
┣━━ ✔️ QML- JavaScript 表达式在 QML 中使用
┣━━ ✔️ QML- 在QML定义JavaScript资源
┣━━ ✔️ QML- import 导入JavaScript资源
┣━━ ✔️ QML- JavaScript主机环境
┗━━ ✔️ QML- 在JavaScript动态QML对象创建
━ ✔️ QML- QML类型系统 综述
┣━━ ✔️ QML- QML Basic 基础类型
┗━━ ✔️ QML- QML Object 对象类型
━ ✔️ QML- QML 文档综述
━ ✔️ QML- 通过QML文档定义对象类型
━ ✔️ QML- QML加载资源和网络资源透明性
━ ✔️ QML- QML作用域和命名解析
三、QML用户界面
为了创建或自定义图形用户界面，除了Qt QML中的标准QML类型外，Qt Quick还添加了视觉类型、动画类型和其他QML类型。这个主体就是主要是关于用户GUI会操作的一些事情。
✔️ QML- QML视觉元素类型
✔️ QML- QML 响应用户输入
❌ QML- QML 里面的动画
✔️ QML- QML 里的文字展示
✔️ QML- QML 布局
❌ QML- QML 与 JavaScript集成应用
❌ QML- 界面伸缩性问题讨论
四、Qt Quick GUI 控件
Qt 官方其实已经有用QML封装了基本的UI控件，封装的框架在于 Qt Quick controls模块，里面按钮、菜单和视图。这些控件带有一些可使用的内置样式，也支持创建自定义样式。我这里就先介绍一下通用的控件，也就是没有自定义样式的控件。
下面的表格就是使用控件的实用指南。推荐看 综述，再看看具体控件代码写法就行。
1. 布局类
就是一些在Quick 应用中的布局的一些控件，这些布局的很多都是和Qt里面类似的，这个布局就是为了适应窗口和缩放的一些问题，不用布局控件，直接使用绝对定位的方式同样也是可以达到定位的功能的：
✔️ Qt Quick - Qt Quick Layouts 布局综述
✔️ Qt Quick - Layout
✔️ Qt Quick - GridLayout 网格布局
✔️ Qt Quick - ColumnLayout 列布局
✔️ Qt Quick - RowLayout 行布局
✔️ Qt Quick - StackLayout 堆布局
2. 按钮类
记录着一些 按钮 类相关的控件理论和使用，推荐过一遍综述，综述就是总概，里面包括了一些常用的按钮，用法也是非常的简单，不需要使用太多的死记硬背，写代码就是考的灵活而已。变就完事儿，灵活就完事儿。
✔️ Qt Quick - 按钮控件综述
✔️ Qt Quick - AbstractButton 理论
✔️ Qt Quick - Button 理论
✔️ Qt Quick - CheckBox 理论
✔️ Qt Quick - DelayButton 理论
✔️ Qt Quick - RadioButton 理论
✔️ Qt Quick - RoundButton 理论 ✨
✔️ Qt Quick - Switch 理论
✔️ Qt Quick - ToolButton 理论
3. 委托类控件
❌ Qt Quick - 委托控件综述
❌ Qt Quick - CheckDelegate
❌ Qt Quick - RadioDelegate
❌ Qt Quick - SwipeDelegate
❌ Qt Quick - SwitchDelegate
4. 指示类控件
这里就是介绍一下Qt Quick 模块给我们提供的一些 指示界面的一些情况，就行页面在加载中，比较忙，还有比如说是 进度条指示我们可能某个操作进行到哪步了等等的东西。也是先把综述看了就知道大概是什么情况了。
✔️ Qt Quick - 指示控件综述
✔️ Qt Quick - BusyIndicator
✔️ Qt Quick - PageIndicator
✔️ Qt Quick - ProgressBar
❌ Qt Quick - ScrollBar
❌ Qt Quick - ScrollIndicator
5. 容器控件
容器控件其实就是提供了一组组织其他控件的盒子，因为我们有些控件代表的使用场景功能，比如复制、剪切、粘贴是一组，我们就可以用容器把这个一组控件给包起来，大部分的容器都是不提供布局功能的，我们需要自己手动去布局，手动在这个容器里面去布局好内容。
✔️ Qt Quick - 容器控件综述
✔️ Qt Quick - ApplicationWindow
✔️ Qt Quick - Container
✔️ Qt Quick - Frame
✔️ Qt Quick - GroupBox ☁️
✔️ Qt Quick - Page 推荐看ApplicationWindow
✔️ Qt Quick - Pane
✔️ Qt Quick - ScrollView
✔️ Qt Quick - SplitView
✔️ Qt Quick - StackView
✔️ Qt Quick - SwipeView
✔️ Qt Quick - TabBar
✔️ Qt Quick - ToolBar
6. 输入类控件
Qt Quick Controls 模块给我们用户提供了基于 数字 和 文本 输入的各种输入控件。每种控件的输入方便程度，和便捷程度都是各不相同的，也提供了像 滑动条，输入框，下拉框，旋转按钮之类的控件，下面就是一些常用到的控件，一样的推荐优先看看综述。
✔️ Qt Quick - 输入控件综述
| 滑动条 | 文字编辑 | 快捷输入 | 下拉栏 |
|---|---|---|---|
| ✔️ Qt Quick - Slider | ✔️ Qt Quick - TextArea | ✔️ Qt Quick - Dial | ✔️ Qt Quick - ComboBox |
| ✔️ Qt Quick - RangeSlider | ✔️ Qt Quick - TextField | ✔️ Qt Quick - Tumbler |
7. 菜单控件
菜单控件也是最常用的，作为最便捷的一些输入方式，掌握也是很有必要的。
✔️ Qt Quick - 菜单综述
✔️ Qt Quick - Menu
✔️ Qt Quick - MenuBar
✔️ Qt Quick - MenuBarItem ⌛️
✔️ Qt Quick - MenuItem ⛅️
8. 弹出类控件
弹出类的控件就是为了更好地交互，有时候要弹出一些需要选择或者确认的信息，用弹出类控件就好更方便，让界面看起来也更加简洁的。
✔️ Qt Quick - 弹出控件综述
✔️ Qt Quick - Dialog
✔️ Qt Quick - Drawer
✔️ Qt Quick - Menu
✔️ Qt Quick - Popup
✔️ Qt Quick - ToolTip
9. 分隔器控件
这里的分隔器其实就是在菜单选项很多的时候，或者是TooBar里面内容很多，需要用分隔器来区分一下内容，也是简单的分类一下，让页面更加简洁的。
✔️ Qt Quick - 分隔器综述
✔️ Qt Quick - MenuSeparator
✔️ Qt Quick - ToolSeparator
10. 导航控件
导航控件，顾名思义，就是用于对页面内容的切换导航，本质上用户的页面是很多内容的，我们需要让整个软件看起来简洁，就需要藏一下东西，但藏起的时候又要注意用户的当前操作和查找这些功能入口点的便捷，这就需要导航来弄。
✔️ Qt Quick - 导航控件综述
✔️ Qt Quick - Drawer
✔️ Qt Quick - StackView
✔️ Qt Quick - SwipeView
✔️ Qt Quick - TabBar
✔️ Qt Quick - TabButton
11. 图形化特效
就是各种很有意思的东西，就像模糊窗口的那种功能，就像Windows7 的磨砂窗口也可以用这个来弄。只需向QML场景添加特定的效果声明并配置效果属性。源项目类型可以是任何QML类型，甚至是视频或其他效果。将多种效果组合在一起是一种创建效果更不错。
❌ Qt Quick - 图形化特效综述
| Blend 混合 | Color 颜色 | Gradient 渐变 | Distortion 变形 | Drop Shadow |
|---|---|---|---|---|
| ❌ Qt Quick - Blend 简述 | ❌ Qt Quick - BrightnessContrast | ❌ Qt Quick - ConicalGradient | ❌ Qt Quick - Displace | ❌ Qt Quick - |
| ❌ Qt Quick - ColorOverlay | ❌ Qt Quick - LinearGradient | ❌ Qt Quick - DropShadow | ||
| ❌ Qt Quick - Colorize | ❌ Qt Quick - RadialGradient | ❌ Qt Quick - InnerShadow | ||
| ❌ Qt Quick - GammaAdjust | ||||
| ❌ Qt Quick - HueSaturation | ||||
| ❌ Qt Quick - LevelAdjust |
下面也是常用的一些特效
| Blur 模糊 | Motion Blur 运动模糊 | Glow 发光 | Mask 遮罩 |
|---|---|---|---|
| ❌ Qt Quick - FastBlur | ❌ Qt Quick - DirectionalBlur | ❌ Qt Quick - Glow | ❌ Qt Quick - OpacityMask |
| ❌ Qt Quick - GaussianBlur | ❌ Qt Quick - RadialBlur | ❌ Qt Quick - RectangularGlow | ❌ Qt Quick - ThresholdMask |
| ❌ Qt Quick - MaskedBlur | ❌ Qt Quick - ZoomBlur | ||
| ❌ Qt Quick - RecursiveBlur |
12. 在QML中预览 Web 资源
在QML里面可以访问一些网络资源，主要是通过两个QML对象类型，WebEngineView和WebView，来呈现和显示动态web内容。两者之间唯一的区别是后者如果可用的话使用本机Web 视图。这两种类型都可以加载URL或HTML字符串。
五、系统对话框
QtQuick.Dialogs 这个QML模块包含用于创建和与系统对话框交互的类型，像文件对话框，字体选择对话框，颜色对话框等等之类的。
要使用这个模块中的类型，使用下面这行代码导入这个模块:
import QtQuick.Dialogs 1.3
✔️ Qt Quick - FileDialog文件对话框
✔️ Qt Quick - FontDialog字体对话框
✔️ Qt Quick - ColorDialog 颜色对话框
✔️ Qt Quick - MessageDialog 消息提示框
✔️ Qt Quick - Dialog 对话框
六、多媒体支持
Qt Multimedia 模块使应用程序能够通过一组方便的QML类型处理各种媒体内容。这些QML类型可以在c++中扩展。
❌ Qt Quick - Audio 类型：为场景添加音频播放功能
❌ Qt Quick - Playlist ：指定要播放的媒体列表。
❌ Qt Quick - Camera：访问相机取景器框架
❌ Qt Quick - MediaPlayer：提供添加媒体播放功能。它与Audio 类型相同，但可以使用VideoOutput类型用于视频播放。
❌ Qt Quick - Radio：访问无线电功能
❌ Qt Quick - Video：增加场景的视频回放功能。它使用MediaPlayer和VideoOutput类型来提供视频播放功能。
七、高级开发相关主题
❌ Qt Quick - QML 和 C++ 集成交互
❌ Qt Quick - QML 和 Qt Quick 的最佳实践
❌ Qt Quick - 性能考量及建议
❌ Qt Quick - 使用Qt Quick进行国际化和本地化
❌ Qt Quick - 调试QML应用程序
