Flat风格的Qml轮选框

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

轮选框代码

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0SpinBox {id: rootproperty color color: "#3498DB"value: 50editable: truecontentItem: TextInput {text: root.valuefont.pixelSize: 15font.family: "Arial"font.weight: Font.ThinhorizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterreadOnly: !root.editablevalidator: root.validator}up.indicator: Rectangle {x: root.mirrored ? 0 : parent.width - widthimplicitWidth: 37implicitHeight: implicitWidthcolor: root.up.pressed ? "#EBEDEF" : root.colorText {text: "&＃43;"anchors.fill: parentcolor: root.up.pressed ? root.color : "white"font.bold: truefont.pixelSize: root.font.pixelSize * 2fontSizeMode: Text.FithorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}down.indicator: Rectangle {x: root.mirrored ? parent.width - width : 0implicitWidth: root.up.indicator.implicitWidthimplicitHeight: implicitWidthcolor: root.down.pressed ? "#EBEDEF" : root.colorText {text: "-"anchors.fill: parentcolor: root.down.pressed ? root.color : "white"font.bold: truefont.pixelSize: root.font.pixelSize * 2fontSizeMode: Text.FithorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}background: Rectangle {implicitWidth: 138border.color: "#EBEDEF"layer.enabled: root.hoveredlayer.effect: DropShadow {id: dropShadowtransparentBorder: truecolor: "#EEF2F7"samples: 8 }}
}


轮选框样式代码

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


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