QML学习之基本元素RadioButton, CheckBox, GroupBox, ComboBox介绍

       本文介绍互斥分组（ExclusiveGroup）属性及其运用。互斥分组本身是不可见元素，用于将若干个可选择元素组合在一起，供用户选择其中的一个选项。两种方式使用互斥分组属性：

       1）在ExclusiveGroup对象中定义RadioButton,  CheckBox, Action等元素，此时不需要设置它们的exclusiveGroup属性; Qt助手中是这样描述的:ExclusiveGroup
can contain several Action
items, and those will automatically get their Action::exclusiveGroup
property assigned.

例子如下:

ExclusiveGroup {

id: radioInputGroup

Action {

id: dabRadioInput

text: "DAB"

checkable: true

}

Action {

id: fmRadioInput

text: "FM"

checkable: true

}

Action {

id: amRadioInput

text: "AM"

checkable: true

}

}

       2）定义一个只设置了id属性的ExclusiveGroup 对象，在别处定义RadioButton，CheckBox，Action等元素时通过id初始化这些元素的exclusiveGroup属性。例子如下：

GroupBox {

id: group2

title: qsTr("Tab Position")

Layout.fillWidth: true

RowLayout {

        ExclusiveGroup { id: tabPositionGroup }

RadioButton {

id: topButton

text: qsTr("Top")

checked: true

exclusiveGroup: tabPositionGroup

Layout.minimumWidth: 100

}

RadioButton {

id: bottomButton

text: qsTr("Bottom")

exclusiveGroup: tabPositionGroup

Layout.minimumWidth: 100

}

}

}

       说明：current属性指向互斥分组中第一个选中的元素。

下面介绍几个使用场景：

    A) RadioButton 
  
    RadioButton用于多选一的场景，使用时需要通过exclusiveGroup属性为其指定一个分组，它也可以和GroupBox结合使用。要使用RadioButton
,需要导入Controls模块，这样:
    import QtQuick.Controls 1.2
    text属性存储单选按钮的文本;单选按钮还有一个指示选中与否的小图标，一般显示在文本前面。 
   

    checked属性指示RadioButton是否被选中，也司一以设置它来选中或取消选中。

    hovered是只读属性，指示鼠标是否悬停在RadioButton上。
    pressed属性在按钮被按下时为true;当单选按钮被按下时，activeFocusOnPress属性为true，按钮获得焦点。如果你点击了一个单选按钮，则会触发clicked()信号。
    style属性设置自定义的RadioButtonStyle对象，可以定制RadioButton的外观。使用时，需要引入QtQuick.Controls.Styles 1.x模块。background属性定制背景，indicator定制选中指示图标，label定制单选按键的文本，它们的类型都是Component。spacing指定图标和文本之间的间隔。control指向使用style的RadioButton对象，组件内的对象可以通过control访问RadioButton的各种属性，如focus,
activeFocus, hovered等。
    B) CheckBox
    CheckBox，复选框，就是可以在选项中选择一个或者多个选项，而且这些选项互不影响。与RadioButton相比，CheckBox
多了两个属性，partiallyCheckedEnabled属性指示是否允许部分选中状态，默认为false;
 checkedState记录选中状态，它的值可能是Qt.UnChecked ,Qt.Checked或Qt.PartiallyChecked。如果使用CheckBox时，指定了exclusiveGroup属性，则可以达到多选一的效果。
    style属性和RadioButton一样，可使用CheckBoxStyle自定义，不同点是control属性的类型是CheckBox。
   C) GroupBox
    GroupBox(分组框)，用于将其他的窗口部件组合在一起显示，最常用的是将单选按键或复选框放在分组框中显示，不过也可以将任何控件放在分组框内。使用分组框需要
import QtQuick.Controls 1.x 模块。
    分组框一般在顶部有一个标题((
title属性)，说明其用途。默认带有边框，不过可以设置flat属性为true来去掉左、右、底三条边的边框。
    GroupBox本身也支持选中，可以通过checkable属性来设置。当你设置checkable为true时，它的标题栏会出现一个复选框，如果你勾选了它，那么它的子控件就是可选中的，否则它的子控件就不可操作。当分组框可选时，checked属性保存其选中状态。分组框的尺寸根据它的孩子们的尺寸计算而来。如果你想使用锚布局来管理分组框的孩子们，则需要显式指定分组框本身的尺寸。
       contentItem指向一个Item对象，代表分组框的内容区，在分组框内声明的children，它们的parent会被自动设置为contentItem。而如果要动态创建分组框的children，则需要显式地将contentItem指定为它们的parent。
    D) ComboBox

    ComboBox，即组合框。
    组合框由一个列表框和一个标签控件(或编辑控件)组成。列表框部分可以是一直显示的，也可以是隐藏的，在用户点击编辑控件边上的按钮(下拉箭头)时显示下拉列表框。列表框中当前选中的项(如果有的话)显示在标签控件或编辑控件中。

    ComboBox的下拉列表是使用Menu实现的，列表内的每个条目对应一个MenuItem。详情可以查看Qt 助手。
    editable属性决定下拉列表框的编辑控件是否可以编辑，默认为false，为true时可以编辑，此时editText保存编辑框的内容，同时也可以设置validator属性来限制用户可以输入的文本。当编辑完成时，ComboBox会发射accepted信号。ComboBox的编辑框使用TextInput(详细内容见上一篇文档)，因此可以参照TextInput来理解ComboBox提供的编辑功能，比如validator支持IntValidator,
DoubleValidator, RegExpValidator,  accepted信号会受到validator的影响，弹出下拉列表框后，用户选择列表中的一个条目，此时currentIndex,
currentText属性就会变化，同时activated信号也会发射。
    ComboBox的find()方法用于查找列表中是否存在指定的字符串，对于可编辑的ComboBox，向列表中添加条目时可以使用此方法来滤重；textAt()返回指定索引位置的字符串；selectAll()可以选中可编辑ComboBox的编辑框内的所有文本。
    下拉列表的数据从model属性来。model可以是一个简单的字符串列表，如["TV"
, "CD Player" , "Set Top Box" , "Router"];也可以是ListModel, 通过textRole属性指定列表条目对应的model内的role，如果不设定，则默认使用第一个role。比如下面的ComboBox示例使用的ListModel，内部数据有text和color两个角色，如果不设定ComboBox的textRole，则会默认使用model的text;如果设定textRole:
"color"，则使用model的color角色。

ComboBox{

editable: true

model: ListModel{

ListElement{

text:"Banana"

color: "Yellow"

}

}

textRole: "color"

}

    count属性返回ComboBox下拉列表内的条目个数。
    style属性可指定一个ComboBoxStyle对象来定制ComboBox。其实在ComboBox.qml中，为style指定了一个动态创建的ComboBoxStyle对象，看源码:style:Qt
.createComponent(Settings.style+"/ComboBoxStyle.qml"，comboBox)
    从源码可以看出一个功能完备的ComboBoxStyle，充分地展示Qt
Quick"一切风格皆可定制”的特色。那么ComboBoxStyle到底能干什么。当ComboBox不可编辑时，它是一个Button，显示currentText，响应点击弹出下拉列表
框。这个Button的background和label可以通过ButtonStyle定制。ComboBoxStyle
恰恰有background和label两个类型为Component的属性，就是用来定制背景和文本的。
    当ComboBox可编辑时，一个TextInput对象叠加到Button上面，TextInput左边与Button左边对齐，右边留一些位置给那个代表“下拉”含义的小图标—这个小图标的宽度由ComboBoxStyle的dropDownButtonWidth属性来决定。control指向ComboBox实例，而renderType一般不用设置。