Fork me on GitHub

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{
spacing:20
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{
spacing:20
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
 
x:(parent.width-width)/2
y:(parent.height-height)/2
 
title:"Message"
 
Label{
text:"Loremipsumdolorsitamet..."
}
}
}
 
界面 代码
Button{
id:button
text:"Confirmation"
anchors.horizontalCenter:parent.horizontalCenter
width:buttonWidth
onClicked:confirmationDialog.open()
 
Dialog{
id:confirmationDialog
 
x:(parent.width-width)/2
y:(parent.height-height)/2
parent:Overlay.overlay
 
modal:true
title:"Confirmation"
standardButtons:Dialog.Yes|Dialog.No
 
Column{
spacing:20
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
 
x:(parent.width-width)/2
y:(parent.height-height)/2
width:Math.min(page.width,page.height)/3*2
contentHeight:logo.height*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
spacing:20
width:parent.width
 
Image{
id:logo
width:parent.width/2
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
anchors.rightMargin:-contentDialog.rightPadding+1
}
}
}
}
 

界面 代码
Button{
text:"Input"
anchors.horizontalCenter:parent.horizontalCenter
width:buttonWidth
onClicked:inputDialog.open()
 
Dialog{
id:inputDialog
//直接设置在窗体中间
x:(parent.width-width)/2
y:(parent.height-height)/2
parent:Overlay.overlay
 
focus:true
modal:true
title:"Input"
standardButtons:Dialog.Ok|Dialog.Cancel
 
ColumnLayout{
spacing:20
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{
spacing:20
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{
spacing:20
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{
spacing:40
width:parent.width
 
Label{
width:parent.width
wrapMode:Label.Wrap
horizontalAlignment:Qt.AlignHCenter
text:"PageIndicatorisusedtoindicatethecurrentlyactivepageinacontainerofpages."
}
 
PageIndicator{
count:5
currentIndex:2
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{
spacing:20
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
value:50
anchors.horizontalCenter:parent.horizontalCenter
editable:true
}
 
 
17、StackView是重要的,带有生命周期的View界面
界面 代码
StackView{
id:stackView
initialItem:page
 
Component{
id:page
 
Pane{
id:pane
width:parent?parent.width:0//TODO:fixnullparentondestruction
 
Column{
spacing:40
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"
enabled:stackView.depth>1
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
currentIndex:1
anchors.fill:parent
 
Repeater{
model:3
 
Pane{
width:view.width
height:view.height
 
Column{
spacing:40
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{
model:3
 
Pane{
width:swipeView.width
height:swipeView.height
 
Column{
spacing:40
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.timeout:5000
ToolTip.visible:pressed
ToolTip.text:"Thisisatooltip."
}
 
 
25、Tumbler就是从几个简单的数字中选择一个
界面 代码
Tumbler{
model:10
anchors.horizontalCenter:parent.horizontalCenter
}
 
 
 
三、存在问题和下步计划
gallary例子较为全面地展现了controls2的使用,但是存在以下三个问题
一是按照名称分类,略为混乱;二是输入控件没有值的获取,不很完整;三是种类太多,难以把握全局。
下一步机会对整个gallary进行重构,这个一篇博客就太长了,我们放在下一篇(http://www.cnblogs.com/jsxyhelu/p/8452474.html)。
感谢阅读至此,希望有所帮助!
 





目前方向:图像处理,人工智能
posted @ 2018-02-16 08:10  jsxyhelu  阅读(3519)  评论(0编辑  收藏  举报