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

Nota
Con el tema Brisa predeterminado de KDE Plasma puede ser difícil saber si un botón está conmutado, ya que los botones son de color azul cuando se pulsa en ellos. Asegúrese de tener esto en cuenta al crear su aplicación: un control diferente podría ser más fácil de usar.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
A Controls.CheckBox is meant for options where the choices are non-exclusive and where each option has a clear alternative.
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
A Controls.RadioButton is designed for situations where the user must choose one option from a set of several options.
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
Sliders allow users to select certain values by sliding a handle along a track. There are several types that you can choose from depending on the values you'd like your users to choose in your application.
Deslizadores estándares y con marcas
A standard Controls.Slider provides the user with very fine control over the selection they wish to make.
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
}

Another useful property we can use is stepSize. Setting this to a numerical value allows us to create a slider that snaps onto values that are multiples of the specified stepSize
, with these multiples being indicated by tickmarks. Therefore if we set this property to 2.0
, when the user drags the slider handle, they will only be able to select 0.0
, 2.0
, 4.0
, etc. up to the value specified in the to
property.
Controls.Slider {
id: tickmarkedSlider
value: 6.0
to: 10.0
stepSize: 2.0
}

Deslizadores de intervalo
QtQuick Controls also provides Controls.RangeSliders . These have two handles, hence allowing you to define a range of numbers between the two handles.
Two new properties are important to keep in mind: first.value and second.value, which hold the values of the two handles. Like the value property of the standard sliders, these can be pre-set.
Controls.RangeSlider {
id: rangeSlider
to: 10.0
first.value: 3.0
second.value: 6.0
}

We can also make it a tickmarked slider by setting the stepSize property value to a number, in the exact same way as a standard slider.
Controls.RangeSlider {
id: rangeTickmarkedSlider
to: 10.0
first.value: 4.0
second.value: 6.0
stepSize: 2.0
}