带有 "classic" 个旋转框显示的自定义旋转框

Question

我需要为我的 QML view 使用双 spinbox ，在这种情况下，我的 spinbox 基于 this example 。

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

似乎当您使用自定义旋转框时，它不会显示为 "classic" 旋转框。是这样显示的：

但是，按钮对于我的界面来说太大了。我想知道是否有一种 将旋转框显示为 "classic" 旋转框 的简便方法，如下所示：

.

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

带有 "classic" 个旋转框显示的自定义旋转框

Custom spinbox with "classic" spinbox display

qt

qml

qspinbox

qtquickcontrols2