5. QML自定义椭圆ComboBox控件

1. 说明

在项目开发中，QML自带的ComboBox控件的样式在某种情况下，是不能够满足我们的美观度需求的，此时就需要对其外观和呈现样式进行自定义设计，本篇文章简要介绍自定义的方式，实现细节不再详述，具体请看下方代码注释：
效果展示：

2. 完整代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.15

Window {
    id:root
    objectName: "mainWindow"
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello Signal")


    ComboBox{
        id:control
        anchors.centerIn: parent
        font.pixelSize:18
        //指定combobox的外形(椭圆)
        background:Rectangle{
            implicitWidth: 200
            implicitHeight: 40
            color:"lightgray"
            radius: 20
        }
        //添加数据
        model:ListModel{
            ListElement{
                mText:"First"
            }
            ListElement{
                mText:"Second"
            }
            ListElement{
                mText:"Third"
            }
        }
        //指定每一个数据项的展现形式
        delegate:ItemDelegate{
            width: control.width
            
            contentItem: Text{
                text:mText
                color:"gray"
                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: 15
            height: 10
            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 ? "#d3d3d3" : "#778899";
                context.fill();
            }
        }
        //设计弹出框的样式(点击下拉按钮后的弹出框)
        popup: Popup {
            y: control.height - 1
            width: control.width
            implicitHeight: contentItem.implicitHeight
            padding: 1
            //弹出框以listview的形式呈现
            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
                ScrollIndicator.vertical: ScrollIndicator { }
            }
            //设计弹出框的外观
            background: Rectangle {
                border.color: "#d3d3d3"
                radius: 10
            }
        }
    }
}

持续更新中，请大家多多关注…