Controles y elementos interactivos

Kirigami ofrece una amplia selección de distintos elementos interactivos que puede usar en sus aplicaciones. Cada tipo diferente tiene estilos de interacción, estilos visuales y funcionalidades ligeramente diferentes. El uso del tipo de control correcto en su aplicación puede ayudar a que su interfaz de usuario sea más receptiva e intuitiva.

Botones

En las aplicaciones de Kirigami, usamos botones para los controles de QtQuick. Su uso es bastante sencillo: definimos el texto en la propiedad text, y cualquier acción que deseemos realizar se define en la propiedad onClicked.

import QtQuick 2.0
import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5

Kirigami.Page {

    Controls.Button {
        text: "Beep!"
        onClicked: showPassiveNotification("Boop!")
    }

}

Botones conmutables

El comportamiento de los botones se puede cambiar para hacerlos conmutables: en este modo, permanecerán pulsados hasta que haga clic sobre ellos una vez más. Este modo se puede activar definiendo la propiedad checkable como true; también podemos hacer que los botones aparezcan pulsados de forma predeterminada asignando el valor true a la propiedad checked.

Podemos aprovechar al máximo los botones conmutables usando la propiedad onCheckedChanged. Funciona de manera similar a onClicked, excepto que aquí la acción asignada se ejecutará cuando cambie la propiedad checked del botón. checked es una propiedad booleana, que puede resultar útil para casos de uso específicos.

En este ejemplo, configuramos la visibilidad de un cajón en línea según el estado de un botón conmutable:

Controls.Button {
    text: "Toggle!!"
    checkable: true
    checked: true
    onCheckedChanged: myDrawer.visible = checked
}

Kirigami.OverlayDrawer {
    id: myDrawer
    edge: Qt.BottomEdge
    modal: false

    contentItem: Controls.Label {
        text: "Peekaboo!"
    }
}

Botones de la barra de herramientas

Existe un tipo de botón específico para usar en barras de herramientas, Controls.ToolButton. La diferencia más obvia entre este botón y uno convencional es el estilo, siendo los botones de herramientas planos (aunque esto se puede alterar con la propiedad booleana flat).

Controls.ToolButton {
    text: "Tool beep..."
    onClicked: showPassiveNotification("Tool boop!")
}

Controles de selección

Los controles de selección permiten al usuario elegir o escoger una opción. Hay distintos tipos que se adaptan mejor a diferentes situaciones.

Casillas de verificación

Las casillas de verificación están destinadas a casos en los que las opciones no son exclusivas y en las que cada opción tiene una alternativa clara.

Controls.CheckBox {
    text: "Beep!"
    checked: true
}
Controls.CheckBox {
    text: "Boop!"
    checked: false
}

Como puede ver, son fáciles de usar. La propiedad checked tiene un valor booleano que determina si se han marcado o no.

Botones de opción

Los botones de opción están diseñados para situaciones en las que el usuario debe elegir una opción de un conjunto de varias opciones.

Los botones de opción son mutuamente exclusivos de forma predeterminada: solo se puede marcar un botón del mismo elemento principal.

Al igual que las casillas de verificación, se pueden configurar para que estén marcados o desmarcados de forma predeterminada con la propiedad checked.

ColumnLayout {
    Controls.RadioButton {
        text: "Tick!"
        checked: true
    }
    Controls.RadioButton {
        text: "Tock!"
        checked: false
    }
}

Interruptores

Los interruptores están diseñados principalmente para usar en dispositivos móviles.

En el escritorio, cambiar las preferencias suele implicar un cambio de la preferencia y luego aplicar dicha preferencia pulsando un botón 'Aplicar' o 'Aceptar'. En el móvil podemos usar interruptores en su lugar.

Los interruptores se pueden conmutar entre los estados encendido y apagado. Se pueden pulsar o tocar en ellos para conmutarlos, o se pueden arrastrar hacia las posiciones de 'on' u 'off'. Una vez más, los interruptores se pueden configurar para que estén encendidos o apagados de forma predeterminada con la propiedad checked.

Controls.Switch {
    text: "Switchy"
    checked: true
}
Controls.Switch {
    text: "Swootchy"
    checked: false
}

Deslizadores

Los deslizadores permiten a los usuarios seleccionar ciertos valores deslizando un asa a lo largo de una pista. Gracias a los controles de QtQuick existen varios tipos entre los que puede elegir, según los valores que desea que los usuarios elijan en su aplicación.

Deslizadores estándares y con marcas

Un deslizador estándar proporciona al usuario un control muy preciso sobre la selección que desee realizar.

De forma predeterminada, los deslizadores van de izquierda a derecha para aumentar (o de abajo hacia arriba para cuando son verticales). La coloración proporciona un indicador visual de la magnitud del valor seleccionado.

Los deslizadores tienen algunas propiedades importantes a las que debemos prestar atención:

• value: contiene el valor en el que se coloca el asa; también se puede definir manualmente para proporcionar un valor inicial predeterminado
• to: define el intervalo del deslizador indicando el valor máximo hasta el que puede llegar
• orientation: permite situar el deslizador verticalmente si se usa el valor Qt.Vertical

Controls.Slider {
    id: normalSlider
    orientation: Qt.Vertical
    value: 5.0
    to: 10.0
}

Otra propiedad útil que podemos usar es stepSize. Si le asignamos un valor numérico podremos crear un deslizador que salta en valores que son múltiplos del stepSize indicado, estando estos múltiplos indicados mediante marcas visuales. Por lo tanto, si asignamos el valor 2.0 a esta propiedad, al arrastrar el asa del deslizador solo se podrán seleccionar los valores 0.0, 2.0, 4.0, etc. hasta el valor indicado en la propiedad to.

Controls.Slider {
    id: tickmarkedSlider
    value: 6.0
    to: 10.0
    stepSize: 2.0
}

Deslizador de intervalo

Los controles de QtQuick también proporcionan deslizadores de intervalo. Estos tienen dos asas, por lo que le permiten definir un intervalo de números entre las dos asas.

Es importante tener en cuenta dos nuevas propiedades: first.value y second.value, que contienen los valores de las dos asas. Al igual que la propiedad value de los deslizadores estándares, estas dos propiedades también se pueden establecer previamente.

Controls.RangeSlider {
    id: rangeSlider
    to: 10.0
    first.value: 3.0
    second.value: 6.0
}

También podemos hacer que contengan marcas visuales asignando un número como valor de la propiedad stepSize, del mismo modo que se hace con los deslizadores estándares.

Controls.RangeSlider {
    id: rangeTickmarkedSlider
    to: 10.0
    first.value: 4.0
    second.value: 6.0
    stepSize: 2.0
}