QML ComboBox简介

1.简介

ComboBox是一个组合按钮和弹出列表。它提供了一种以占用最小屏幕空间的方式向用户显示选项列表的方法。
ComboBox用数据模型填充。数据模型通常是JavaScript数组、ListModel或整数，但也支持其他类型的数据模型。

常用属性：

• count : int：组合框中的项目数。
• displayText : string：当前显示的文本
• currentIndex : int：组合框中当前项目的索引。当 count 为 0 时默认值为 -1，否则默认值为 0。
• currentText : string：当前项的文本
• currentValue : string：当前项的值
• delegate : Component：代理
• editable : bool：组合框是否可编辑。默认值为false。
• indicator : Item：指示器项
• model : model：数据model
• popup : Popup：弹窗
• textRole : string：保存用于存储与模型中每个项关联的值的模型角色
• validator : Validator：可编辑组合框的输入文本验证器。
• valueRole : string ：此属性保存用于存储与模型中每个项关联的值的模型角色

2.示例

示例1：显示基础属性，valueRole和textRole区别，设置model等。

Window {
    visible: true
    width: 500
    height: 500
    title: qsTr("Hello World")

    ComboBox {
        textRole: "text"
        valueRole: "value"
        width: 100
        displayText: currentText + 123
        model: [
            { value: 100, text: qsTr("aaa") },
            { value: 200, text: qsTr("bbb") },
            { value: 300, text: qsTr("ccc") }
        ]

        onCurrentTextChanged: {
            console.log("text: ",currentText)
        }
        onCurrentValueChanged: {
            console.log("value: ",currentValue)
        }
    }

}

打印结果：可以明显看到valueRole和textRole区别。

 示例2：自定义combobox

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

    //针对model项中每一项的绘制
    delegate: ItemDelegate {
        width: control.width
        contentItem: Text {
            text: modelData
            color: index % 2 ?"red":"blue"  //设置交替色
            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
            function 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 ? "red" : "blue"
        verticalAlignment: Text.AlignVCenter    //居中
        elide: Text.ElideRight
    }

    //控制控件背景的绘制
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        color:"yellow"
        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: "gray"
            radius: 2
            layer.enabled: true
            layer.effect: DropShadow{//设置弹出框阴影
                verticalOffset: 3
                radius: 8
                samples: 17
                color: "#80000000"
            }
        }
    }
}