带“经典”旋转框显示器的自定义旋转盒

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