Qt Quick - ComboBox

一、概述

ComboBox是一个组合按钮和弹出列表。它提供了一种以占用最小屏幕空间的方式向用户显示选项列表的方法。

ComboBox用数据模型填充。数据模型通常是JavaScript数组、ListModel或整数，但也支持其他类型的数据模型。

  ComboBox {
    
    
      model: ["First", "Second", "Third"]
  }

二、简单使用

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5

Window {
    
    
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ComboBox{
    
    
        id: comhbox
        y: 71
        anchors.horizontalCenterOffset: 0
        anchors.horizontalCenter: parent.horizontalCenter
        model: ["Item1", "Item2", "Item3", "Item4"]

        onCurrentIndexChanged: {
    
    
            display.text = model[currentIndex];
        }
    }

    RowLayout {
    
    
        id: rowLayout
        x: 264
        y: 134
        width: 100
        height: 62
        anchors.horizontalCenterOffset: 0
        anchors.horizontalCenter: parent.horizontalCenter

        Label {
    
    
            id: label2
            text: qsTr("选择的值：")
        }

        Label {
    
    
            id: display
        }
    }
}

三、可编辑的组合框

组合框可以被编辑。可编辑的组合框根据模型中可用的内容自动完成其文本。
下面的示例演示通过响应接受的信号向可编辑组合框追加内容。

  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})
      }
  }

四、组合框模型角色

ComboBox能够可视化提供modelData角色的标准数据模型:

• 模型只有一个角色
• 没有命名角色的模型(JavaScript数组，整数)

当使用具有多个命名角色的模型时，必须将ComboBox配置为为其显示文本和委托实例使用特定的文本角色。如果您想使用与文本角色相对应的模型项的角色，请设置valueRole。然后可以使用currentValue属性和indexOfValue()方法来获取关于这些值的信息。其实就是把视图上的元素绑定到C++里面的标识。
例如:

  ApplicationWindow {
    
    
      width: 640
      height: 480
      visible: true

      // Used as an example of a backend - this would usually be
      // e.g. a C++ type exposed to QML.
      QtObject {
    
    
          id: backend
          property int modifier
      }

      ComboBox {
    
    
          textRole: "text"
          valueRole: "value"
          // When an item is selected, update the backend.
          onActivated: backend.modifier = currentValue
          // Set the initial currentIndex to the value stored in the backend.
          Component.onCompleted: currentIndex = indexOfValue(backend.modifier)
          model: [
              {
    
     value: Qt.NoModifier, text: qsTr("No modifier") },
              {
    
     value: Qt.ShiftModifier, text: qsTr("Shift") },
              {
    
     value: Qt.ControlModifier, text: qsTr("Control") }
          ]
      }
  }

注意:如果ComboBox被分配了一个具有多个命名角色的数据模型，但没有定义textRole，则ComboBox无法可视化它，并抛出一个ReferenceError: modelData未定义。

五、美化

ComboBox 包含了 background, content item, popup, indicator, 和 delegate，这些都是可以定制的

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  ComboBox {
    
    
      id: control
      model: ["First", "Second", "Third"]

      delegate: ItemDelegate {
    
    
          width: control.width
          contentItem: Text {
    
    
              text: modelData
              color: "#21be2b"
              font: control.font
              elide: Text.ElideRight
              verticalAlignment: Text.AlignVCenter
          }
          highlighted: control.highlightedIndex === index
      }

      indicator: Canvas {
    
    
          id: canvas
          x: control.width - width - control.rightPadding
          y: control.topPadding + (control.availableHeight - height) / 2
          width: 12
          height: 8
          contextType: "2d"

          Connections {
    
    
              target: control
              onPressedChanged: canvas.requestPaint()
          }

          onPaint: {
    
    
              context.reset();
              context.moveTo(0, 0);
              context.lineTo(width, 0);
              context.lineTo(width / 2, height);
              context.closePath();
              context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
              context.fill();
          }
      }

      contentItem: Text {
    
    
          leftPadding: 0
          rightPadding: control.indicator.width + control.spacing

          text: control.displayText
          font: control.font
          color: control.pressed ? "#17a81a" : "#21be2b"
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
      }

      background: Rectangle {
    
    
          implicitWidth: 120
          implicitHeight: 40
          border.color: control.pressed ? "#17a81a" : "#21be2b"
          border.width: control.visualFocus ? 2 : 1
          radius: 2
      }

      popup: Popup {
    
    
          y: control.height - 1
          width: control.width
          implicitHeight: contentItem.implicitHeight
          padding: 1

          contentItem: ListView {
    
    
              clip: true
              implicitHeight: contentHeight
              model: control.popup.visible ? control.delegateModel : null
              currentIndex: control.highlightedIndex

              ScrollIndicator.vertical: ScrollIndicator {
    
     }
          }

          background: Rectangle {
    
    
              border.color: "#21be2b"
              radius: 2
          }
      }
  }