Qt Quick Controls 2 上 SpinBox 的后缀选项

Posted 2023-02-16

【中文标题】Qt Quick Controls 2 上 SpinBox 的后缀选项

【英文标题】：Suffix option for SpinBox on Qt Quick Controls 2

【发布时间】：2017-01-26 17:17:13

【问题描述】：

使用 Qt Quick Controls，可以在微调框中指定后缀（数字的单位），只需编辑属性“suffix”。

我想知道 Qt Quick Controls 2.0 是否可以做到这一点，因为该属性不可用。 customizing the spinbox 有什么建议可以不费吹灰之力地做到这一点吗？

【问题讨论】：

很遗憾尚未实施：bugreports.qt.io/browse/QTBUG-51022（请随时投票或发表评论以帮助我们确定优先级）

【参考方案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"
    

愿它能够满足您的需求。

【讨论】：

如果 editable = true 两种变体都不能正常工作