Qtクイックコントロール2のスピンボックスのサフィックスオプション

Question

Qtクイックコントロールでは、スピンボックス内のサフィックス（番号の単位）を指定できます。プロパティ "suffix"を編集するだけです。

このプロパティが利用できないQt Quick Controls 2.0では、これが可能かどうかは疑問でした。あまりにも多くの努力なしにどのようにcustomizing the spinboxでそれを行うための任意の提案？

Answer 1

UPDATE - EASY WAY

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 ANSWER

私は自分のカスタムスピンボックスを作成しました。

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

あなたのニーズに合わせてください。