QML学习——Qt Quick Controls 1（六）

Controls 1 组件

Qt Quick Controls从Qt5.1开始引入，且从Qt5.12开始分开成为独立的Qt Quick Controls 1

• ApplicationWindow

  • 组件类属性：menuBar、toolBar、statusBar、style；
  • 一个完整的主应用窗口包含菜单栏、工具栏、内容显示区、状态栏等UI组件；

• style样式属性：

  • 自Qt5.1起，引入了一个Qt Quick Controls Styles的子模块，它几乎为每个Qt Quick控件都提供了一个样式类，在Qt Quick Controls 2是没有的；

  • 凡是对应有样式元素的Qt Quick控件都可以由用户自定义其外观，定制控件的样式有以下两种方法：

    1. 使用控件的样式属性：style

       • 如果某个控件Xxxx有style属性，则对应的样式属性元素为XxxxStyle。例如：

       • import QtQuick.Controls.Styles 1.4
         
         ApplicationWindow {
             style: ApplicationWindowStyle {
                 background: BorderImage {
                     source: "background.png"
                     border { left: 20; top: 20; right: 20; bottom: 20 }
                 }
             }
         }
         

    2. 定义样式代理：

       • 样式代理是一种由用户定义的属性类组件。例如：

       • property Component xxxXXX: XxxxStyle {
             //自定义样式
         }
         

       • xxxXXX为样式代理名称，这样定义后，就可以在控件代码中直接引用名称来指定控件的样式了：

       • Xxxx{
             ...
             style: xxxXXX //通过代理名指定样式
             ...
         }
         

       • 这样的好处是：如果有多个相同样式类型的控件，那么只需要在样式代理中定义一次多用，提高代码的复用性；注意样式类型必须匹配；

• BusyIndicator

  • 忙指示器，自Qt5.2引入，当应用程序正在载入某些内容或者UI被阻塞等待某个资源变为可用时，可以使用BusyIndicator来提示用户耐心等待，例如网络图片加载：

  • BusyIndicator {
        running: image.status === Image.Loading
    }
    

• validator筛选器属性：

  • 某些输入控件（如ComboBox、SpinBox、TextField、TextInput）可以设置条件筛选器 IntValidator、DoubleValidator、 RegExpValidator、RegularExpressionValidator，只有当用户的输入符合要求时才能被文本框接受。

• Calendar

  • 日历控件是自Qt5.3才引入的，可视化日历组件，可供用户选择日期，minimumDate/maximunDate属性设定了可选择的日期范围；
  • Calendar支持最早从公元后1年1月1日~公元后175759年10月25日；

• Qt Quick 对话框。Qt Quick 对话框是从Qt5.1开始逐步增加的模块，目前有五个：

  • Dialog：封装了标准按钮的通用对话框；
    • 对话框底部有一组标准按钮，每一个按钮都有一个角色(ButtonRole)，这个角色决定了它被按下时将发出何种信号；
    • 可以通过设置对话框的standardButton属性来控制所要使用的按钮；
    • 例如：standardButton: StandardButton.Ok | StandardButton.Cancel；
    • 对应的角色则是：AcceptRole和RejectRole；则对应的信号为：accepted()和rejected()；对应的槽函数为：onAccepted()和onRejected()；
    • 对话框都有一个modality属性，设定该对话框的模态属性（简单理解为阻塞其他窗口与否，如何阻塞），值为Qt::WindowModality枚举类型；详细含义如下：
      • Qt.NonModal：
        • 该窗口不是模态窗口且不会阻塞其他窗口。
        • 在对话框中的体现就是，弹出对话框后也可以在其他窗口上进行操作，不影响其他窗口交互；
      • Qt.WindowModal：
        • 单一窗口层次结构的模态，阻塞其父窗口、所有祖父窗口、所有父窗口的兄弟窗口、所有祖父窗口的兄弟窗口；
        • 在对话框中的体现就是，弹出对话框后其他父、祖父等窗口不能操作；
      • Qt.ApplicationModal：
        • 该窗口对应用程序来说是模态的，并阻塞所有窗口；
        • 对于对话框，弹出对话框后所有该应用程序的窗口都被阻塞不能操作了；
  • FileDialog：供用户从本地文件系统中选择文件的对话框；
    • 文件选择对话框有个文件名过滤器属性：nameFilters，由字符串列表组成，可以包含?和*通配符，并对每种过滤器提供一个文字描述，例如：
    • nameFilters: [ "Image files (*.jpg *.png)", "All files (*)" ]
  • FontDialog：供用户选择字体的对话框；
  • ColorDial：选择颜色的对话框；
  • MessageDialog：显示消息弹出的对话框；

最后放个Qt Quick Controls 1（Qt5.15.2）中所有的组件表（ import QtQuick.Controls 1.4）：

类别	组件	描述
Application Window		用于描述应用程序的基本窗口属性的组件
	Action	绑定到Button, ToolButton, MenuItem的抽象用户操作组件
	ApplicationWindow	最顶层的应用窗口
	MenuBar	顶部水平的菜单栏
	StatusBar	窗口下面的状态栏
	ToolBar	包含ToolButton的工具栏
Navigation and Views		允许用户在视图布局中管理或呈现其他组件
	ScrollView	带水平/垂直滚动条的内容框架为用户显示比较大的界面元素（如图片、网页等）
	SplitView	以分割条的方式横向/纵向布局视图
	Stack	为Push到StackView中的项提供附加属性
	StackView	与一组相互链接的信息页面一起使用的基于堆栈的导航模型
	StackViewDelegate	提供如Pop/Push时的转换动画
	Tab	继承自Loader且惰性加载的TabView的内容
	TabView	多个堆叠项中选择一个的视图组件
	TableView	带有滚动条、样式和标题部分的列表视图
	TableViewColumn	TableView和TreeView中的列
	TreeView	带有滚动条、样式和标题部分的树形视图
Controls		用于表示或接收用户输入的项
	BusyIndicator	转圈圈的繁忙指示器
	Button	按钮
	Calendar	日历/日期选择器
	CheckBox	复选框
	ComboBox	下拉框
	ExclusiveGroup	互斥选项组
	GroupBox	带标题的组框框架
	Label	文本标签
	ProgressBar	进度条
	RadioButton	单选按钮
	Slider	滑动条
	SpinBox	数值调整框
	Switch	开关
	TextArea	多行文本区
	TextField	单行文本框
	ToolButton	功能按钮
Menus
	Menu	菜单组件，用于上下文菜单、弹出菜单、顶部菜单栏
	MenuItem	菜单和菜单栏中的项
	MenuSeparator	菜单中的分割条