QML ComboBox部件的使用

ComboBox 是一个下拉框部件，在编程中是经常使用到的；

1.model

此属性为组合框提供数据模型。

可以设置为数字，例如：model: 3

ComboBox {
    id: combobox
    width: 200

    // 1.填写数字，每一项都为数字
    model: 3
}

也可以使用数组方式

ComboBox {
    id: combobox
    width: 200

    model: [ "第一个", "数字", "123", "abc" ]
//    model: [
//        { name: "张三", text: "zhangsan" },
//        { name: "李四", text: "lisi" }
//    ]
}

还可以是ListModel等

ComboBox {
    id: combobox
    width: 200

    textRole: "name"
    model: ListModel {
        ListElement { text: "first"; name: "zhangsan" }
        ListElement { text: "第二" ; name: "lisi"}
        ListElement { text: "123" ; name: "wangsu"}
        ListElement { text: "abcdefg" ; name: "zhaoliu"}
    }
}

2.currentIndex

此属性保存组合框中当前项的索引。

即可以通过该值获取当前显示的索引，或者通过设置该值去控制显示；

Button {
    text: "clike me!"
    x: 250

    onClicked: {
        // 设置ComboBox显示为第一项
        combobox.currentIndex = 0
    }
}

ComboBox {
    id: combobox
    width: 200

    textRole: "name"
    model: ListModel {
        id: model
        ListElement { text: "first"; name: "zhangsan" }
        ListElement { text: "第二" ; name: "lisi"}
        ListElement { text: "123" ; name: "wangsu"}
        ListElement { text: "abcdefg" ; name: "zhaoliu"}
    }

    // 设置初始显示为第三项，下标从0开始
    currentIndex: 2
}

3.textRole

这个属性用于设置显示ComboBox的模型中的属性。

当模型有多个角色时，可以设置textRole来确定应该显示哪个角色。

即如果model中设置的模型，有多个属性值，如果不通过textRole去指定显示，会无法正常显示出来；不信可以自己去尝试一下，注释掉下面的textRole: "key"即可。

ComboBox {
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }
}

4.currentText

当前属性保持了当前显示的文本。

如果设置了textRole；那么currentText获取的是textRole设置的属性的当前文本；

onCurrentTextChanged 当currentText发生改变时触发；

ComboBox {
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    onCurrentTextChanged: {
        console.log("CurrentText: ", currentText)
    }
}

5.valueRole 与 currentValue

valueRole 此属性保存用于存储与模型中每个项目相关联的值的模型角色。

currentValue 当设置了valueRole后，该属性获得valueRole设置相应属性值。

ComboBox {
    textRole: "key"
    valueRole: "value"

    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    onCurrentTextChanged: {
        console.log("CurrentText: ", currentText)
    }

    onCurrentValueChanged: {
        console.log("CurrentValue: ", currentValue)
    }
}

6.count

此属性保存ComboBox的项个数。

ComboBox {

    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    Component.onCompleted: {
        // count 数字记录的ComboBox的项数
        console.log(count);
    }
}

7.editable

此属性设置ComboBox是否可编辑；true，可编辑，false，不可编辑，默认false。

onAccepted        槽函数，当ComboBox为可编辑时，在ComboBox有焦点时，按下回车时触发。

find        函数，如果在ComboBox项中没找到，则返回-1；否则返回找到文本的索引。

editText        属性，保存当前被编辑时的文本。

ComboBox {
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    // 设置是否可编辑
    editable: true
    // 当在editable属性设置为true时，在ComboBox有焦点时，按下回车时触发
    onAccepted: {
        // editText 获取当前项正编辑的文本
        console.log(editText);

        // 如果在ComboBox项中没找到，则返回-1，然后添加
        if (-1 === find(editText)) {
            // 给comboBox添加一项
            model.append({ key: editText, value: 101 });
        }
    }
}

只有敲下回车键后才会触发 onAccepted 

8.displayText

此属性可以指定显示当前的文本。

ComboBox {
    textRole: "key"
    valueRole: "value"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    displayText: currentText + "  " + currentValue
}

9.indicator

这个属性设置ComboBox右侧图标的绘制。

默认是上箭头和下箭头包裹在一起的，可以通过这个这个属性绘制成任何图案。

也可以设置图片上去。

ComboBox {
    id: cob
    width: 150
    height: 50
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    indicator: Image {
        id: img
        width: 50
        height: 50
        anchors.right: cob.right    // 位于父类的右侧
        anchors.verticalCenter: cob.verticalCenter    // 垂直与父类
        source: "/qt.png"
    }
}

10.background

此属性设置ComboBox的背景绘制；仅仅设置ComboBox，下拉选项不影响。

ComboBox {
    id: cob
    width: 150
    height: 50
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    background: Rectangle {
        // 鼠标按下或者释放时设置颜色
        border.color: cob.pressed ? "#D6577B" : "#21be2b"
        // 设置圆角
        radius: 5
    }
}

11.contentItem

此属性设置ComboBox的当前文本绘制；仅仅设置ComboBox，下拉选项不影响。

ComboBox {
    id: cob
    width: 150
    height: 50
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    contentItem: Text {
        id: txt
        text: qsTr(cob.currentText)
        font: cob.font
        color: cob.pressed ? "red" : "blue"
        verticalAlignment: Text.AlignHCenter | Text.AlignVCenter    // 水平居中
        anchors.horizontalCenter: cob.horizontalCenter              // 垂直居中
    }
}

12.delegate

针对model中，每一个项的具体绘制。即下拉选项，非ComboBox。

ComboBox {
    id: cob
    width: 150
    height: 50
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
    }

    // 针对model中，每一个项的具体绘制
    delegate: ItemDelegate {
        width: cob.width
        contentItem: Text {
            text: model.key     // 设置具体某一项的文本
            color: index % 2 ? "red" : "blue"   // index 获取的是设置到当前项的索引
            font: cob.font
            verticalAlignment: Text.AlignVCenter
        }
        // 鼠标悬浮项时的高亮效果
        highlighted: cob.highlightedIndex === index
    }
}

13.popup

绘制整个下拉框部件；（delegate:绘制单个下拉框项）

y 属性：设置下拉项是向下显示，还是向上显示；

background 属性：设置整个下拉属性的背景；

ComboBox {
    id: cob
    y: 200
    width: 150
    height: 50
    textRole: "key"
    model: ListModel {
        ListElement { key: "First"; value: 123 }
        ListElement { key: "Second"; value: 456 }
        ListElement { key: "Third"; value: 789 }
        ListElement { key: "F"; value: 123 }
        ListElement { key: "S"; value: 456 }
        ListElement { key: "T"; value: 789 }
    }


    // 绘制整个下拉框部件（delegate:绘制单个下拉框项）
    popup: Popup {
        // 设置下拉项是向下显示还是向上显示
        y: -cob.height - 130

        width: cob.width
        contentItem: ListView {
              clip: true
//              implicitHeight: contentHeight
              implicitHeight: 150
              model: cob.popup.visible ? cob.delegateModel : null
              currentIndex: cob.highlightedIndex

              // 设置鼠标无法点击拖动，默认值为true
              interactive: false

              // 设置鼠标拖动到尽头时，没有回弹的效果
              boundsBehavior: Flickable.StopAtBounds

              // 设置滚动条
              ScrollBar.vertical: ScrollBar {
                  policy: ScrollBar.AlwaysOn    // 设置滚动条一直显示
              }
          }

        // 设置整个下拉属性的背景
        background: Rectangle {
          border.color: "#21be2b"
          radius: 2
        }
    }
}

实现阴影效果：

import QtGraphicalEffects 1.14

在popup的background中添加如下：

// 设置整个下拉属性的背景              
background: Rectangle {     
  border.color: "#21be2b"   
  radius: 2                 
                            
  // 实现阴影效果                 
  layer.enabled: true       
  layer.effect: DropShadow {
      verticalOffset: 5     
      horizontalOffset: 5   
      radius: 8.0           
      samples: 17           
      color: "#80000000"    
  }                         
}

14.onActivated

当鼠标选中某一项时，此槽函数会触发，其中可通过index获取选中项的索引；

ComboBox {                                                         
    model: ["第一", "第二", "第三", "第四", "第五"]                          
                                                                   
    onActivated: {                                                 
        console.log("index = " + index + "   text：" + currentText);
    }                                                              
}