Flat风格的Qml轮选框

基于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

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君。