Controls i elements interactius

El Kirigami ofereix una àmplia selecció de diferents elements interactius que podeu utilitzar en les aplicacions. Cada tipus diferent té estils d'interacció, estils visuals i funcionalitats lleugerament diferents. Emprant el tipus de control correcte a la vostra aplicació ajudareu a fer que la interfície d'usuari sigui més sensible i intuïtiva.

Botons

En les aplicacions escrites amb el Kirigami, utilitzem els botons dels QtQuick Controls. Emprar-los és força senzill: establim el text a la propietat text i qualsevol acció que volem que realitzi s'estableix a la propietat onClicked .

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

}

Botons commutables

El comportament dels botons es pot canviar perquè es puguin commutar: en aquest mode, romandran premuts fins que s'hi faci clic una vegada més. Aquest mode es pot activar establint la propietat checkable a true. També podem establir els botons perquè es commutin de manera predeterminada establint la propietat checked a true.

Podem aprofitar al màxim els botons commutables utilitzant el controlador de la propietat onCheckedChanged que es genera automàticament a partir del senyal checked. Funciona de manera similar a onClicked, excepte que aquí l'acció assignada s'executarà quan es canviï l'estat del botó. És una propietat booleana, el qual pot ser útil per a casos específics d'ús.

En aquest exemple, establim la visibilitat d'un calaix inclòs d'acord amb l'estat d'un botó commutable:

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

Botons de la barra d'eines

Hi ha un tipus de botó específic per al seu ús en les barres d'eines, Controls.ToolButton . La diferència més òbvia entre aquest i un botó Button convencional és l'estil, amb botons d'eina plans (encara que això es pot alterar amb la propietat booleana flat).

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

Controls de la selecció

Els controls de selecció permeten als usuaris escollir o triar una opció. Hi ha tipus diferents que s'adapten millor a diferents situacions.

Caselles de selecció

Un Controls.CheckBox està destinat a opcions en què les opcions no són exclusives i en què cada opció té una alternativa clara.

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

Com podeu veure, són fàcils d'utilitzar. La propietat checked manté un valor booleà que determina si s'ha marcat o no.

Botons d'opció

Un Controls.RadioButton està dissenyat per a situacions en què l'usuari ha de triar una opció d'entre un conjunt d'opcions diverses.

De manera predeterminada, els botons d'opció són exclusius: només en el mateix element pare només se'n pot marcar un.

Igual que les caselles de selecció, es poden establir perquè estiguin marcats o desmarcats de manera predeterminada amb la propietat checked.

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

Commutadors (Switches)

A l'escriptori, canviar les opcions de configuració generalment implica canviar la configuració i després aplicar-la fent clic a un botó «Aplica» o «D'acord». Al mòbil, en el seu lloc podem utilitzar un Controls.Switch .

Els commutadors es poden alternar entre un estat activat i desactivat. Es poden alternar fent-hi clic o tocar-los, o es poden arrossegar cap a la posició activada o desactivada. Un cop més, els commutadors es poden establir perquè estiguin activats o desactivats de manera predeterminada amb la propietat checked.

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

Controls lliscants

Els controls lliscants permeten als usuaris seleccionar certs valors fent lliscar un control al llarg d'una pista. Hi ha diversos tipus entre els quals podreu triar segons els valors que us agradaria que triïn els usuaris a la vostra aplicació.

Controls lliscants estàndard i amb marques

Un Controls.Slider estàndard proporciona a l'usuari un control molt precís sobre la selecció que voleu realitzar.

En el mode d'esquerra a dreta, els controls lliscants van d'esquerra a dreta per a augmentar en l'orientació horitzontal, mentre que en el mode de dreta a esquerra van en la direcció inversa. En ambdós modes, els controls lliscants en orientació vertical van des de baix cap a dalt.

La coloració proporciona un indicador visual de com és de gran el valor que s'està seleccionant.

Els controls lliscants tenen algunes propietats importants a les quals hem de parar atenció:

• value: conté el valor en el qual es col·loca la nansa i també es pot establir manualment per a proporcionar un valor inicial predeterminat
• to: defineix l'interval del control lliscant, especificant el valor màxim fins al qual pot anar
• orientation: permet que el control lliscant s'estableixi en una orientació vertical amb Qt.Vertical.

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

Una altra propietat útil que podem utilitzar és stepSize. Establir-la en un valor numèric ens permet crear un control lliscant que s'ajusta als valors que són múltiples de la stepSize especificada, amb aquests múltiples indicats per marques d'escala. Per tant, si establim aquesta propietat a 2.0, quan l'usuari arrossega el control lliscant, només podrà seleccionar 0.0, 2.0, 4.0, etc. fins al valor especificat a la propietat to.

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

Controls lliscants amb intervals

Els QtQuick Controls també proporcionen Controls.RangeSliders . Aquests tenen dues nanses, i això permet definir un interval de nombres entre les dues nanses.

És important tenir en compte dues propietats noves: `first.value i second.value, les quals mantenen els valors de les dues nanses. Igual que la propietat value dels controls lliscants estàndard, aquests es poden preestablir.

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

També podem convertir-lo en un control lliscant amb marques establint el valor de la propietat stepSize a un número, exactament de la mateixa manera que un control lliscant estàndard.

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