在 QT/QML 下拉项上添加按钮

Question

我想为基于 QML 的 combo/dropdown 框设置样式，以便每个项目上都有一个“删除”按钮，就像这样

我怎样才能做到这一点？有没有我可以参考的文章或链接来实现这一目标？我正在使用 QML 来设计小部件。

Answer 1

您可以从这里开始简单地自定义 QC2 组合框：

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

为此：

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
    id: root
    width: 400
    height: 400

    ComboBox {
        id: control
        x: 50
        y: 50
        model: ["My Brackets 2021", "New Preset 22", "Super Br1", "New thingy", "Element of that list"]

        delegate: ItemDelegate {
            width: control.width - 20
            contentItem: Text {
                text: modelData
                color: "#787878"
                font: control.font
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter

                Button {
                    x: parent.width - 25
                    y: (parent.height - height) / 2
                    width: 30
                    height: 30
                    text: "\u26CC"
                    onClicked: { /* --Perform delete action here-- */ }
                }
            }
            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" : "#B4C8DA";
                context.fill();
            }
        }

        contentItem: Text {
            leftPadding: 10
            rightPadding: control.indicator.width + control.spacing

            text: control.displayText
            font: control.font
            color: control.pressed ? "#17a81a" : "#787878"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 250
            implicitHeight: 40
            border.color: control.pressed ? "#17a81a" : "#B4C8DA"
            border.width: control.visualFocus ? 2 : 1
            radius: 20
        }

        popup: Popup {
            y: control.height + 3
            width: control.width
            implicitHeight: contentItem.implicitHeight + 20
            padding: 10

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

                ScrollIndicator.vertical: ScrollIndicator { }
            }

            background: Rectangle {
                border.color: "#B4C8DA"
                radius: 20
            }
        }
    }
}

看起来像这样：

在 QT/QML 下拉项上添加按钮

adding a button on QT/QML drop down item

qt

qml