qt - Qt Quick Controls 2 上 SpinBox 的后缀选项

Question

使用 Qt Quick Controls，可以在旋转框中指定后缀(数字的单位)，只需编辑属性“suffix”即可。

我想知道这是否适用于 Qt Quick Controls 2.0，因为该属性不可用。关于如何做到这一点的任何建议 customizing the spinbox不费吹灰之力？

Answer 1

更新 - 简单的方法

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"
    }
}

希望它能满足您的需求。