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: ...
随机推荐
- Ubuntu 下 kdevelop下 怎么向主函数传递参数
1.打开工程 2.点击窗口上的运行”--“配置启动器” 3.左栏选择要传递参数的工程名,在参数一栏中,输入参数“ubuntu.png”,再输入“工作目录”.点击OK,运行就可以了.
- php安装redis扩展'checking for igbinary includes... configure: error: Cannot find igbinary.h'解决方法
今天准备给yii2安装redis扩展,先安装了redis服务,然后安装redis php官方扩展,在make的时候提示' checking for igbinary includes... confi ...
- MyBatis 强大之处 多环境 多数据源 ResultMap 的设计思想是 缓存算法 跨数据库 spring boot rest api mybaits limit 传参
总结: 1.mybaits配置工2方面: i行为配置,如数据源的实现是否利用池pool的概念(POOLED – This implementation of DataSource pools JDBC ...
- SpringMVC：JSON形式输出(基于Fastjson)
在Spring3.0中,@ResponseBody标记可以将对象"封装"为JSON形式的数据,并输出,下面的例子中使用的是阿里的Fastjson JSONaz解析工具,在sprin ...
- 非极大值抑制(NMS)
非极大值抑制顾名思义就是抑制不是极大值的元素,搜索局部的极大值.这个局部代表的是一个邻域,邻域有两个参数可变,一个是邻域的维数,二是邻域的大小.这里不讨论通用的NMS算法,而是用于在目标检测中提取分数 ...
- Linux发展历史图
Linux发展历史图 http://futurist.se/gldt/wp-content/uploads/12.10/gldt1210.svg
- React Native开发之IDE（Atom+Nuclide）安装，运行，调试
版权声明:本文为博主原创文章,如需转载请注明出处 目录(?)[-] 前言 MacWindowsLinux 准备工作 安装Atom 安装Nuclide 新建一个工程 自动补全 类型标注 语法检查 跳 ...
- 2017php经典面试题
1.PHP语言的一大优势是跨平台,什么是跨平台?一.PHP基础: PHP的运行环境最优搭配为Apache+MySQL+PHP,此运行环境可以在不同操作系统(例如windows.Linux等)上配置,不 ...
- Elasticsearch Java API—多条件查询(must)
多条件设置 //多条件设置 MatchPhraseQueryBuilder mpq1 = QueryBuilders .matchPhraseQuery("pointid",&qu ...
- （转）从零开始的Spring Session(一)
Session和Cookie这两个概念,在学习java web开发之初,大多数人就已经接触过了.最近在研究跨域单点登录的实现时,发现对于Session和Cookie的了解,并不是很深入,所以打算写两篇 ...