Qt Quick：ComboBox 组合框

喵呜角角2024-12-24 14:14

自定义ComboBox：

javascript 复制代码

import QtQuick
import QtQuick.Controls
// import QtQuick.Controls.Material

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

    ComboBox {
        id: comboBox
        width: 150; height: 35; x: 50; y: 20

        model: ListModel {
            ListElement { text: "番茄鸡蛋盖浇饭" }
            ListElement { text: "爆炒猪肝盖浇饭" }
            ListElement { text: "青椒肉丝盖浇饭" }
            ListElement { text: "粉蒸排骨" }
            ListElement { text: "青椒炒肉" }
        }

        contentItem: Text {
            text: comboBox.displayText
            verticalAlignment: Text.AlignVCenter
            // color: comboBox.pressed ? "red" : "green"
            elide: Text.ElideRight  // 内容过长时右侧省略
            leftPadding: 5
        }

        background: Rectangle {
            implicitWidth: 150; implicitHeight: 30
            color: "transparent"
            border.color: comboBox.activeFocus ? "#005BF5" : "#D9DBDE"
        }

        indicator: Image {
            width: 20; height: 20
            anchors.right: comboBox.right
            anchors.rightMargin: 5
            anchors.verticalCenter: comboBox.verticalCenter

            source: comboBox.down ? "./imgs/arrowup.png" : "./imgs/arrowdown.png"
        }

        popup: Popup {
            y: comboBox.height
            width: comboBox.width
            height: contentItem.implicitHeight
            padding: 1

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: comboBox.popup.visible ? comboBox.delegateModel : null
                currentIndex: comboBox.highlightedIndex
            }
        }
    }
}

这个ComboBox实际是由多个控件组合的，全部自定义比较复杂，我这边只是弄了个大概。

还有2个常用的信号：

javascript 复制代码

onCurrentIndexChanged: { console.log(currentIndex) }
onCurrentValueChanged: { console.log(currentValue) }