【Qt学习】qml如何自定义Combobox

最新推荐文章于 2025-03-25 08:00:00 发布

ipfpm

最新推荐文章于 2025-03-25 08:00:00 发布

阅读量1.3k

点赞数

分类专栏： QT # qml 文章标签： qml

本文链接：https://blog.youkuaiyun.com/ipfpm/article/details/106715695

版权

QT 同时被 2 个专栏收录

41 篇文章

订阅专栏

qml

13 篇文章

订阅专栏

import QtQuick 2.7
import QtQuick.Controls 2.5

ComboBox {
    id:control
    property var fillColor: Qt.rgba(84/254, 144/254, 214/254,0.3)
    property var borderColor: Qt.rgba(80/254, 135/254, 200/254,0.8)
    property var selectFillColor: "#68c169"//Qt.rgba(104/254, 193/254, 105/254,0.3)
    width: 120
    height: 40
    font.pixelSize: 18
    font.family: "SimHei"

    /*显示的文字*/
    contentItem: Text {
        leftPadding: 10
        text: control.displayText
        font: control.font
        color: "white"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    /*显示的背景*/
    background: Rectangle {
        implicitWidth: control.width
        implicitHeight: control.height
        color: fillColor
        border.color: borderColor
        border.width: 1
        radius: 5

    }

    /*下拉图标*/
    indicator: Canvas {
        id: canvas
        x: control.width - 20
        y: (control.height)/2-2
        width: 12
        height: 7
        contextType: "2d"

        onPaint: {
//            context.reset();

            context.lineWidth = 2;  //画笔宽度
            context.strokeStyle="white";
            context.moveTo(0, 0);
            context.lineTo(width/2, height);
            context.lineTo(width, 0);
            context.stroke();
//            context.closePath();
//            context.fillStyle = "white";
//            context.fill();
        }
    }


    /*下拉框的选项*/
    delegate: ItemDelegate {
        width: control.width
        contentItem: Rectangle
        {
            anchors.fill:parent
            color:hovered ? selectFillColor : fillColor
            height:40
            Text {
                anchors.centerIn: parent
                text: modelData
                color: "white"
                font: control.font
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }
        }

    }

    /*点击后弹出框背景*/
    popup: Popup {
        y: control.height - 1
        width: control.width
        implicitHeight: listview.contentHeight
        padding: 1

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

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            border.color: borderColor
            color: fillColor
            radius: 2

        }
    }








}

详细见qt帮助文档例子：

Customizing ComboBox