洪源兄

这个博客是我记录我自学Qt5 的QML语言的时候一些总结和个人理解概述，也是这个专栏的置顶文章，主要的帮助链接基本在这个专栏内部，主要的参考资料就是Qt 官方的帮助文档，这个官方的帮助文档相当详细，总的来说，QML 学习的成本不大，学习入门也很简单，语法也很清晰，QML真的更加快速的描述这个界面相关的构建方法。这个博客也会持续更新，也作为学习阶段性总结的一个监督方式吧。

要在QML中显示文本，就创建一个文本项，并将text属性设置为要显示的文本。有这个 text 属性值的元素对象就能显示该文本。我们可以在文本项上设置几个属性，以设置整个文本块的样式。包括颜色、字体族、字体大小、粗体和斜体。标记之类的富文本可用于有选择地为文本项的特定部分设置样式。设置Text::textFormat为Text。StyledText来使用此功能。更多细节请参考 Text 的文档。

ScrollView 为用户定义的内容提供滚动功能。类似QScrollArea 的功能。

ApplicationWindow 是一个可以方便地向窗口中添加 菜单栏、页眉和 页脚项 的窗口。很像经常使用的界面窗口。这个类似 Window的基础窗口。可以当顶层窗口使用我们可以将ApplicationWindow声明为应用程序的根元素，并使用QQmlApplicationEngine来运行它。通过这种方式，我们可以从QML控制窗口的属性、外观和布局。

Qt Quick Controls提供了一系列类似容器的控件。控件功能支持页眉和页脚的样式顶级窗口Container提供容器通用功能的抽象基类型Frame一组逻辑控件的可视框架GroupBox逻辑控件组的可视框架和标题Page支持页眉和页脚的样式页面控件Pane提供与应用程序样式和主题匹配的背景ScrollView可滚动视图SplitView在每个项目之间使用可拖动的拆分器布局项目StackView提供基于堆栈的导航模型SwipeView。

Container 提供容器通用功能的抽象基类。Container是类容器用户界面控件的基本类型，允许动态插入和删除Item。DialogButtonBox, MenuBar, SwipeView, 和 TabBar 都是继承至这个控件。

Pane提供与应用程序样式和主题匹配的背景颜色。Pane不提供自己的布局，我们需要定位其内容，例如通过创建RowLayout或ColumnLayout。其实就是一个提供修饰背景的容器而已。这个控件就是被 Frame, Page, ScrollView 和 ToolBar 继承的。声明为Pane子元素的项自动成为Pane内容的父元素。动态创建的项需要显式地赋给contentItem。

Frame 用于在可视 Frame 中布局一组逻辑控件。这个也是一个内容容器，提供了一个边框，但Frame不提供自己的布局，所以需要我们自己定位它内部的内容，例如通过创建RowLayout或ColumnLayout。不提供布局是正常的，因为布局有专门的布局器来做，这个只是一个内容容器。声明为 Frame 子元素的项会自动成为Frame 内容项的父元素。动态创建的项需要显式地赋给contentItem。如果在一个Frame 中只使用了一个元素，它会调整大小以适应它所包含的元素的隐式大小。

GroupBox用于在一个有标题的可视容器中去布局一组逻辑控件组。GroupBox不提供自己的布局，我们需要自己布局其内容，例如通过创建RowLayout或ColumnLayout。这个GroupBox其实就是提供了一个分组的逻辑功能，让页面布局内容看起来更合理。声明为GroupBox子元素的项自动成为GroupBox内容项的父元素。动态创建的项需要显式地赋给contentItem。如果在一个群组框中只使用一个项目，它将调整大小以适应其包含的项目的隐式大小。这使得它特别适合与布局一起使用。

SplitView是一个水平或垂直布局元素的控件，每个元素之间有一个可拖动的分配页面内容的滑块。很像IDE里面的那些窗口。就像下面的简单的布局内容一样。手动调整后：这个的源代码text : "布局页1" anchors . centerIn : parent } } SplitView {anchors . centerIn : parent text : "布局2-1" } } Rectangle {

Qt Quick Controls提供了一系列导航模型。控件功能Drawer可以用滑动手势打开和关闭的侧滑动面板StackView提供基于堆栈的导航模型SwipeView允许用户通过横向滑动来导航页面TabBar允许用户在不同的视图或子任务之间切换TabButton按钮与一个看起来适合TabBar以下部分提供了根据用例选择适当类型的导航模型的指导方针。

StackView可以与一组相互链接的信息页面一起使用。例如，电子邮件应用程序具有单独的视图，以列出最新的电子邮件，查看特定的电子邮件和列表/查看附件。当用户打开电子邮件时，电子邮件列表视图被压入栈中，当用户选择返回时，电子邮件列表视图又被弹出。Row {

MessageDialog最基本的用例是弹出警告框。它还允许用户根据启用的按钮以各种方式进行响应。对话框最初是不可见的。你需要首先按需设置属性，然后将visible设置为true或调用open()。根据对话框有哪些标准按钮以及每个按钮的ButtonRole，可能有几种处理程序。例如，当用户按下Cancel、Close或Abort按钮时，onRejected处理程序将被调用。对于其父窗口，MessageDialog窗口是自动临时的。

FontDialog允许用户选择字体。对话框最初是不可见的。你需要首先按需设置属性，然后将visible设置为true或调用open()。FontDialog窗口对于其父窗口来说是自动临时的。因此，无论您在项目中还是在窗口中声明对话框，对话框都将显示在包含项目的窗口或您声明的窗口的中央。FontDialog的实现将是一个平台字体对话框。如果这失败了，那么它将尝试实例化一个QFontDialog。如果这也失败了，那么它将回落到一个QML实现，DefaultFontDialog.qml。

FileDialog提供了一个基本的文件选择器的功能：它允许用户选择现有的文件或目录，或者创建新的文件名。对话框最初是不可见的。你需要首先按需设置属性，然后将visible设置为true或调用open()。对于其父窗口，文件对话框窗口是自动临时的。因此，无论您在项目中还是在窗口中声明对话框，对话框都将显示在包含项目的窗口或您声明的窗口的中央。FileDialog的实现将是一个平台文件对话框。如果失败了，那么它将尝试实例化一个QFileDialog。

ColorDialog 就是Qt 提供的标准的颜色对话框。ColorDialog 允许用户选择颜色。对话框最初是不可见的。你需要首先按需设置属性，然后将visible设置为true或调用open()。彩色对话框窗口对其父窗口来说是自动瞬时的。因此，无论您在项目中还是在窗口中声明对话框，对话框都将显示在包含项目的窗口或您声明的窗口的中央。

PageIndicator用于指示含有多个页面的容器中，当前处理活动的页。记住，这个只是指示当前的活动页，不能够自动去执行切换页面的功能哈，只能自己手动去绑定一下PageIndicator由代表页面的委托项组成。

SwipeView提供了一个基于滑动的导航模型。经常用在移动端里面，但是像桌面端也会用到，就像网易云音乐里面的推荐页就是用的这个来做的。

TabButton与TabBar一起使用。TabButton其实就是TabBar的一个内容TabBar {TabButton从AbstractButton继承了API。例如，你可以设置文本，并使用AbstractButton API对点击做出反应。基本上我们可以把TabButton当Button来使用的。

TabBar是由TabButton控件填充，TabBar可以与任何提供currentIndex属性的布局或容器控件一起使用，如StackLayout或SwipeView。TabBar其实只是一个导航控件，就类似于一组RadioButton用来切换一个一个的。

Qt Quick Controls 提供了多种分隔符，其实就是分割一下MenuBar和ToolBar里面的内容。控件功能将菜单中的一组项目与相邻项目分开将工具栏中的一组项目与相邻项目分开每种类型的分隔符都有自己特定的用例。下面的小节提供了根据用例选择合适类型的分隔符的指导方针。

Popup是类似弹出式用户界面控件的基本类型。它可以与Window或ApplicationWindow一起使用。为了确保场景中其他项目上方显示一个弹出框，建议使用ApplicationWindow。ApplicationWindow还提供背景调光效果。Popup不提供自己的布局，这就要求我们自己定位其内容，例如通过创建RowLayout或ColumnLayout。声明为弹出框子元素的项自动成为弹出框内容项的父元素。动态创建的项需要显式地赋给contentItem。

ToolTip 其实就是ToolTip，所谓ToolTip其实就是一段简短的文本，告知用户控件的功能。它通常置于父控件之上或之下。提示文本可以是任何富文本格式的字符串。这个一般是很细节的东西。如果需要对ToolTip位置进行更细粒度的控制，或者需要同时创建多个ToolTip实例，也可以创建本地ToolTip实例。这样，就可以自定义ToolTip，并且整个弹出式API都是可用的。下面的示例提供了一个ToolTip，在拖动手柄时显示滑块的值。Slider {

Drawer提供了一个基于滑动的侧边面板，类似于经常在触控界面中使用的侧边面板，为导航提供了一个位置。

对话框是一种弹出式对话框，主要用于短期任务和与用户的简短交流。与ApplicationWindow和Page类似，Dialog被组织成三个部分:header、contenttem和footer。

控件功能Dialog带有标准按钮和标题的弹出式对话框，用于与用户进行短期交互Drawer可以用滑动手势打开和关闭的侧面板Menu弹出式菜单，可以用作上下文菜单或弹出式菜单Popup弹出式用户界面控件的基本类型ToolTip提供任何控件的工具提示每种类型的弹出式控件都有自己特定的目标用例。下面的小节提供了根据用例选择适当类型的弹出控件的指导方针。

MenuItem是继承至AbstractButton API的一个类型。它提供了一种熟悉的方式来响应被触发的菜单项。MenuItem从AbstractButton继承API。例如，我们可以使用AbstractButton API设置文本和图标。Menu对象可以设置 Action 或者 MenuItem作为他的子集。

这个只是了解即可啦！MenuBarItem表示菜单栏中的菜单。我们可以当通过键盘、鼠标或触摸触发MenuBarItem时，会显示相应的下拉菜单。MenuBarItem被用作MenuBar的默认委托类型。注意，在使用MenuBar时，不需要手动声明MenuBarItem实例。将Menu实例声明为MenuBar的子实例就足够了，相应的MenuBarItem项会自动创建。

MenuBar 其实就是菜单栏，顾名思义其实就是放Menu的一个容器而已。菜单栏由下拉菜单组成，通常位于窗口的顶部边缘。通常，菜单被静态地声明为菜单栏的子菜单，但是MenuBar也提供了API来动态地添加、插入、删除和获取菜单。还可以使用 menuAt() 访问菜单栏中的菜单。

Menu其实就是Qt Quick里面的菜单控件，一般来说。上下文菜单；例如，右键单击后显示的菜单弹出菜单；例如，单击按钮后显示的菜单在有鼠标光标可用的桌面平台上，子菜单是默认级联的。非级联菜单一次显示一个菜单，并且位于父菜单的中央。通常，菜单项被静态声明为菜单的子菜单项，但menu也提供了动态添加、插入、移动和删除菜单项的API。可以使用itemAt()或contentChildren访问菜单项。

菜单这一类，给我们提供了很多的便捷封住。控件名功能Menu弹出式菜单，可以用作上下文菜单或弹出式菜单，也就是可以单独菜单上用，或者在鼠标右键，之类的也可以用MenuBar提供一个窗口菜单栏，就是用来装 Menu的容器在菜单栏中显示下拉菜单，即是 MenuBar的子项MenuItem在菜单中显示一个项目，就是Menu的子项每种类型的菜单控件都有自己特定的目标用例。下面的小节提供了根据用例选择适当类型的菜单控件的指导方针。

ToolBar是应用程序范围内和上下文里面便捷的操作和控件的容器，例如导航按钮和搜索字段。其实本质上就是一个装东西的容器。工具栏通常用作应用程序窗口的页眉或页脚的位置。ToolBar不提供自己的布局，但需要您定位其内容，例如通过创建RowLayout。如果工具栏中只有一个元素被使用，它将调整大小以适应其包含的元素的隐式大小。这使得它特别适合与布局一起使用。里面的布局需要自己使用布局器去布局，这个容器里面可以放很多元素，不仅仅是 ToolButton 哈，还可以放其他东西的。

ProgressBar 就是进度条。该值应该随着进度定期更新。范围由from和to定义，这个定义的就是区间值，它们都可以包含任何值。ProgressBar还支持一种特殊的不确定模式，这经常使用的，例如，当无法确定正在下载的项目的大小，或者由于网络断开而导致下载进度中断时。indeterminate模式类似于BusyIndicator。两者都可以用来表示后台活动。主要的区别在于视觉上，ProgressBar还可以显示具体的进度(可以确定)。

BusyIndicator 应该用于在内容加载或UI被阻塞等待资源可用时用来指示当前的状态。BusyIndicator类似于不确定的ProgressBar。两者都可以用来表示后台的进度。主要的区别在于视觉上，ProgressBar还可以显示具体的进度(可以确定)。由于视觉上的差异，繁忙的指示器和不确定的进度条适合在用户界面的不同位置。在工具栏的角落在在页面顶部刷新的位置这个位置我们是可以自己确定好的，不要太担心具体放哪里。

ComboBox是一个组合按钮和弹出列表。它提供了一种以占用最小屏幕空间的方式向用户显示选项列表的方法。ComboBox用数据模型填充。数据模型通常是JavaScript数组、ListModel或整数，但也支持其他类型的数据模型。ComboBox {

Tumbler 其实就是一个类似类似 手机上 的滚动选项卡的东西，也是在 QtQuick.Extras 模块里面。通过滚动来选择对应需要的值。我们可以对Tumbler 添加很多的 TumblerColumn ，我们获取一些索引位置信息通过 TumblerColumn 的方式来获取每一个TumblerColumn的索引。

Dial 表盘类似于音响或工业设备上的传统表盘旋钮。它允许用户在一个范围内指定一个值。像CircularGauge一样，Dial可以显示刻度来指示当前值。当一个合适的步长与tickmarkStepSize相结合时，表盘就会“扣”到每个tickmark上。也就是每次调整一个步进长度。对了，这个Dial 其实也是另外的一个模块里的QML类型，不是qquick ctrol 里的，是QtQuick.Extras 里的内容。

TextField 其实就是是一个单行文本编辑器。TextField扩展了TextInput的功能，添加了占位文本功能，并添加了装饰的功能，这里的装饰主要就是只添加了边框和聚焦输入的时候的高亮，像TextInput就只管输入，没有修饰的功能。

TextArea是一个多行文本编辑器。TextArea扩展了TextEdit，添加了一个占位文本功能，并添加了装饰。注意这个文本编辑器是没有边框之类的，只有一个输入区域而已。文本区域本身不可滚动。特别是在屏幕尺寸受限的平台上，通常更可取的做法是使整个应用程序页面可滚动。在这样一个可滚动的页面上，一个不可滚动的文本区域可能比嵌套的可滚动控件表现更好。但是请注意，在这种情况下，文本区域的背景装饰会与其他可滚动内容一起滚动。

RangeSlider 通过沿着轨道滑动每个滑块来选择由两个值指定的范围。区域值嘛，我没怎么见到过这个其实也可以想到一个应用的场景就是，把一个变化的值限制在某一个区间，这个就是对区间的一种用法。Label {text : "下限：" } Label {text : "上限：" } Label {} }