Controls i elements interactius

Fent que les vostres aplicacions siguin més interactives mitjançant l’ús de botons, controls de selecció, controls lliscants i camps de text.

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

}
Un botó on s’acaba de fer clic

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 la propietat onCheckedChanged. Funciona de manera similar a onClicked, excepte que aquí l’acció assignada s’executarà quan es canviï la propietat checked del botó. checked é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!"
    }
}
Un botó commutable

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ó 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!")
}
Un botó d’eina

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ó

Les caselles de selecció estan destinades 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
}
Un conjunt de caselles de selecció

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ó

Els botons d’opció estan dissenyats 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
    }
}
Un conjunt de botons d’opció

Commutadors (Switches)

Els commutadors estan dissenyats principalment per al seu ús en dispositius mòbils.

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’acrod. Al mòbil, en el seu lloc podem utilitzar els commutadors.

Els commutadors es poden passar d’un estat activat i desactivat. S’hi pot fer clic o tocar-los per a alternar, o es poden arrossegar cap a la posició on o off. 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
}
Un conjunt de commutadors

Controls lliscants

Els controls lliscants permeten als usuaris seleccionar certs valors fent lliscar un control al llarg d’una pista. Gràcies als QtQuick Controls, 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 control lliscant estàndard proporciona a l’usuari un control molt precís sobre la selecció que voleu realitzar.

De manera predeterminada, els controls lliscants van d’esquerra a dreta per a incrementar (i de baix a dalt per a reduir quan estan verticals). 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 prestar 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
}
Un conjunt de controls lliscants

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
}
Un conjunt de controls lliscants amb marques

Control lliscant amb un interval

Els QtQuick Controls també proporcionen controls lliscants amb un interval. 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
}
Un conjunt de controls lliscants amb un interval

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
}