树莓派Qt系列教程17：组合框ComboBox

前言

ComboBox的属性

• acceptableInput : bool，此属性控制组合框是否包含可编辑文本字段中的可接受文本
• count : int，组合框中的项目数
• currentIndex : int，保存组合框中当前项的索引，只读
• currentText : string，组合框中当前项的文本，只读
• delegate : Component，包含一个委托，该委托在组合框弹出窗口中显示项目
• displayText : string，保存组合框按钮上显示的文本
• down : bool，保存组合框按钮是否在视觉上向下
• editText : string，指示将文本保存在可编辑组合框的文本字段中
• editable : bool，控制组合框是否可编辑
• flat : bool，控制组合框按钮是否平坦
• highlightedIndex : int，表示组合框弹出列表中突出显示项的索引，，只读
• indicator : Item，包含拖放指示器项
• inputMethodComposing : bool，表示可编辑组合框中是否具有部分文本输入采用某种输入方法
• inputMethodHints : flags，为输入法提供有关组合框的预期内容及其操作方式的提示
• model : model，控制着为组合框提供数据的模型
• popup : Popup，包含弹出窗口
• pressed : bool，代表组合框按钮是否以物理的方式按下
• textRole : string，表示用于填充组合框的模型角色
• validator : Validator，包含可编辑组合框的输入文本验证程序

具体的属性设置大家可以参考下面的链接
属性设置

ComboBox的信号和方法

信号

• void accepted()
  在可编辑的组合框上按下 Return 或 Enter 键时会发出此信号。如果输入的字符串不在模型中，则将currentIndex 设置为 -1，并且 currentText 将相应地更新。注意：如果组合框上设置了 validator，则只有在输入处于 acceptable 状态时才会发出信号。
• void activated(int index)
  用户在弹出窗口进行选择项目激活索引处的项目时，将发出此信号。
• void highlighted(int index)
  当弹出列表中索引处的项目被用户突出显示时，将发出此信号

方法

• void decrementCurrentIndex()
  如果弹出列表可见，则递减组合框的当前索引或突出显示的索引
• int find(string text, flags)
  返回指定文本的索引，如果未找到匹配项，则返回 -1
• void incrementCurrentIndex()
  如果弹出列表可见，则增加组合框的当前索引或突出显示的索引
• void selectAll()
  选择组合框的可编辑文本字段中的所有文本
• string textAt(int index)
  返回指定索引的文本，如果索引超出范围，则返回空字符串

ComboBox的例程

填充整数值的ComboBox

先来一个最简单的模型是整数值的Combobox。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ComboBox")
    color: "lightyellow"

    ComboBox{
        anchors.centerIn: parent
        model:[1,2,3,4,5,6,7,8,9]

        onActivated: {
            console.log(displayText)
        }
    }
}

这里只设置了ComboBox的数据模型为整型，其他的属性暂时没设置，大家可以参考上面的属性部分自己试一下效果。当我们进行在弹出窗口做出选择时，会触发activated信号，所以相应的在信号处理函数onActivated中，输出displayText（ComboBox上显示的文本）。

填充ListModel的ComboBox

看完了填充整数型的组合框，再来看一个填充ListModel的组合框，组合框是可编辑的，所以我们尝试将内容附加到可编辑的组合框内。

ComboBox {
        editable: true
        anchors.centerIn: parent
        model: ListModel {
            id: num
            ListElement { text: "One" }
            ListElement { text: "Two" }
            ListElement { text: "Three" }
        }
        onAccepted: {
            if (find(editText) === -1)
                num.append({text: editText})
        }
    }

ListModel是一个简单容器，包含数据角色，里面的内容可以动态定义，也可以在qml中明确定义。我们可以从它的count属性获得模型中元素的数量。另外，它还有很多方法。代码中信号处理函数中的append方法就是在model模型末尾添加数据。

填充了ListModel后，我们在其中添加列表元素ListElement，在每个列表元素中添加角色定义，注意：用于角色定义的名称必须以小写字母开头，并且应为给定的模型中的所有元素所共有。

设置ComboBox为可编辑，当可编辑的组合框上按下 Return 或 Enter 键时会发出accepted()信号，所以在其信号处理函数中设置将新输入的数据添加进模型的末尾。运行看一下效果。

当ComboBox使用具有多个命名角色的模型时，为了显示其文本和代理实例，必须使用特定的 textRole 配置 ComboBox。举个例子：

ComboBox {
    textRole: "key"
    model: ListModel {
        ListElement { key: "One"; value: 123 }
        ListElement { key: "Two"; value: 456 }
        ListElement { key: "Three"; value: 789 }
    }
}

ComboBox使用了key和value两个命名角色时，当我们不为其设置textRole，ComboBox就会无法将其可视化并抛出 ReferenceError: modelData is not defined的错误。

自定义ComboBox

ComboBox的可视化项由背景项background,内容项contentitem，弹出窗口popup，指示器indicator和委托项delegate组成。我们下面给出的例程中并未对indicator项进行定义，因为通常实现一个自定义的indicator指示器，需要用到画布Canvas进行重绘，这一部分比较难，所以这里就不涉及了。

ComboBox {
    anchors.centerIn: parent
      id: control
      model: ["One", "Two", "Three"]
      delegate: ItemDelegate {
          width: control.width
          contentItem: Text {
              text: modelData
              color: "green"
              font: control.font
              verticalAlignment: Text.AlignVCenter
          }
      }
      contentItem: Text {
          leftPadding: 5
          text: control.displayText
          font: control.font
          color: control.pressed ? "orange" : "black"
          verticalAlignment: Text.AlignVCenter
      }
      background: Rectangle {
          implicitWidth: 120
          implicitHeight: 40
          color: "green"
          border.width: 1
          radius: 2
      }
      popup: Popup {
          y: control.height
          width: control.width
          implicitHeight: contentItem.implicitHeight
          padding: 1
          contentItem: ListView {
              clip: true
              implicitHeight: contentHeight
              model: control.popup.visible ?control.delegateModel : null
          }
          background: Rectangle {
              border.color: "green"
              radius: 2
          }
      }
  }

先来看delegate，ItemDelegate呈现标准视图项。它可以在各种控件和控件中用作委托。在ItemDelegate中设置的Text对象，指的是在下滑列表中的Text，Text的文字是modelData，即model中的数据。

contentItem中的Text指的是界面上显示出来的文字，大家不要和上面的Text搞混哦！设置左部填充为5，文字为displayText（ComboBox上显示的文本），然后设置文字大小，颜色和位置。background背景项的设置很简单，大家自己看一下即可。

最后是弹出项popup的设置。Popup是一个弹出窗口，这个元素我们在后面的章节中再详细的和大家讲解。现在大家只知道它是一个类似于弹出界面的控件就行了。其中的可视化项ListView显示通过ListModel创建的模型中的数据。ListView具有一个模型和一个委托。模型model定义了要显示的数据，这里设置了当popup能可视化的时候，数据为ComboBox定义的模型数据。否则为null。运行看看最后的效果。

总结