Flat风格的Qml轮选框

朴灿烈づ我的快乐病毒、 2023-06-26 08:24 163阅读 0赞

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

![demo.gif][]

## 轮选框代码 ##

import QtQuick 2.0
    import QtQuick.Controls 2.0
    import QtGraphicalEffects 1.0
    
    SpinBox { 
        id: root
    
        property color color: "#3498DB"
    
        value: 50
        editable: true
    
        contentItem: TextInput { 
            text: root.value
    
            font.pixelSize: 15
            font.family: "Arial"
            font.weight: Font.Thin
    
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
    
            readOnly: !root.editable
            validator: root.validator
        }
    
        up.indicator: Rectangle { 
            x: root.mirrored ? 0 : parent.width - width
            implicitWidth: 37
            implicitHeight: implicitWidth
            color: root.up.pressed ? "#EBEDEF" : root.color
    
            Text { 
                text: "+"
                anchors.fill: parent
                color: root.up.pressed ? root.color : "white"
    
                font.bold: true
                font.pixelSize: root.font.pixelSize * 2
                fontSizeMode: Text.Fit
    
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    
        down.indicator: Rectangle { 
            x: root.mirrored ? parent.width - width : 0
            implicitWidth: root.up.indicator.implicitWidth
            implicitHeight: implicitWidth
            color: root.down.pressed ? "#EBEDEF" : root.color
    
            Text { 
                text: "-"
                anchors.fill: parent
                color: root.down.pressed ? root.color : "white"
    
                font.bold: true
                font.pixelSize: root.font.pixelSize * 2
                fontSizeMode: Text.Fit
    
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    
        background: Rectangle { 
            implicitWidth: 138
            border.color: "#EBEDEF"
    
            layer.enabled: root.hovered
            layer.effect: DropShadow { 
                id: dropShadow
                transparentBorder: true
                color: "#EEF2F7"
                samples: 8 
            }
        }
    }

## 轮选框样式代码 ##

![main\_page2.png][main_page2.png]

GridLayout { 
        width: root.width
        rows: 3
        columns: 3
    
        Repeater { 
            model: ["#727CF5", "#0ACF97", "#F9375E",
                    "#FFBC00", "#2B99B9", "#5A6268",
                    "#EEF2F7", "#212730", "#3498DB"]
    
            SpinBox { 
                value: Math.random() * 10
                color: modelData
            }
        }
    }

*  更多精彩内容请关注公众号**Qt君**。

[demo.gif]: https://img-blog.csdnimg.cn/2019123108310448.gif
[main_page2.png]: https://img-blog.csdnimg.cn/20191231083046977.png