En esta página

SpinBox QML Type

Permite al usuario seleccionar entre un conjunto de valores preestablecidos. Más...

Import Statement: import QtQuick.Controls
Inherits:

Control

Propiedades

Señales

Métodos

Descripción detallada

Caja giratoria con valor numérico y botones

SpinBox permite al usuario elegir un valor entero haciendo clic en los botones indicadores arriba o abajo, o pulsando arriba o abajo en el teclado. Opcionalmente, SpinBox también se puede hacer editable, para que el usuario pueda introducir un valor de texto en el campo de entrada.

Por defecto, SpinBox proporciona valores discretos en el rango de [0-99] con un stepSize de 1.

SpinBox {
    value: 50
}

Valores personalizados

Cuadro giratorio que muestra valores textuales

Aunque SpinBox trabaja con valores enteros, puede personalizarse para aceptar valores de entrada arbitrarios. El siguiente fragmento demuestra cómo validator, textFromValue y valueFromText pueden utilizarse para personalizar el comportamiento por defecto.

SpinBox {
    id: spinBox
    from: 0
    to: items.length - 1
    value: 1 // "Medium"

    property list<string> items: ["Small", "Medium", "Large"]

    validator: RegularExpressionValidator {
        regularExpression: new RegExp("(Small|Medium|Large)", "i")
    }

    textFromValue: function(value) {
        return items[value];
    }

    valueFromText: function(text) {
        for (var i = 0; i < items.length; ++i) {
            if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0)
                return i
        }
        return spinBox.value
    }
}

Se puede añadir un prefijo y un sufijo utilizando expresiones regulares:

SpinBox {
    id: spinBox
    from: -100
    value: 11
    to: 100
    editable: true
    anchors.centerIn: parent

    property string prefix: "L="
    property string suffix: "m"

    readonly property regexp numberExtractionRegExp: /\D*?(-?\d*\.?\d*)\D*$/

    validator: RegularExpressionValidator { regularExpression: numberExtractionRegExp }

    textFromValue: function(value, locale) {
        return prefix + Number(value).toLocaleString(locale, 'f', 0) + suffix
    }

    valueFromText: function(text, locale) {
        return Number.fromLocaleString(locale, numberExtractionRegExp.exec(text)[1])
    }
}

Véase también Tumbler, Personalización de SpinBox, y Gestión del foco en Qt Quick Controls.

Documentación de propiedades

displayText : string [read-only, since QtQuick.Controls 2.4 (Qt 5.11)]

Esta propiedad contiene el valor textual del spinbox.

El valor de la propiedad se basa en textFromValue y locale, e igual a:

var text = spinBox.textFromValue(spinBox.value, spinBox.locale)

Esta propiedad se introdujo en QtQuick.Controls 2.4 (Qt 5.11).

Ver también textFromValue.

down group

down.hovered : bool

down.implicitIndicatorHeight : real

down.implicitIndicatorWidth : real

down.indicator : Item

down.pressed : bool

Esta propiedad agrupada contiene el elemento indicador de bajada y sus propiedades asociadas.

La propiedad down.hovered se introdujo en QtQuick.Controls 2.1, y las propiedades down.implicitIndicatorWidth y down.implicitIndicatorHeight se introdujeron en QtQuick.Controls 2.5.

Véase también decrease().

editable : bool

Esta propiedad indica si el spinbox es editable. El valor por defecto es false.

Véase también validator.

from : double

Esta propiedad contiene el valor inicial del rango. El valor por defecto es 0.

Véase también to y value.

inputMethodComposing : bool [read-only, since QtQuick.Controls 2.2 (Qt 5.9)]

Esta propiedad indica si un cuadro de giro editable tiene texto parcial introducido por un método de entrada.

Mientras se está componiendo, un método de entrada puede depender de eventos de ratón o tecla de la caja de giro para editar o confirmar el texto parcial. Esta propiedad puede utilizarse para determinar cuándo desactivar los manejadores de eventos que puedan interferir con el correcto funcionamiento de un método de entrada.

Esta propiedad se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

inputMethodHints : flags [since QtQuick.Controls 2.2 (Qt 5.9)]

Esta propiedad proporciona pistas al método de entrada sobre el contenido esperado del cuadro de giro y cómo debe funcionar.

El valor por defecto es Qt.ImhDigitsOnly.

El valor es una combinación de bit a bit de flags o Qt.ImhNone si no hay ninguna sugerencia.

Las banderas que alteran el comportamiento son:

  • Qt.ImhHiddenText - Los caracteres deben estar ocultos, como se usa típicamente al introducir contraseñas.
  • Qt.ImhSensitiveData - El texto tecleado no debe ser almacenado por el método de entrada activo en ningún almacenamiento persistente como el diccionario predictivo del usuario.
  • Qt.ImhNoAutoUppercase - El método de entrada no debería intentar cambiar automáticamente a mayúsculas cuando termina una frase.
  • Qt.ImhPreferNumbers - Se prefieren los números (pero no son obligatorios).
  • Qt.ImhPreferUppercase - Se prefieren las mayúsculas (pero no son obligatorias).
  • Qt.ImhPreferLowercase - Se prefieren las minúsculas (pero no son obligatorias).
  • Qt.ImhNoPredictiveText - No utilizar texto predictivo (es decir, búsqueda en diccionario) mientras se escribe.
  • Qt.ImhDate - El editor de texto funciona como un campo de fecha.
  • Qt.ImhTime - El editor de texto funciona como un campo de tiempo.

Las banderas que restringen la entrada (banderas exclusivas) son:

  • Qt.ImhDigitsOnly - Sólo se permiten dígitos.
  • Qt.ImhFormattedNumbersOnly - Sólo se permite la entrada de números. Esto incluye el punto decimal y el signo menos.
  • Qt.ImhUppercaseOnly - Sólo se permite la introducción de letras mayúsculas.
  • Qt.ImhLowercaseOnly - Sólo se permite la entrada de letras minúsculas.
  • Qt.ImhDialableCharactersOnly - Sólo se permiten caracteres adecuados para la marcación telefónica.
  • Qt.ImhEmailCharactersOnly - Sólo se permiten caracteres adecuados para direcciones de correo electrónico.
  • Qt.ImhUrlCharactersOnly - Sólo se permiten caracteres adecuados para URLs.

Máscaras:

  • Qt.ImhExclusiveInputMask - Esta máscara devuelve un valor distinto de cero si se utiliza alguno de los indicadores exclusivos.

Esta propiedad se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

live : bool [since 6.6]

Esta propiedad mantiene si el value es actualizado cuando el usuario edita el displayText. El valor por defecto es false. Si esta propiedad es true y el valor introducido por el usuario es válido y está dentro de los límites del spinbox [from, to], el valor del SpinBox será establecido. Si esta propiedad es false o el valor introducido por el usuario está fuera de los límites, el valor no se actualizará hasta que se pulsen las teclas enter o return, o el campo de entrada pierda el foco.

Esta propiedad se introdujo en Qt 6.6.

Véase también editable y displayText.

stepSize : double

Esta propiedad contiene el tamaño del paso. El valor por defecto es 1.

Véase también increase() y decrease().

textFromValue : function

Esta propiedad contiene una función de llamada de retorno que se llama cada vez que un valor entero necesita ser convertido para mostrar texto.

La función por defecto puede ser sobreescrita para mostrar texto personalizado para un valor dado. Esto se aplica tanto a los spinboxes editables como a los no editables; por ejemplo, cuando se utilizan los botones arriba y abajo o la rueda del ratón para incrementar y decrementar el valor, el nuevo valor se convierte en texto para mostrar utilizando esta función.

La firma de la función de devolución de llamada es string function(value, locale). La función puede tener uno o dos argumentos, donde el primer argumento es el valor a convertir, y el segundo argumento opcional es la configuración regional que debe utilizarse para la conversión, si procede.

La implementación por defecto realiza la conversión utilizando Number.toLocaleString():

textFromValue: function(value, locale) { return Number(value).toLocaleString(locale, 'f', 0); }

Nota: Cuando se aplica una implementación personalizada de textFromValue para cajas de giro editables, debe proporcionarse una implementación de valueFromText que coincida para poder convertir el texto personalizado de nuevo a un valor entero.

Véase también valueFromText, validator, y locale.

to : int

Esta propiedad contiene el valor final del rango. El valor por defecto es 2.

Véase también from y value.

up group

up.hovered : bool

up.implicitIndicatorHeight : real

up.implicitIndicatorWidth : real

up.indicator : Item

up.pressed : bool

Esta propiedad agrupada contiene el elemento indicador up y sus propiedades asociadas.

La propiedad up.hovered se introdujo en QtQuick.Controls 2.1, y las propiedades up.implicitIndicatorWidth y up.implicitIndicatorHeight se introdujeron en QtQuick.Controls 2.5.

Véase también increase().

validator : Validator

Esta propiedad contiene el validador de texto de entrada para los spinboxes editables. Por defecto, SpinBox utiliza IntValidator para aceptar la entrada de números enteros.

SpinBox {
    id: control
    validator: IntValidator {
        locale: control.locale.name
        bottom: Math.min(control.from, control.to)
        top: Math.max(control.from, control.to)
    }
}

Véase también editable, textFromValue, valueFromText, locale, y Validación del texto de entrada.

value : int

Esta propiedad mantiene el valor en el rango from - to. El valor por defecto es 0.

valueFromText : function

Esta propiedad contiene una función de llamada de retorno que es llamada cada vez que el texto de entrada necesita ser convertido a un valor entero.

Esta función sólo necesita ser reemplazada cuando textFromValue es reemplazado por un spinbox editable.

La firma de la función de llamada de retorno es int function(text, locale). La función puede tener uno o dos argumentos, donde el primer argumento es el texto que debe convertirse y el segundo argumento opcional es la configuración regional que debe utilizarse para la conversión, si procede.

La implementación por defecto realiza la conversión utilizando Number.fromLocaleString():

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

Nota: Cuando se aplica una implementación personalizada de textFromValue para cajas de giro editables, se debe proporcionar una implementación de valueFromText que coincida para poder volver a convertir el texto personalizado en un valor entero.

Véase también textFromValue, validator, y locale.

wrap : bool [since QtQuick.Controls 2.3 (Qt 5.10)]

Esta propiedad indica si el spinbox se envuelve. El valor por defecto es false.

Si wrap es true, pasando de to cambia el valor a from y viceversa.

Esta propiedad se introdujo en QtQuick.Controls 2.3 (Qt 5.10).

Documentación de señales

[since QtQuick.Controls 2.2 (Qt 5.9)] valueModified()

Esta señal se emite cuando el valor del cuadro de giro ha sido modificado interactivamente por el usuario, ya sea mediante el tacto, el ratón, la rueda o las teclas. En el caso de interacción a través del teclado, la señal sólo se emite cuando el texto ha sido aceptado; es decir, cuando se pulsan las teclas intro o retorno, o el campo de entrada pierde el foco.

Nota: El manejador correspondiente es onValueModified.

Esta señal se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

Documentación del método

void decrease()

Disminuye el valor en stepSize, o 1 si stepSize no está definido.

Véase también stepSize.

void increase()

Aumenta el valor en stepSize, o 1 si stepSize no está definido.

Véase también stepSize.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.