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

In Kirigami apps, we use buttons from QtQuick Controls. Using them is pretty straightforward: we set the text to the text property and any action we want it to perform is set to the onClicked property.

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20

Kirigami.Page {

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

}

Botones conmutables

The behavior of buttons can be changed to make them toggleable: in this mode, they will stay pressed until clicked on once more. This mode can be activated by setting their checkable property to true; we can also set buttons to be toggled on by default by setting checked to true.

We can get the most out of toggleable buttons by using the onCheckedChanged signal handler which is automatically generated from the checked signal. It works similarly to onClicked, except here the assigned action will be executed when the button's state changes. It is a boolean property, which can come in handy for specific use cases.

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

There is a specific button type meant for use in toolbars, Controls.ToolButton . The most obvious difference between this and a conventional Button is the styling, with toolbuttons being flat (though this is alterable with the boolean property 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

Una Controls.CheckBox es adecuada para opciones donde las elecciones 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
}

As you can see, they are simple to use. The checked property holds a boolean value determining whether or not they have been checked.

Botones de opción

Un Controls.RadioButton está diseñado 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.

Like checkboxes, they can be set to be checked or unchecked by default with the checked property.

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

Interruptores

On the desktop, changing settings usually involves changing the setting and then applying it by clicking on an "Apply" or "OK" button. On mobile, we can use a Controls.Switch instead.

Switches can be toggled between an on and off state. They can be toggled by clicking or tapping on them, or they can be dragged towards the on or off position. Once again, switches can be set to be on or off by default with the checked property.

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. 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 Controls.Slider estándar proporciona al usuario un control muy preciso sobre la selección que desee realizar.

In Left to Right mode, sliders go left to right to increase when in horizontal orientation, while in Right to Left mode they go in the reverse direction. In both modes, sliders in vertical orientation go from the bottom up.

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
}

Deslizadores de intervalo

Los controles de QtQuick también proporcionan Controls.RangeSliders . 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
}