Qt-Quick-Controls-2新颖界面开发PPT学习课件.ppt

按一下以編輯母片標題樣式,按一下以編輯母片,第二層,第三層,第四層,第五層,2,#,第,22,章,Qt Quick Controls 2,新颖界面开发,22.1 Qt Quick Controls 2,简介,22.2 Qt Quick Controls 2,与,1,的比较,22.3,滑动翻页及隐藏面板,22.4,选项列表,22.5,带功能按钮的列表,1,2025/8/2 周六,22.1 Qt Quick Controls 2,简介,（,1,）大部分控件的内部状态使用,C+,而非,QML,处理，以提高效率。,（,2,）样式类型不再提供可被控件动态实例化的组件，但控件自身由可被替换的项目委托（,item delegates,）组成。事实上，这意味着委托（,delegates,）成为,Qt Quick,项目，被实例化为控件的属性并与所在控件形成简单的父子关系。,（,3,）程序模块化和简单化。当需要将多个控件复合成一个控件时，往往将它们分隔进独立的构建代码块中，例如，一个典型的复合滚动条视图控件代码：,ScrollView,horizontalScrollBarPolicy:Qt.ScrollBarAlwaysOff,Flickable,/,它可以通过替换可绑定到任何,Flickable,的简单,ScrollBar,/,ScrollIndicator,控件来合成得到，如下：,Flickable,/,ScrollBar.vertical:ScrollBar ,2,2025/8/2 周六,22.1 Qt Quick Controls 2,简介,Qt Quick Controls 1,与,2,的,API,特性对比见表,22.1,（其中，“”表示支持，数字标注说明见表格下方）,特,性,Qt Quick Controls,Qt Quick Controls 2,类型化委托,预构建本地类型,运行时类型,/,主题改变,1,2,可用于桌面系统,可用于移动平台,3,可用于嵌入式系统,3,内部事件处理,QML,C+,1.,无官方公开支持，但技术上可能通过私有,API,实现。,2.,只有特殊样式的主题能在运行时改变，而样式是固定不变的。,3.,性能尚未优化,3,2025/8/2 周六,22.1.1,第一个,Qt Quick Controls 2,程序,【例】,（简单）,（,CH2201,）本章依然从一个简单的程序入手，系统地介绍,Qt Quick Controls 2,开发的基础知识。创建,Qt Quick Controls 2,程序，步骤如下。,（,1,）启动,Qt Creator,，单击主菜单“文件”“新建文件或项目,”项，弹出“,New File or Project,”对话框，选择项目“,Application,”下的“,Qt Quick Controls 2 Application,”模板，如图,22.1,所示。,4,2025/8/2 周六,22.1.1,第一个,Qt Quick Controls 2,程序,（,2,）单击“,Choose,”按钮，在“,Qt Quick Controls 2 Application,”对话框的“,Project Location,”页输入项目名称“,Qcontrol2Demo,”，并选择保存项目的路径，如图,22.2,所示。,5,2025/8/2 周六,22.1.1,第一个,Qt Quick Controls 2,程序,（,3,）单击“下一步”按钮，在“,Define Project Details,”页选择,Qt Quick Controls 2,样式类型为“,Default,”，如图,22.3,所示。,6,2025/8/2 周六,22.1.1,第一个,Qt Quick Controls 2,程序,（,4,）单击“下一步”按钮，在“,Kit Selection,”页系统默认已指定程序的编译器和调试器，直接单击“下一步”按钮，如图,22.4,所示。,7,2025/8/2 周六,22.1.1,第一个,Qt Quick Controls 2,程序,（,5,）接下来的“,Project Management,”页自动汇总出要添加到该项目的文件，如图,22.5,所示。单击“完成”按钮完成,Qt Quick Controls 2,应用程序的创建。,8,2025/8/2 周六,22.1.1,第一个,Qt Quick Controls 2,程序,单击,运行程序，出现“,Hello World,”窗口。该窗口包含两个标签页“,First,”和“,Second,”，其中“,First,”页上有一个按钮“,Press Me,”和一个文本框，在文本框中输入“,Hello World,”，单击“,Press Me,”按钮，在开发环境底部“应用程序输出”子窗口显示“,Button Pressed.Entered text:Hello World,”，如图,22.6,所示。,9,2025/8/2 周六,22.1.2 Qt Quick Controls 2,程序的构成,上面这个程序是由,Qt Creator,环境自动生成的，是一个典型的,Qt Quick Controls 2,应用程序，展开项目视图可以看到其目录结构，如图,22.7,所示，主要有三个文件：,main.qml,、,Page1.qml,和,Page1Form.ui.qml,。,10,2025/8/2 周六,22.1.2 Qt Quick Controls 2,程序的构成,1,main.qml,项目启动的主程序文件,main.qml,，代码,。,2,Page1.qml,Page1.qml,文件中只有一个,Page1Form,元素，它是项目默认,Page1,页面的主窗体元素，一般用来存放,Page1,页上各控件的事件处理代码，在本项目中是“,Press Me,”按钮的单击（,onClicked,）事件代码，如下：,import QtQuick 2.7,Page1Form,button1.onClicked:,console.log(Button Pressed.Entered text:+textField1.text);,11,2025/8/2 周六,22.1.2 Qt Quick Controls 2,程序的构成,3,Page1Form.ui.qml,Page1Form.ui.qml,是默认,Page1,页的主窗体实现文件，代码如下：,import QtQuick 2.7,import QtQuick.Controls 2.0/,导入,Qt Quick Controls 2.0,库,import QtQuick.Layouts 1.0/,导入,Qt Quick,布局库,Item/QML,通用的根元素,/*,定义属性别名，为在其他,.qml,文件中引用这,2,个控件,*/,property alias textField1:textField1,property alias button1:button1,RowLayout/,水平布局,anchors.horizontalCenter:parent.horizontalCenter,/,在页面上居中,anchors.topMargin:20/,距顶部,20,像素,anchors.top:parent.top/,顶端对齐,TextField/,文本框控件,id:textField1,placeholderText:qsTr(Text Field),Button/,按钮控件,id:button1,text:qsTr(Press Me),12,2025/8/2 周六,22.1.2 Qt Quick Controls 2,程序的构成,4,界面主题样式,Qt Quick Controls 2,支持三种类型的界面主题样式：,Default,（默认）、,Material,（质感）和普通（,Universal,），之前创建项目工程时选择的是默认样式（图,22.3,），可通过修改项目的,qtquickcontrols2,文件配置来更换样式类型。,qtquickcontrols2.conf,文件内容如下：,;This file can be edited to change the style of the application,;See Styling Qt Quick Controls 2 in the documentation for details:,;doc.qt.io/qt-5/qtquickcontrols2-styles.html,Controls,Style=Default,Universal,Theme=Light,;Accent=Steel,Material,Theme=Light,;Accent=BlueGrey,;Primary=BlueGray,13,2025/8/2 周六,22.1.2 Qt Quick Controls 2,程序的构成,其中，加黑处即需要修改配置的地方。将其改为,Material,，运行程序，看到质感的界面如图,22.8,所示；若改为,Universal,，则呈现的界面如图,22.9,所示。,14,2025/8/2 周六,22.2 Qt Quick Controls 2,与,1,的比较,22.2.1 ApplicationWindow,结构不同,在,Qt Quick Controls 1,中，主应用窗口,ApplicationWindow,由菜单栏（,Menu Bar,）、工具栏（,Tool Bar,）、内容显示区（,Content Area,）和底部状态栏（,Status Bar,）等构成，而,Qt Quick Controls 2,的主应用窗口结构则要简单得多，它仅由头部（,Header,）、内容（,Content,）和尾部（,Footer,）三部分组成，两者的区别如图,22.10,所示。,15,2025/8/2 周六,22.2.1 ApplicationWindow,结构不同,在,Qt Quick Controls 2,中，一般声明,ApplicationWindow,为整个应用的根元素，其最简单的代码形式如下：,import QtQuick.Controls 2.1,ApplicationWindow,visible:true,header:ToolBar,/.,footer:TabBar,/.,SwipeView,anchors.fill:parent,/.,16,2025/8/2 周六,22.2.1 ApplicationWindow,结构不同,1,ToolBar,工具栏,【例】,（简单）,（,CH2201-a1,）工具栏。,ToolBar,是应用广泛的上下文相关控件（,如导航按钮、搜索框等）的容器，其典型代码,。,运行效果如图,22.11,所示。,17,2025/8/2 周六,22.2.1 ApplicationWindow,结构不同,2,TabBar,选项标签栏,【例】,（简单）,（,CH2201-a2,）标签栏。,Qt Quick Controls 2,使用,TabBar/TabButton,控件组合来实现页面选项标签栏，以取代原,Qt Quick Controls 1,中,TabView/Tab,组合的功能。代码的形式如下：,TabBar,/.,width:parent.width,TabButton,text:FirstTab,/.,TabButton,text:SecondTab,/.,TabButton,text:ThirdTab,/.,18,2025/8/2 周六,22.2.1 ApplicationWindow,结构不同,一旦所有选项标签的宽度和加起来超过了屏幕宽度，标签栏就会自适应调整为可滑动切换状态，代码如下。,ApplicationWindow,visible:true,width:240,height:480,title:qsTr(,标签栏,),header:TabBar,id:bar,width:parent.width,Repeater,model:,第一页,第二页,第三页,第四页,第五页,TabButton,text:modelData,width:Math.max(100,bar.width/5),19,2025/8/2 周六,22.2.1 ApplicationWindow,结构不同,运行效果如图,22.12,所示。,20,2025/8/2 周六,22.2.2 Menu,不支持窗口主菜单,【例】,（简单）,（,CH2201-a1,续）,一个典型的工具栏弹出式菜单的例子。,代码如下。,运行程序，单击工具栏上右侧的,按钮，弹出菜单如图,22.13,所示。,21,2025/8/2 周六,22.2.3,控件实现差异,1,ButtonGroup,取代,ExclusiveGroup,组框,在原,Qt Quick Controls 1,中，成组的选项按钮由,ExclusiveGroup,组织在一起，例如,21.2.2,“学生信息表单”实例（实例文件,CH2102,）中，有如下代码：,GroupBox/*,组框,*/,id:group1,title:qsTr(,性别,),Layout.fillWidth:true,RowLayout,ExclusiveGroup id:sexGroup/*,互斥选项组,*/,RadioButton/*,单选按钮,*/,text:qsTr(,男,),checked:true,exclusiveGroup:sexGroup,Layout.minimumWidth:65/,设置控件所占最小宽度为65,RadioButton,text:qsTr(,女,),exclusiveGroup:sexGroup,Layout.minimumWidth:65,22,2025/8/2 周六,22.2.3,控件实现差异,这段代码实现了“性别”单选按钮组，而在,Qt Quick Controls 2,中，单选按钮组改由,ButtonGroup,组织，如下：,GroupBox/*,组框,*/,id:group1,title:qsTr(,性别,),Layout.fillWidth:true,RowLayout,ButtonGroup id:sexGroup/*,互斥选项组,*/,RadioButton/*单选按钮,*/,text:qsTr(,男,),checked:true,ButtonGroup.group:sexGroup,Layout.minimumWidth:65/,设置控件所占最小宽度为,65,RadioButton,text:qsTr(,女,),ButtonGroup.group:sexGroup,Layout.minimumWidth:65,23,2025/8/2 周六,22.2.3,控件实现差异,2,TextArea,滚动条实现方式不一样,在,Qt Quick Controls 1,中，,TextArea,组件继承自,ScrollView,，因此始终自带滚动条；而在,Qt Quick Controls 2,中，,TextArea,只是个简单的多行文本编辑器，可选择性地绑定到滑动页组件以提供滚动条功能。这样就可以在带滚动条的页面上使用,TextArea,而不会出现双重滚动区域嵌套的情形，从而避免了不确定性和由此带来的可用性问题。将,TextArea,绑定到一个滑动页组件的典型代码如下：,Flickable,id:flickable,anchors.fill:parent,TextArea.flickable:TextArea,text:TextArean.n.n.n.n.n.n,wrapMode:TextArea.Wrap,ScrollBar.vertical:ScrollBar ,24,2025/8/2 周六,22.2.3,控件实现差异,3,新增,Tumbler,翻选框控件,【例】,（简单,）,（,CH2201-a3,）翻选框控件使用。,实现步骤如下。,（,1,）新建,Qt Quick Controls 2,应用程序，项目名称为“,TumblerDialog,”。,（,2,）打开,main.qml,文件，修改代码如下：,程序运行效果如图,22.14,所示。,25,2025/8/2 周六,22.2.3,控件实现差异,4,一些界面控件显示风格的差异,【例】,（简单,）,（,CH2201-a4,）部分控件对比显示效果。,创建一个,Qt Quick Controls 2,应用程序，打开,main.qml,文件，编写代码如下：,运行程序，效果如图,22.15,所示。,26,2025/8/2 周六,22.3,滑动翻页及隐藏面板,【例】,（难度中等）,（,CH2202,）制作一个艺术品欣赏程序，采用多页面，每一页显示一幅艺术品图片，以及品名、作者、创作年代信息，单击界面下方的滑动点来切换页面，如图,22.16,所示。,27,2025/8/2 周六,22.3,滑动翻页及隐藏面板,每件艺术品还附带有详细的介绍信息，在界面右侧的隐藏面板内，用户可随时拉出来查看，运行效果如图,22.17,所示。,28,2025/8/2 周六,22.3,滑动翻页及隐藏面板,实现步骤如下。,（,1,）新建,Qt Quick Controls 2,应用程序，项目名称为“,ArtView,”。,（,2,）在项目工程目录中建一个,images,文件夹，其中放入本例要用到的三张图片，文件名为“蒙娜丽莎,.jpg,”、“大卫,.jpg,”、“圣母,.jpg,”。,（,3,）右击项目视图“资源”“,qml.qrc,”下的“,/,”节点，选择“添加现有文件,”项，从弹出对话框中选择这些图片打开，将它们加载到项目中。,（,4,）双击,项目视图打开,Page1Form.ui.qml,文件，编写代码,。,（,5,）,打开,Page1.qml,文件，编写代码,。,（,6,）,打开,main.qml,文件，修改代码,。,29,2025/8/2 周六,22.4,选项列表,【例】,（难度中等）,（,CH2203,）实现一个图书选择浏览程序，采用选项列表的形式，界面左边是所有书名的列表，用户选中的项以淡灰色背景突出显示，同时在右边图片框中显示对应该书的封面图片，运行效果如图,22.18,所示。,30,2025/8/2 周六,22.4,选项列表,实现步骤如下。,（,1,）新建,Qt Quick Controls 2,应用程序，项目名称为“,BookView,”。,（,2,）在项目工程目录中建一个,images,文件夹，其中放入本例要用到的所有图书的封面图片。,（,3,）右击项目视图“资源”qml.qrc,”下的“,/,”节点，选择“添加现有文件,”项，从弹出对话框中选择这些图片打开，将它们加载到项目中。,（,4,）双击项目视图打开,Page1Form.ui.qml,文件，将原有界面上的默认控件元素的代码注释掉：,import QtQuick 2.7,import QtQuick.Controls 2.0,import QtQuick.Layouts 1.0,Item,/*,.,*/,31,2025/8/2 周六,22.4,选项列表,（,5,）打开,Page1.qml,文件，将其中,button1.onClicked,事件处理代码注释掉：,import QtQuick 2.7Page1Form,/*,.,*/,（,6,）,打开,main.qml,文件，修改代码,。,32,2025/8/2 周六,22.5,带功能按钮的列表,【例】,（较难）,（,CH2204,）实现一个购书程序，依然采用选项列表的形式，但在列表的每个书目上增加“购买”和“移除”两个按钮，初始时两按钮均隐藏不可见，向左滑动条目才能呈现出来，单击“购买”按钮，在列表下方图片框中加载所购书的封面图片，单击“移除”按钮，则删除该书目，如图,22.19,所示。,33,2025/8/2 周六,22.5,带功能按钮的列表,单击封面图片右边的“结账”按钮，弹出组框供用户选择付款方式，运行效果如图,22.20,所示34,2025/8/2 周六,22.5,带功能按钮的列表,实现步骤如下。,（,1,）新建,Qt Quick Controls 2,应用程序，项目名称为“,BookBuy,”。,（,2,）在项目工程目录中建一个,images,文件夹，其中放入本例要用到的所有图书的封面图片。,（,3,）右击项目视图“资源”“,qml.qrc,”下的“,/,”节点，选择“添加现有文件,”项，从弹出对话框中选择这些图片打开，将它们加载到项目中。,（,4,）分别打开项目中的,Page1Form.ui.qml,和,Page1.qml,文件，将原有的一部分默认代码注释掉（注释的方式同前例,CH2203,），从略。,（,5,）,打开,main.qml,文件，修改代码,。,35,2025/8/2 周六,