具有“经典"标记的自定义旋转框旋转框显示 [英] Custom spinbox with "classic" spinbox display

问题描述

我需要为QML view使用双精度spinbox，在这种情况下，我将spinbox基于

I need to use a double spinbox for my QML view and in this case, I based my spinbox on 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
    }
}

似乎在使用自定义旋转框时，它不会显示为经典"旋转框.它显示如下:

It seems that when you use a custom spinbox, it is not displayed as a "classic" spinbox. It is displayed like this:

但是，按钮对于我的界面来说太大了.我想知道有没有一种简单的方法可以将旋转框显示为经典"旋转框，如下所示:

However, buttons are too big for my interface. I would like to know is there is a easy way to display the spinbox as a "classic" spinbox like this:

.

推荐答案

如果您对在项目中使用旧的QtQuick.Controls 1.x没有保留意见...
通过使用前缀，可以在同一文件中同时使用QtQuick.Controls 1.x和QtQuick.Controls 2.0.

If you have no reservations on using the old QtQuick.Controls 1.x in your project...
You can use both QtQuick.Controls 1.x and QtQuick.Controls 2.0 in the same file, by using prefixes.

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

Here is the documentation for this SpinBox

如果要使用QtQuick.Controls 2.x，则可以为up.indicator和down.indicator

If you want to use the QtQuick.Controls 2.x, then you can define custom Items for up.indicator and 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
        }
    }
}

这篇关于具有“经典"标记的自定义旋转框旋转框显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！