QtQuickcontrols2控件使用参考
随着Qt的版本升级，其自带的controls控件库也不断升级，目前已经到了2.3的版本。本文通过解读Qt自带的gallery例程，说明新版本controls控件库的相关特性。其具体位置于：
因为相关的中文资料比较缺乏，所以这里的内容会详细整理，某种意义上可以当作使用手册来使用。
一、概况
运行界面为，应该说就是一个控件的展示集合
文件结构为：
二、细节
具体内容，按照名称来划分
1、BusyIndicator主要用于忙等显示，一般来说都是覆盖整个界面，通过设置visible来隐藏或者显示；
| 界面 | 代码 |
 |
BusyIndicator{
id:busyindicator
visible:true
anchors.horizontalCenter:parent.horizontalCenter
}
|
2、Button就是最简单的按钮控件，controls2提供的button带有简单的界面
| 界面 | 代码 |
 |
ColumnLayout{
anchors.horizontalCenter:parent.horizontalCenter
Button{
text:"First"
Layout.fillWidth:true
}
Button{
id:button
text:"Second"
highlighted:true
Layout.fillWidth:true
}
Button{
text:"Third"
enabled:false
Layout.fillWidth:true
}
}
|
3、CheckBox最简单的选中/不选中控件，controls2提供的CheckBox带有简单的界面
| 界面 | 代码 |
 |
Column{
anchors.horizontalCenter:parent.horizontalCenter
CheckBox{
text:"First"
checked:true
}
CheckBox{
text:"Second"
}
CheckBox{
text:"Third"
checked:true
enabled:false
}
}
|
4、ComboBox是最简单的下拉框控件，controls2提供的ComboBox包含可以修改正文内容和不可以修改内容2个
| 界面 | 代码 |
 |
ComboBox{
model:["First","Second","Third"]
anchors.horizontalCenter:parent.horizontalCenter
}
////////////////////////////////////////////////////////////////////////////////////////////////////
ComboBox{
editable:true
model:ListModel{
id:model
ListElement{text:"Banana"}
ListElement{text:"Apple"}
ListElement{text:"Coconut"}
}
onAccepted:{
if(find(editText)===-1)
model.append({text:editText})
}
anchors.horizontalCenter:parent.horizontalCenter
}
|
5、DelayButton就是很有意思的按钮控件，需要按下一段时间后才会触发
| 界面 | 代码 |
 |
DelayButton{
text:"DelayButton"
anchors.horizontalCenter:parent.horizontalCenter
}
|
6、Dial就是类似转盘的控件，提供的是输入的结果
| 界面 | 代码 |
 |
Dial{
value:0.5
anchors.horizontalCenter:parent.horizontalCenter
}
|
7、Dialog就是窗体控件，controls2提供了集成的显示，基本上还是提供了一个Dialog的基础空间，然后在其上面画各种样式。注意dialog的model设置，就是是否模态显示的意思;standardButtons: Dialog.Yes | Dialog.No就是标准控件的意思
| 界面 | 代码 |
 |
Button{
text:"Message"
anchors.horizontalCenter:parent.horizontalCenter
width:buttonWidth
onClicked:messageDialog.open()
Dialog{
id:messageDialog
title:"Message"
Label{
text:"Loremipsumdolorsitamet..."
}
}
}
|
| 界面 | 代码 |
 |
Button{
id:button
text:"Confirmation"
anchors.horizontalCenter:parent.horizontalCenter
width:buttonWidth
onClicked:confirmationDialog.open()
Dialog{
id:confirmationDialog
parent:Overlay.overlay
modal:true
title:"Confirmation"
standardButtons:Dialog.Yes|Dialog.No
Column{
anchors.fill:parent
Label{
text:"Thedocumenthasbeenmodified.\nDoyouwanttosaveyourchanges?"
}
CheckBox{
text:"Donotaskagain"
anchors.right:parent.right
}
}
}
}
|
这种模式用来显示“关于”非常适合,使用的是Flickable
| 界面 | 代码 |
 |
Button{
text:"Content"
anchors.horizontalCenter:parent.horizontalCenter
width:buttonWidth
onClicked:contentDialog.open()
Dialog{
id:contentDialog
*2
parent:Overlay.overlay
modal:true
title:"Content"
standardButtons:Dialog.Close
Flickable{
id:flickable
clip:true
anchors.fill:parent
contentHeight:column.height
Column{
id:column
width:parent.width
Image{
id:logo
anchors.horizontalCenter:parent.horizontalCenter
fillMode:Image.PreserveAspectFit
source:"../images/qt-logo.png"
}
Label{
width:parent.width
text:"Loremipsumdolorsitamet,consecteturadipiscingelit.Nuncfinibus"
wrapMode:Label.Wrap
}
}
ScrollIndicator.vertical:ScrollIndicator{
parent:contentDialog.contentItem
anchors.top:flickable.top
anchors.bottom:flickable.bottom
anchors.right:parent.right
}
}
}
}
|
| 界面 | 代码 |
 |
Button{
text:"Input"
anchors.horizontalCenter:parent.horizontalCenter
width:buttonWidth
onClicked:inputDialog.open()
Dialog{
id:inputDialog
//直接设置在窗体中间
parent:Overlay.overlay
focus:true
modal:true
title:"Input"
standardButtons:Dialog.Ok|Dialog.Cancel
ColumnLayout{
anchors.fill:parent
Label{
elide:Label.ElideRight
text:"Pleaseenterthecredentials:"
Layout.fillWidth:true
}
TextField{
focus:true
placeholderText:"Username"
Layout.fillWidth:true
}
TextField{
placeholderText:"Password"
echoMode:TextField.PasswordEchoOnEdit
Layout.fillWidth:true
}
}
}
}
|
8、Delegates就是委托按钮控件，能够将其他控件集成在一起显示出来。它本身设计到涉及到设计模式，较为复杂，后面专题讨论。
| 界面 | 代码 |
 |
|
9、Frame就是将若干控件继承在一起，有互斥属性
| 界面 | 代码 |
 |
Frame{
anchors.horizontalCenter:parent.horizontalCenter
Column{
width:page.itemWidth
RadioButton{
text:"First"
checked:true
width:parent.width
}
RadioButton{
id:button
text:"Second"
width:parent.width
}
RadioButton{
text:"Third"
width:parent.width
}
}
}
|
10、GroupBox和Frame非常类似
| 界面 | 代码 |
 |
GroupBox{
title:"Title"
anchors.horizontalCenter:parent.horizontalCenter
Column{
width:page.itemWidth
RadioButton{
text:"First"
checked:true
width:parent.width
}
RadioButton{
id:button
text:"Second"
width:parent.width
}
RadioButton{
text:"Third"
width:parent.width
}
}
}
|
11、PageIndicator能够简单地将多幅界面包含在一起，我看用来做广告是不错。但是需要注意PageIndicator只是显示在最下面的那几个小点点，如果需要显示滑动界面，就必须要和其他控件配合使用
| 界面 | 代码 |
 |
ScrollablePage{
id:page
Column{
width:parent.width
Label{
width:parent.width
wrapMode:Label.Wrap
horizontalAlignment:Qt.AlignHCenter
text:"PageIndicatorisusedtoindicatethecurrentlyactivepageinacontainerofpages."
}
PageIndicator{
anchors.horizontalCenter:parent.horizontalCenter
}
}
}
|
12、ProgressBar就是运行状态显示界面。如果你对完成度能够掌握的话，就可以使用ProgressBar替代busyindicator
| 界面 | 代码 |
 |
ProgressBar{
id:bar
value:0.5
anchors.horizontalCenter:parent.horizontalCenter
}
ProgressBar{
indeterminate:true
anchors.horizontalCenter:parent.horizontalCenter
}
|
13、RadioButton就是单项选择空间，一般需要包含在互斥的控件中去
| 界面 | 代码 |
 |
Column{
anchors.horizontalCenter:parent.horizontalCenter
RadioButton{
text:"First"
}
RadioButton{
text:"Second"
checked:true
}
RadioButton{
text:"Third"
enabled:false
}
}
|
14、RangeSlider不仅可以选择结束，而且可以选择开始
| 界面 | 代码 |
 |
RangeSlider{
id:slider
first.value:0.25
second.value:0.75
anchors.horizontalCenter:parent.horizontalCenter
}
RangeSlider{
orientation:Qt.Vertical
first.value:0.25
second.value:0.75
anchors.horizontalCenter:parent.horizontalCenter
}
|
15、RangeSlider的小兄弟Slider
| 界面 | 代码 |
 |
Slider{
id:slider
value:0.5
anchors.horizontalCenter:parent.horizontalCenter
}
Slider{
orientation:Qt.Vertical
value:0.5
anchors.horizontalCenter:parent.horizontalCenter
}
|
16、SpinBox显示加加减减的界面
| 界面 | 代码 |
 |
SpinBox{
id:box
anchors.horizontalCenter:parent.horizontalCenter
editable:true
}
|
17、StackView是重要的，带有生命周期的View界面
| 界面 | 代码 |
 |
StackView{
id:stackView
initialItem:page
Component{
id:page
Pane{
id:pane
//TODO:fixnullparentondestruction
Column{
width:parent.width
Label{
width:parent.width
wrapMode:Label.Wrap
horizontalAlignment:Qt.AlignHCenter
text:"StackViewprovidesastack-basednavigationmodelwhichcanbeusedwithasetofinterlinkedpages."
+"Itemsarepushedontothestackastheusernavigatesdeeperintothematerial,andpoppedoffagain"
+"whenhechoosestogoback."
}
Button{
id:button
text:"Push"
anchors.horizontalCenter:parent.horizontalCenter
width:Math.max(button.implicitWidth,Math.min(button.implicitWidth*2,pane.availableWidth/3))
onClicked:stackView.push(page)
}
Button{
text:"Pop"
width:Math.max(button.implicitWidth,Math.min(button.implicitWidth*2,pane.availableWidth/3))
anchors.horizontalCenter:parent.horizontalCenter
onClicked:stackView.pop()
}
}
}
}
}
|
18、ScrollBar最重要的功能，就是可以通过拖动的方式将界面扩展，注意它的侧边栏
| 界面 | 代码 |
 |
ScrollBar.vertical:ScrollBar{}
|
19、swipeview另一种可以扩展界面的View，注意这是和PageIndicator 结合起来使用的
| 界面 | 代码 |
 |
SwipeView{
id:view
anchors.fill:parent
Repeater{
Pane{
width:view.width
height:view.height
Column{
width:parent.width
Label{
width:parent.width
wrapMode:Label.Wrap
horizontalAlignment:Qt.AlignHCenter
text:"SwipeViewprovidesanavigationmodelthatsimplifieshorizontalpagedscrolling."
+"Thepageindicatoronthebottomshowswhichisthepresentlyactivepage."
}
Image{
source:"../images/arrows.png"
anchors.horizontalCenter:parent.horizontalCenter
}
}
}
}
}
PageIndicator{
count:view.count
currentIndex:view.currentIndex
anchors.bottom:parent.bottom
anchors.horizontalCenter:parent.horizontalCenter
}
|
20、Switch是最简单的开关控件
| 界面 | 代码 |
 |
Switch{
text:"First"
}
Switch{
text:"Second"
checked:true
}
Switch{
text:"Third"
enabled:false
}
|
21、TabBar就是tab构成的bar，和indicator类似，也是必须结合swipeview来使用
| 界面 | 代码 |
 |
SwipeView{
id:swipeView
anchors.fill:parent
currentIndex:tabBar.currentIndex
Repeater{
Pane{
width:swipeView.width
height:swipeView.height
Column{
width:parent.width
Label{
width:parent.width
wrapMode:Label.Wrap
horizontalAlignment:Qt.AlignHCenter
text:"TabBarisabarwithiconsortextwhichallowstheuser"
+"toswitchbetweendifferentsubtasks,views,ormodes."
}
Image{
source:"../images/arrows.png"
anchors.horizontalCenter:parent.horizontalCenter
}
}
}
}
}
footer:TabBar{
id:tabBar
currentIndex:swipeView.currentIndex
TabButton{
text:"First"
}
TabButton{
text:"Second"
}
TabButton{
text:"Third"
}
}
|
22、TextArea文字输入区域
| 界面 | 代码 |
 |
TextArea{
width:Math.max(implicitWidth,Math.min(implicitWidth*3,pane.availableWidth/3))
anchors.horizontalCenter:parent.horizontalCenter
wrapMode:TextArea.Wrap
text:"TextArea\n...\n...\n..."
}
|
23、TextField是TextArea的亲弟兄
| 界面 | 代码 |
 |
TextField{
id:field
placeholderText:"TextField"
anchors.horizontalCenter:parent.horizontalCenter
}
|
24、ToolTip就是显示ToolTip
| 界面 | 代码 |
 |
Button{
text:"Tip"
anchors.horizontalCenter:parent.horizontalCenter
ToolTip.visible:pressed
ToolTip.text:"Thisisatooltip."
}
|
25、Tumbler就是从几个简单的数字中选择一个
| 界面 | 代码 |
 |
Tumbler{
anchors.horizontalCenter:parent.horizontalCenter
}
|
三、存在问题和下步计划
gallary例子较为全面地展现了controls2的使用，但是存在以下三个问题
一是按照名称分类，略为混乱；二是输入控件没有值的获取，不很完整；三是种类太多，难以把握全局。
下一步机会对整个gallary进行重构，这个一篇博客就太长了，我们放在下一篇(http://www.cnblogs.com/jsxyhelu/p/8452474.html)。
感谢阅读至此，希望有所帮助！
QtQuickcontrols2控件使用参考的更多相关文章
- RichEdit控件 SDK 参考手册
RichEdit控件 SDK 参考手册 摘要: 本文对Rich Edit控件底层消息机制进行了讲解,以期读者对Windows平台下的Rich Edit控件有一个更深入的认识,同时对于使用Win32 S ...
- qtquickcontrols2控件集（使用参考重构）
随着Qt的版本升级,其自带的controls控件库也不断升级,目前已经到了2.3的版本.本文通过重构并且解读Qt自带的gallery例程,说明新版本controls控件库的相关特性 来自 ...
- Windows窗口样式速查参考，Delphi窗口控件的风格都有它们来决定（附Delphi何时用到它们，并举例说明）good
/* 窗口样式参考列表(都是GetWindowLong的GWL_STYLE风格,都是TCreateParams.Sytle的一部分),详细列表如下:https://msdn.microsoft.com ...
- 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件
目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...
- WinForm 简单蒙版实现控件遮盖
在Web上面要实现一个遮罩层或者说是蒙版吧,有了DIV那不算什么难事,只要给div定好位置和大小,把颜色的Alpha值设一下就有透明的效果.不过在Winform中实现起来就没那么简单了事.尝试过用一个 ...
- 《ASP.NET1200例》ListView 控件与DataPager控件的结合<二>
ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示 为什么使用ListView+DataPager的方式实现分页显示? .net提供的诸多数据绑定控件,每一种都有它自己 ...
- iOS 利用constraint实现2个控件上下的空白是相等的
说的有点乱,先看个图把 其实这个constrant的目的就是控制两个方形的控件上方和下方的空白大小. 对于每一个方块来说,他们上方和下方的空白是相同的.这种“居中”的设计到处可见.一个控件想实现这种居 ...
- 在WinForm中使用委托来在其他线程中改变控件的显示
假设winform中有两个控件: 1.ListView用来显示进度的文本提示,ID:listView_progressInfo 2.ProgressBar用来显示进度,ID:progressBar1 ...
- Xamarin.forms 自定义tabview控件
一 问题描述 forms本身ui代码是翻译为平台原生代码,forms按照xaml技术进行对android和ios两种ui模型进行公共抽象出了几种page和view,在空杯博客已经有详细介绍 http: ...
随机推荐
- JavaScript中的对象描述符(属性特性)
我们先创建一个对象: var person = { name: "Nicholas", _job: "Software Engineer", sayName: ...
- java内存区域-方法区
方法区(Method Area)与java堆一样,是各个线程共享的内存区域,它用于存储已被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.虽然java虚拟机规范把方法区描述为堆的一个 ...
- sass不识别中文字符的问题
进入Koala安装目录,例如:C:\Program Files (x86)\Koala\rubygems\gems\sass-3.4.9\lib\sass 或者 C:\Ruby\lib\ruby\ge ...
- mysql transaction 事务
1.事务简介 一个"最小的"不可再分的"工作单元". 一个事务通常对应了一个完整的业务.如:银行的转账功能,a转账给b,a扣钱,b加钱. 一个事务包含一条或多条 ...
- 前端 HTML 常用标签 head标签相关内容
HTML常用标签 head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方 ...
- MYSQL流程图
MYSQL流程图
- 五、Mosquitto 高级应用之权限管理
本文将讲解 Mosquitto 权限管理.如果还没有搭建 Mosquitto 服务的可以参考我的另外两篇文章<< 一.Mosquitto 介绍&安装>> << ...
- Appium-Python-Client安装
官网是这个:https://pypi.org/project/Appium-Python-Client/#files 下载下来后是这样的文件不知道怎么安装: 不用下载,直接这样就可以 了~~ 安装后导 ...
- YUV编码格式
YUV是被欧洲电视系统采用的一种颜色编码方法.在现代彩色电视系统中,通常采用三管彩色摄影机或彩色CCD摄像机取像,然后把取 得的彩色图像信号经过分色,分别放大校正后得到RGB,在经过矩阵变换电路,得到 ...
- yii2常用的migrate命令
开发中经常会用到的方法小结: 1../yii migrate xxx_xx 在表中插入某字段 : public function up() {$this->addColumn('{{applic ...