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: ...
随机推荐
- 【转】C#中的Stream
C# 温故而知新:Stream篇(—) C# 温故而知新:Stream篇(二) C# 温故而知新:Stream篇(三) C# 温故而知新:Stream篇 (四) C# 温故而知新:Stream篇(五) ...
- JSON.stringify() 格式化 输出log
调试程序的过程中,我们打印一个日志: console.log(object);,其中object是任意的一个json对象. 在控制台就会看到[object object],而看不到具体的内容. 我们可 ...
- CAP 一致性协议及应用解析
https://mp.weixin.qq.com/s/26x8O1bRzurl84e3nM6TTA CAP 一致性协议及应用解析 原创: 有赞技术 有赞coder 1周前 文 | 云开 on 用户中心 ...
- Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...
- oracle动态视图（一）stat
1v$mystat,v$sesstat,v$sysstat是用来分别统计用户级,会话级,系统级信息的. SID NUMBER STATI ...
- 【Echarts】图表用echarts【待完善】
echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox ...
- js-jquery-数组遍历
一.原生方法支持 1.普通for循环 for(j = 0; j < arr.length; j++) { } 说明:性能很高,但是仍可以优化. 2.优化版for循环[推荐] for(j = 0, ...
- [py]列表生成式-支持条件,多值的拼接
列表生成式 代码简洁一些 支持多条件, 过滤,或拼接某些值 支持返回多值 是一种生成式 # 生成一个列表 print(list(range(1, 11))) # 生成一个列表x^2 ## 方法1: 返 ...
- Git warning：LF will be replaced by CRLF in readme.txt的原因与解决方案
今天用Git bash遇到的问题,看了几个回答之后发现一个比较有价值的,给大家分享一下,其他很多的回答都有很或多或少存在一些弊端. 原回答地址在stackoverflow上,附上链接--http:// ...
- python中安装requests后又提示错误
刚刚我们是安装成功了的,新建一个项目又提示红色的波浪线了,,郁闷了 解决方法:点击pycharm菜单:File-Settings,键入Project Interpreter,我电脑python安装路径 ...