qt - QML - SpinBox - 数据验证

Question

我有以下 SpinBox 模型，我正在尝试使用新的 QtQuick.Control 2 重新创建它，因为它使用的是版本 1。我遇到了一些我不知道如何解决的问题。

1. 在验证方面，我应该不能在后缀方面写任何东西，只能在数字部分。此外，我不应该被允许在编辑时从那里远程后缀

2. 我的宽度应该是固定的，我不应该被允许写更多的东西。

我的代码：

import QtQuick 2.6
import QtQuick.Controls 2
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

SpinBox {
    id: root
    property color borderColor: "red"
    property string multipleValuesTooltip: ""
    property color backgroundColor: "yellow"
    property bool showTooltip: true
    font.pointSize: 10

    property int maximumValue: 50
    property int minimumValue: 0
    property string suffix: ""
    property int decimals: 0
    to: maximumValue
    from: minimumValue
    editable: true
    rightPadding:  {
        console.log(root.contentItem.height)
        return Math.max(40, Math.round(root.contentItem.height))
    }

    textFromValue: function(value, locale) {
        return qsTr("%1"+suffix).arg(value);
    }

    contentItem: TextInput {
        z: 5
        text: root.textFromValue(root.value, root.locale)

        font: root.font
        color: "white"
        selectionColor: "#21be2b"
        selectedTextColor: "#ffffff"
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter
        validator: root.validator
        inputMethodHints: Qt.ImhFormattedNumbersOnly
    }
    up.indicator: Rectangle {
        height: parent.height / 2
        anchors.right: parent.right
        anchors.top: parent.top
        implicitWidth: 20 // Adjust width here
        implicitHeight: {
            console.log(root.contentItem.height)
            return root.contentItem.height - 10
        }
        color: root.up.pressed ? "red" : "pink"
        Image {
            source: "qrc:/resources/arrow-down.png"
            height: Math.min(15, sourceSize.height)
            width: Math.min(30, sourceSize.width)
            anchors.centerIn: parent
            rotation: 180
        }
    }
    down.indicator: Rectangle {
        height: parent.height / 2
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        implicitHeight: root.contentItem.height - 10
        implicitWidth: {
            console.log("W: ",root.width)
            return 20
        }
        color: root.down.pressed ? "red" : "pink"

        Image {
            source: "qrc:/resources/arrow-down.png"
            height: Math.min(15, sourceSize.height)
            width: Math.min(30, sourceSize.width)
            anchors.centerIn: parent
        }
    }
    background: Item {
        implicitHeight: root.height === 0 ? Math.max(30, Math.round(root.contentItem.height * 1.2)) : root.height
        implicitWidth: root.contentItem.width + leftPadding +rightPadding

        baselineOffset: root.anchors.baselineOffset

        Rectangle {
            id: baserect
            anchors.fill: parent
            color: "purple"
            radius: 3
        }

        Rectangle { // Border only
            anchors.fill: parent
            border.color: "black"
            color: "transparent"
            radius: 3
        }

        Rectangle {
            anchors.right: parent.right
            anchors.rightMargin: root.rightPadding - 10
            anchors.verticalCenter: parent.verticalCenter
            color: "black"
            height: parent.height - parent.height/5
            width: 1
        }
    }
}

无论我在哪里搜索，我都找不到任何文档或任何类型的信息。如果你们中的任何人可以帮助我，我将不胜感激。