Параметр Suffix для SpinBox на быстрых элементах Qt 2

Question

С помощью Quick Controls Qt можно указать суффикс в спинбоксе (единицы вашего номера), просто отредактировав свойство «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); 
        } 
} 

OLD ОТВЕТ

Я создал свой собственный со счётчиком.

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

Возможно, это может поместиться в соответствии с вашими потребностями.