Qt Quick Controls 2上SpinBox的后缀选项

使用Qt快速控件，只需编辑属性“”，即可在spinbox中指定后缀（数字的单位）

---

我想知道Qt Quick Controls 2.0是否可以实现这一点，因为该属性不可用。有没有什么建议可以不用花太多精力就可以做到这一点？

更新-简易方法

import QtQuick 2.9
import QtQuick.Controls 2.2

SpinBox{
    width: 180
    height: 40
    from: 1
    to: 12
    textFromValue: function(value, locale) {
                            return (value === 1 ? qsTr("%1 hour")
                                                : qsTr("%1 hours")).arg(value);
                   }
}

旧答案

我已经创建了自己的自定义SpinBox

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

SpinBox {
    id: control
    property int buttonWidth: 40
    property int buttonHeight: 40
    property string baseColor: "#007194"
    property string suffix: ""

    value: 50
    editable: true

    contentItem: RowLayout{
        z: 2
        TextInput {
            id: txtInput
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: control.textFromValue(control.value, control.locale)
            font: control.font
            color: Qt.darker(baseColor, control.enabled ? 1 : 0.7)
            selectionColor: baseColor
            selectedTextColor: "#ffffff"
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter

            readOnly: !control.editable
            validator: control.validator
            inputMethodHints: Qt.ImhFormattedNumbersOnly
        }
        Text{
            Layout.preferredWidth: contentWidth
            Layout.fillHeight: true
            z: -1
            font: txtInput.font
            color: txtInput.color
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            text: suffix
        }
    }

    up.indicator: Rectangle {
        x: control.mirrored ? 0 : parent.width - width
        height: parent.height
        implicitWidth: buttonWidth
        implicitHeight: buttonHeight
        color: up.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? baseColor : "#bdbebf"

        Text {
            text: "+"
            font.pixelSize: control.font.pixelSize * 2
            color: Qt.darker(baseColor, control.enabled ? 1 : 0.7)
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    down.indicator: Rectangle {
        x: control.mirrored ? parent.width - width : 0
        height: parent.height
        implicitWidth: buttonWidth
        implicitHeight: buttonHeight
        color: down.pressed ? "#e4e4e4" : "#f6f6f6"
        border.color: enabled ? baseColor : "#bdbebf"

        Text {
            text: "-"
            font.pixelSize: control.font.pixelSize * 2
            color: Qt.darker(baseColor, control.enabled ? 1 : 0.7)
            anchors.fill: parent
            fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    background: Rectangle {
        implicitWidth: 140
        border.color: "#bdbebf"
    }
}

---

希望它能满足您的需要。

不幸的是，尚未实施：（请随意投票或评论，以帮助我们确定优先级）如果editable=true，这两种变体都无法正常工作