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属性)，说明其用途。默认带有边框，不过可以设置fl at属性为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一般不用设置。