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 : "Lorem ipsum dolor sit amet..." } } }

界面

代码

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 : "The document has been modified.\nDo you want to save your changes?"

}

CheckBox {

text : "Do not ask again"

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 : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus "

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 : "Please enter the credentials:"

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 : "PageIndicator is used to indicate the currently active page in a container of pages." } 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: fix null parent on destruction

Column {

spacing : 40

width : parent .width

Label {

width : parent .width

wrapMode : Label .Wrap

horizontalAlignment : Qt .AlignHCenter

text : "StackView provides a stack-based navigation model which can be used with a set of interlinked pages. "

+ "Items are pushed onto the stack as the user navigates deeper into the material, and popped off again "

+ "when he chooses to go back."

}

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 : "SwipeView provides a navigation model that simplifies horizontal paged scrolling. "

+ "The page indicator on the bottom shows which is the presently active page."

}

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 : "TabBar is a bar with icons or text which allows the user"

+ "to switch between different subtasks, views, or modes."

}

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 : "This is a tool tip." }