qml之combox界面美化

废话不说，上图

代码如下，有注释

import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts
// import QtGraphicalEffects 1.15

Item {
    ColumnLayout {
        // margins: 10
        ComboBox {
            id: mycomBoxs
            editable: true              //可输入形式
            textRole: "txt"             //  数据以textRole展示,设置自定义展示数据通过这个设置
            valueRole: "text"           //  键值对存储形式，方便
            displayText: currentIndex + "  " + currentText   //数据展示形式
            model: ListModel {
                id: mymodel
                ListElement {text: "Banana"; txt: "name"}
                ListElement {text: "Apple"; txt: "aa"}
                ListElement {text: "Coconut"; txt: "tom" }
            }

            validator: RegularExpressionValidator {  // 正则匹配 5.12中该类为： RegExpValidator
                // regularExpression: /[0-9A-F]+/     // 限制输入为0~9 A~F
                regularExpression: /[0-255][.][0-255][.][0-255][.][0-255] / //限制输入正确 ip
            }

            onAcceptableInputChanged: {             // 这里验证输入，可以观察到输入不匹配后会输出false
                console.log("accept:", acceptableInput)
            }

            onAccepted: {
                if (find(editText) === -1)
                    model.append({text: editText})
            }
            onCurrentIndexChanged: {            // 选中后，会触发这个信号，发送选中的内容的编号
                console.log("idnex", currentIndex)
            }
            onCurrentTextChanged: {             // onCurrentIndexChanged触发后，才触发这个，如果mode里不同的index对应相同的textRole，则不会触发
                console.log("text", currentText)
            }
            onCurrentValueChanged: {            // valueRole 触发的信号
                console.log("value", currentValue)
            }

        }

        ComboBox {
        id: control
        model: ["First", "Second", "Third"]

        delegate: ItemDelegate {        //针对整个下拉框显示
            width: control.width
            contentItem: Text {
                text: modelData
                color: "#21be2b"
                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: 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" : "#21be2b";
                context.fill();
            }
        }

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

            text: control.displayText
            font: control.font
            color: control.pressed ? "#17a81a" : "#21be2b"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight                          // 右边填充
        }

        background: Rectangle {                             // 只是 针对当显示
            implicitWidth: 120
            implicitHeight: 40
            border.color: control.pressed ? "#17a81a" : "#21be2b"
            border.width: control.visualFocus ? 2 : 1
            radius: 2
        }

        popup: Popup {                                      // 附加属性 独一无二
                                                            // delegate绘制单个 ，popup绘制整个下拉框
            y: control.height - 1                           // 距离下拉框位置
            // y: -control.height                           // 可以控制下拉框向上显示
            width: control.width
            implicitHeight: contentItem.implicitHeight      // 弹出显示的高度
            padding: 1

            contentItem: ListView {                         // 界面
                id: listViews
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
                interactive: true                                 // 弹的效果
                boundsBehavior: Flickable.StopAtBounds            // 拖动到边界就没有回弹效果
                // ScrollIndicator.vertical: ScrollIndicator { }  // 滑动条
                ScrollBar.vertical: ScrollBar {
                    policy: ScrollBar.AlwaysOn                    // 总是显示
                }
            }

            background: Rectangle {
                border.color: "#21be2b"
                radius: 2
                // layer.effect: DropShadow {                      // 绘制阴影
                //     anchors.fill: listViews
                //              horizontalOffset: 3                // 阴影偏移量
                //              verticalOffset: 3
                //              radius: 8.0
                //              samples: 17
                //              color: "#80000000"
                //              source: butterfly
                // }
            }
        }
    }

    }

}