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: truewidth: 500height: 500title: qsTr("Hello World")ComboBox {textRole: "text"valueRole: "value"width: 100displayText: currentText + 123model: [{ 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: controlmodel: ["First", "Second", "Third"]//针对model项中每一项的绘制delegate: ItemDelegate {width: control.widthcontentItem: Text {text: modelDatacolor: index % 2 ?"red":"blue"  //设置交替色font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter}highlighted: control.highlightedIndex === index}//指示器的绘制（上下箭头）indicator: Canvas {id: canvasx: control.width - width - control.rightPaddingy: control.topPadding + (control.availableHeight - height) / 2width: 12height: 8contextType: "2d"Connections {target: controlfunction 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: 0rightPadding: control.indicator.width + control.spacingtext: control.displayTextfont: control.fontcolor: control.pressed ? "red" : "blue"verticalAlignment: Text.AlignVCenter    //居中elide: Text.ElideRight}//控制控件背景的绘制background: Rectangle {implicitWidth: 120implicitHeight: 40color:"yellow"border.color: control.pressed ? "#17a81a" : "#21be2b"border.width: control.visualFocus ? 2 : 1radius: 2}//弹出下拉框,绘制整个下拉控件popup: Popup {y: control.height - 1width: control.widthimplicitHeight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndexScrollIndicator.vertical: ScrollIndicator { }}background: Rectangle {border.color: "gray"radius: 2layer.enabled: truelayer.effect: DropShadow{//设置弹出框阴影verticalOffset: 3radius: 8samples: 17color: "#80000000"}}}
}