帶「經典」旋轉框顯示器的自定義旋轉盒

Question

我需要使用雙倍spinbox作爲我的QML view，在這種情況下，我基於this example上的我的spinbox。

SpinBox { 
    id: spinbox 
    from: 0 
    value: 110 
    to: 100 * 100 
    stepSize: 100 
    anchors.centerIn: parent 

    property int decimals: 2 
    property real realValue: value/100 

    validator: DoubleValidator { 
     bottom: Math.min(spinbox.from, spinbox.to) 
     top: Math.max(spinbox.from, spinbox.to) 
    } 

    textFromValue: function(value, locale) { 
     return Number(value/100).toLocaleString(locale, 'f', spinbox.decimals) 
    } 

    valueFromText: function(text, locale) { 
     return Number.fromLocaleString(locale, text) * 100 
    } 
} 

看起來，當您使用自定義旋轉框時，它不會顯示爲「經典」旋轉框。它顯示是這樣的：

但是，按鈕是太大了我的界面。我想知道是否有簡便的方法來將spinbox作爲「經典」spinbox這樣顯示：

。

Answer 1

如果你有使用項目中的舊QtQuick.Controls 1.x ......
毫無保留您可以使用同一個文件中QtQuick.Controls 1.x和QtQuick.Controls 2.0，通過使用前綴。

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Controls 1.4 as OldCtrl 

ApplicationWindow { // Unprefixed, therefor from the new QtQuick.Controls 2.0 
    id: root 
    visible: true 
    width: 400; height: 450 

    OldCtrl.SpinBox { 
     width: 100 
     value: 20 
     decimals: 2 
    } 
} 

下面是該SpinBox

文檔如果你想使用QtQuick.Controls 2.x，那麼你可以自定義項目的up.indicator和down.indicator

SpinBox { 
    id: sb 
    value: 20 
    up.indicator: Rectangle { 
     height: parent.height/2 
     anchors.right: parent.right 
     anchors.top: parent.top 
     implicitHeight: 40 
     implicitWidth: 40 // Adjust width here 
     color: sb.up.pressed ? "#e4e4e4" : "#f6f6f6" 
     border.color: enabled ? "#21be2b" : "#bdbebf" 
     Text { 
      text: '+' 
      anchors.centerIn: parent 
     } 
    } 
    down.indicator: Rectangle { 
     height: parent.height/2 
     anchors.right: parent.right 
     anchors.bottom: parent.bottom 
     implicitHeight: 40 
     implicitWidth: 40 // Adjust width here 
     color: sb.down.pressed ? "#e4e4e4" : "#f6f6f6" 
     border.color: enabled ? "#21be2b" : "#bdbebf" 
     Text { 
      text: '-' 
      anchors.centerIn: parent 
     } 
    } 
}