自定义ComboBox:
import QtQuick
import QtQuick.Controls
// import QtQuick.Controls.MaterialWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")ComboBox {id: comboBoxwidth: 150; height: 35; x: 50; y: 20model: ListModel {ListElement { text: "番茄鸡蛋盖浇饭" }ListElement { text: "爆炒猪肝盖浇饭" }ListElement { text: "青椒肉丝盖浇饭" }ListElement { text: "粉蒸排骨" }ListElement { text: "青椒炒肉" }}contentItem: Text {text: comboBox.displayTextverticalAlignment: Text.AlignVCenter// color: comboBox.pressed ? "red" : "green"elide: Text.ElideRight // 内容过长时右侧省略leftPadding: 5}background: Rectangle {implicitWidth: 150; implicitHeight: 30color: "transparent"border.color: comboBox.activeFocus ? "#005BF5" : "#D9DBDE"}indicator: Image {width: 20; height: 20anchors.right: comboBox.rightanchors.rightMargin: 5anchors.verticalCenter: comboBox.verticalCentersource: comboBox.down ? "./imgs/arrowup.png" : "./imgs/arrowdown.png"}popup: Popup {y: comboBox.heightwidth: comboBox.widthheight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: comboBox.popup.visible ? comboBox.delegateModel : nullcurrentIndex: comboBox.highlightedIndex}}}
}
这个ComboBox实际是由多个控件组合的,全部自定义比较复杂,我这边只是弄了个大概。
还有2个常用的信号:
onCurrentIndexChanged: { console.log(currentIndex) }
onCurrentValueChanged: { console.log(currentValue) }