QML 自定义SpinBox

/** Copyright (C) Fuqing Medical and USTC BMEC RFLab - All Rights Reserved.
 ** Unauthorized copying of this file, via any medium is strictly prohibited.
 ** Proprietary and confidential.
 ** Created on 20230925, by yue.wang.
 **/
import QtQuick 2.12
import QtQuick.Controls 2.12

SpinBox {
    id: control
    property int boxWidth: 100
    property int boxHeight: 30
    property int valueSize: 15
    property color indicatorColor: "#cdcdcd"
    property color selectedColor: "#7f7f7f"
    property int   defaultValue: 5
    property int fromValue: 0
    property int toValue: 5000
    value: defaultValue
    editable: true
    from: fromValue
    to: toValue

    // must use implicitWidth, can't use width ???
    implicitWidth: boxWidth
    implicitHeight: boxHeight

    background: Rectangle {
        anchors.fill: parent
        border.color: indicatorColor
    }
    // must have this!!! it will effect height of contentItem
    topPadding : -10

    contentItem:
        TextInput {
        z: 2
        width: boxWidth - 2 * boxHeight
        height: boxHeight
        text: control.textFromValue(control.value, control.locale)
        font.pixelSize: valueSize
        anchors.centerIn: parent
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter
        readOnly: !control.editable
        validator: control.validator
        // todo: 除了validata之外的方法
//        inputMethodHints: Qt.ImhFormattedNumbersOnly
        selectByMouse: true
    }

    up.indicator: Rectangle {
        x: control.mirrored ? 0 : parent.width - width
        height: boxHeight
        width: boxHeight
        color: control.up.pressed ? selectedColor : indicatorColor
        border.color: indicatorColor
        Text {
            text: "+"
            font.pixelSize: control.font.pixelSize * 2
            color: "black"
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    down.indicator: Rectangle {
        x: control.mirrored ? parent.width - width : 0
        height: boxHeight
        width: boxHeight
        color: control.down.pressed ? selectedColor : indicatorColor
        border.color: indicatorColor
        Text {
            text: "-"
            font.pixelSize: control.font.pixelSize * 2
            color: "black"
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }
}