Flat风格的Qml组合框

太过爱你忘了你带给我的痛 2023-06-20 06:01 25阅读 0赞

> 基于Qml的ComboBox控件修改而成。

![demo.gif][]

## 组合框代码 ##

import QtQuick 2.0
    import QtQuick.Controls 2.0
    import QtGraphicalEffects 1.0
    
    ComboBox { 
        id: root
    
        property color checkedColor: "#1ABC9C"
    
        delegate: ItemDelegate { 
            width: root.width
    
            contentItem: Text { 
                text: modelData
                color: root.highlightedIndex === index ? "white" : "black"
                font.family: "Arial"
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }
    
            background: Rectangle { 
                 width: parent.width
                 height: parent.height
                 color: root.highlightedIndex === index ? root.checkedColor : "#F3F4F5"
             }
        }
    
        indicator: Canvas { 
            id: canvas
            x: root.width - width - 10
            y: (root.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"
    
            Connections { 
                target: root
                onPressedChanged: canvas.requestPaint()
            }
    
            onPaint: { 
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = "white"
                context.fill();
            }
        }
    
        contentItem: Item { 
            width: root.background.width - root.indicator.width - 10
            height: root.background.height
    
            Text { 
                anchors.verticalCenter: parent.verticalCenter
                x: 10
                text: root.displayText
                elide: Text.ElideRight
    
                font.pixelSize: 15
                font.family: "Arial"
                font.weight: Font.Thin
                color: root.down ? Qt.rgba(255, 255, 255, 0.75) : "white"
            }
        }
    
        background: Rectangle { 
            implicitWidth: 102
            implicitHeight: 41
            color: root.down ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
            radius: 5
    
            layer.enabled: root.hovered | root.down
            layer.effect: DropShadow { 
                transparentBorder: true
                color: root.checkedColor
                samples: 10 /*20*/
            }
        }
    
        popup: Popup { 
            y: root.height - 1
            width: root.width
            implicitHeight: contentItem.implicitHeight
            padding: 0
    
            contentItem: ListView { 
                implicitHeight: contentHeight
                model: root.popup.visible ? root.delegateModel : null
                clip: true
                currentIndex: root.highlightedIndex
    
                ScrollIndicator.vertical: ScrollIndicator {  }
            }
    
            background: Rectangle { 
                color: "#F3F4F5"
                radius: 5
                clip: true
    
                layer.enabled: root.hovered | root.down
                layer.effect: DropShadow { 
                    transparentBorder: true
                    color: "#F3F4F5"
                    samples: 10
                }
            }
        }
    }

## 组合框样式代码 ##

![main\_page.png][main_page.png]

GridLayout { 
        width: root.width
        rows: 3
        columns: 3
    
        Repeater { 
            id: comboboxRepeater
            model: ["#727CF5", "#0ACF97", "#F9375E",
                    "#FFBC00", "#2B99B9", "#5A6268",
                    "#EEF2F7", "#212730", "#3498DB"]
    
            ComboBox { 
                model: ["First", "Second", "Third"]
                checkedColor: modelData
            }
        }
    }

*  更多请关注公众号**Qt君**

[demo.gif]: https://img-blog.csdnimg.cn/20191207200609325.gif
[main_page.png]: https://img-blog.csdnimg.cn/20191207200854143.png