3-hexo开发日志-持续更新

需求:

• 选择框下拉菜单自定义

效果预览：

代码:

import QtQuick 2.6
import QtQuick.Controls 2.1
Rectangle {
    width: 600
    height: 500
    color: "steelblue"
    ComboBox {
        id: control
        width:300
        height:50
        anchors.centerIn: parent
        model: ["按创建时间排序", "按文件名称排序", "按歌手排序"]

        //显示字体背景
        background: Rectangle {
                  implicitWidth: 300
                  implicitHeight: 50
                  radius: 2
                  color: "transparent"
              }

        delegate: ItemDelegate {
            spacing: 2
            //高亮色坐标、宽度
            x:4
            width:290
            //下拉框字体
            Text {
                id:myText
                x:30
                anchors.verticalCenter: parent.verticalCenter
                text: modelData
                font.pixelSize: 26
                color: "white"
            }

            //highlighted: control.highlightedIndex == index
        }

        //显示字体
        contentItem: Text {
            leftPadding: 0
            rightPadding: control.indicator.width + control.spacing

            text: control.displayText
            font.pixelSize: 36
            color: "white"
        }

        popup: Popup {
            y: control.height - 1
            width: 300
            height:200
            implicitHeight: listview.contentHeight
            padding: 20
            bottomMargin: 60

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

//                //选中色
//                highlight: Rectangle{
//                    x:5
//                    width: 300
//                    height: 50
//                    color: "gray"
//                }

                ScrollIndicator.vertical: ScrollIndicator { }
            }
            //下拉框背景
            background: Rectangle {
                color: "black"
                opacity: 0.7
                border.color: "gray"
                border.width: 2
                radius:4
            }
        }
    }
}

结束

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2291184112@qq.com