让我来发布一点答辩（是真的写的很答辩的QML控件）

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0

Item {
    id: combolBox

    property int btn_x: 0
    property int btn_y: 0
    property int btn_width: 80
    property int btn_height: 20
    property var btn_color: "#EEEEEE"
    property var btn_hover_color: "gray"
    property var btn_img_source: null
    property int btn_radius: 10
    property string btn_text: "btn_text"

    property int box_num: 10
    property int box_width: 200
    property int box_height: 20
    property var box_texts: ["box1", "box2","box3"]

    property bool combolBox_open: false

    Rectangle{
        id: combolBox_btn

        x: btn_x; y: btn_y
        width: btn_width; height: btn_height
        color: btn_color

        radius: btn_radius

        Label {
            id: combolBox_btn_label

            anchors.fill: parent

            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter

            text: qsTr(btn_text)
        }

        Image {
            id: btn_img
            anchors.fill:parent
            source: btn_img_source
        }

        MouseArea{
            hoverEnabled: true

            anchors.fill: parent

            onEntered: {
                parent.color = btn_hover_color
            }

            onExited: {
                parent.color = btn_color
            }

            onClicked: {
                combolBox_open = !combolBox_open
            }
        }

    }

    Rectangle{
        id: outer_container

        state: combolBox_open ? "open" : "closed"

        color: "#00000000"

        states: [
            State {
                name: "closed"
                PropertyChanges {
                    target: outer_container

                    x: btn_x; y: btn_y + btn_height
                    width: 0; height: 0
                }
            },

            State {
                name: "open"
                PropertyChanges {
                    target: outer_container

                    x: btn_x + 10; y: btn_y + btn_height + 5
                    width: box_width + 11; height: box_height*box_num + 11
                }
            }
        ]

        transitions: [
            Transition {
                from: "closed"
                to: "open"

                NumberAnimation{
                    properties: "x, y, width, height"

                    duration: 30
                }
            },

            Transition {
                from: "open"
                to: "closed"

                NumberAnimation{
                    properties: "x, y, width, height"

                    duration: 30
                }
            }
        ]

        Rectangle{
            id:container

            anchors.top: parent.top
            anchors.left: parent.left
            width: parent.width - 5; height: parent.height - 5

            radius: 10

            Rectangle{
                id: hover_highlighter

                x: parent.x + 3
                width: combolBox_open ? box_width : 0
                height: combolBox_open ? box_height : 0
                z: 0
                color: "gray"

                Behavior on y{
                    NumberAnimation{
                        duration: 50
                    }
                }

                radius: 5
            }

            Repeater{
                model: box_num

                Rectangle{
                    color: "#00000000"
                    width: box_width; height: box_height
                    y: box_height * index + 3

                    Label{
                        z: 1
                        visible: combolBox_open ? true : false

                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter

                        text: index
                    }

                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true

                        onEntered: {
                            hover_highlighter.y = parent.y
                        }
                    }
                }
            }
        }

        DropShadow{
            id: container_shadow

            source: container
            anchors.fill: container

            horizontalOffset: 5
            verticalOffset:  5

            samples: 18

            radius: 10
        }
    }

}