Qt 5 开发及实例（第5版） 课件 第21章 Qt Quick Controls开发基础

QT5开发及实例（第5版）第21章QtQuickControls开发基础——QtQuickControls概述01第一个QtQuickControls程序第一个QtQuickControls程序【例】（简单）（CH2101）尝试开发第一个QtQuickControls程序，运行界面如图。可以直接在QML应用程序中通过导入库来开发QtQuickControls程序，步骤如下。（1）创建QML项目，选择项目“Application(Qt)”下的“QtQuickApplication”模板，具体操作详见前QML编程基础章。项目名称为“QControlDemo”。（2）打开项目主程序文件main.qml，编写代码。（3）单击按钮运行项目，在上面一行文本框内输入“美好的世界”，单击“点我”按钮，下一行文本框显示“Hello美好的世界！”。02更换界面主题样式更换界面主题样式QtQuickControls支持多种类型的界面主题样式：Default（默认）、Material（质感）、Universal（普通）、Fusion（融合）和Imagine（想象），可通过配置qtquickcontrols2文件来更换样式类型。（1）在项目工程目录中创建qtquickcontrols2.conf配置文件。（2）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加现有文件…”项，从弹出的对话框中选择该文件并打开，将其加载到项目中。（3）打开qtquickcontrols2.conf文件，编写内容如下：;Thisfilecanbeeditedtochangethestyleoftheapplication;Read"QtQuickControls2ConfigurationFile"fordetails:;https://doc.qt.io/qt/qtquickcontrols2-configuration.html

[Controls]Style=Default

[Material]Theme=Light;Accent=BlueGrey;Primary=BlueGray;Foreground=Brown;Background=Grey更换界面主题样式其中，通过修改加黑处的配置来指定界面主题的样式类型。将其改为Material，运行程序，看到的界面如图；更换界面主题样式若改为Imagine，则呈现的效果如图21.3所示。QT5开发及实例（第5版）第21章QtQuickControls开发基础——QtQuick控件01概

述概

述QtQuickControls模块提供一个控件的集合供用户开发图形化界面使用，所有的QtQuick控件、可视外观效果和功能描述见表。控

件名

称可视外观效果功能描述Button命令按钮单击执行操作CheckBox复选框可同时选中多个选项ComboBox组合框提供下拉列表选项GroupBox组框用于定义控件组的容器Label标签界面文字提示RadioButton单选按钮单击选中，通常分组使用，只能选其中一个选项

TextArea文本区用于显示多行可编辑的格式化文本概

述续表TextField文本框可供输入（显示）一行纯文本BusyIndicator忙指示器用以表明程序正在执行某项操作（如载入图片），请用户耐心等待Tumbler翻选框提供滚轮条给用户上下翻动以选择合适的值ProgressBar进度条动态显示程序执行进度Slider滑动条提供水平或垂直方向的滑块，鼠标拖动可设置参数SpinBox数值旋转框单击上下箭头可设置数值参数Switch开关控制某项功能的开启/关闭，常见于移动智能手机的应用界面02基本控件基本控件【例】（难度中等）（CH2102）用基本控件制作“学生信息表单”，输入（选择）学生各项信息后单击“提交”按钮，在文本区显示出该学生的信息，运行效果如图。实现步骤如下。（1）创建QML项目，选择项目“Application(Qt)”下的“QtQuickApplication”模板。项目名称为“StuForm”。（2）打开项目主程序文件main.qml，编写代码。03高级控件高级控件【例】（较难）（CH2103）用高级控件制作一个有趣的小程序，界面如图。高级控件程序运行后，窗体上显出一幅唯美的海底美人鱼照片。用户可用鼠标拖动左下方滑块来调整画面尺寸，当画面缩小到一定程度后，界面上会出现一个“忙等待”的动画图标，如图；高级控件还可以通过日期翻选框设置美人鱼的生日，点“OK”按钮，程序同步计算并显示出她的芳龄，如图。高级控件实现步骤如下。（1）创建QML项目，选择项目“Application(Qt)”下的“QtQuickApplication”模板。项目名称为“Mermaid”。（2）在项目工程目录中建一个images文件夹，其中放入一张图片，文件名为“Mermaid.jpg”。（3）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加现有文件…”项，从弹出的对话框中选择该图片打开，将其加载到项目中。（4）打开项目主程序文件main.qml，编写代码。04样式定制样式定制凡是对应有样式类的QtQuick控件都可以由用户自定义其外观，表给出了各QtQuick控件所对应的样式类。控

件名

称对应样式类Button命令按钮ButtonStyleCheckBox复选框CheckBoxStyleComboBox组合框ComboBoxStyleRadioButton单选按钮RadioButtonStyle

TextArea文本区TextAreaStyleTextField文本框TextFieldStyleBusyIndicator忙指示器BusyIndicatorStyleProgressBar进度条ProgressBarStyleSlider滑动条SliderStyleSpinBox数值旋转框SpinBoxStyleSwitch开关SwitchStyle样式定制定制控件的样式有以下两种方法。（1）使用样式属性所有可定制的QtQuick控件都有一个style属性，将其值设为该控件对应的样式类，然后在样式类中定义样式，代码形如：Control{ //控件名 ... //其他属性及值style:ControlStyle{ //样式属性 ... //自定义样式的代码} ...}样式定制（2）定义样式代理样式代理是一种由用户定义的属性类组件，其代码形如：propertyComponentdelegateName:ControlStyle{ //样式代理 ... //自定义样式的代码}其中，delegateName为样式代理的名称，经这样定义了之后，就可以在控件代码中直接引用该名称来指定控件的样式，如下：Control{ //控件名 ...style:delegateName //通过样式代理名指定样式 ...}样式定制【例】（较难）（CH2104）用上述两种方法分别定制几种控件的样式，界面对比如图，其中左边一列为控件的标准外观，中间为用样式属性直接定义的外观，右边则是应用了样式代理后的效果。样式定制实现步骤如下。（1）创建QML项目，选择项目“Application(Qt)”下的“QtQuickApplication”模板。项目名称为“Styles”。（2）在项目工程目录中建一个images文件夹，其中放入一些图片作为定制控件的资源，如图。样式定制（3）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加现有文件…”项，从弹出的对话框中选中这些图片打开，将它们加载到项目中。（4）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加新文件…”项，新建MainForm.qml文件，编写代码。（5）打开main.qml文件，编写代码如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:600height:240visible:truetitle:qsTr("样式定制")

MainForm{anchors.fill:parent}}QT5开发及实例（第5版）第21章QtQuickControls开发基础——QtQuick对话框QtQuick对话框【例】（难度中等）（CH2105）演示几种QtQuick对话框的用法，运行效果如图。QtQuick对话框实现步骤如下。（1）创建QML项目，选择项目“Application(Qt)”下的“QtQuickApplication”模板。项目名称为“Dialogs”。（2）右击项目视图“资源”→“qml.qrc”下的“/”节点，选择“添加新文件…”项，新建MainForm.qml文件，编写代码。QT5开发及实例（第5版）第21章QtQuickControls开发基础——QtQuick选项标签QtQuick选项标签【例】（较难）（CH2106）用选项标签结合多种视图组合展示“文艺复兴三杰”的代表作，界面如图。QtQuick选项标签程序整个窗体界面分左、中、右三个区域。左边区给出作品及艺术家的信息列表；中区由多个选项页组成的相框展示整体作品；右边区的图片框则带有滚动条，用户可拖动以进一步观赏作品的某个细节部分。用户可以用两种方式更改视图以欣赏不同作者的作品：一种是用鼠标点选左边区不同的列表项；另一种就是切换中间相框顶部的选项标签，操作如图。QtQuick选项标签实现步骤如下。（1