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