Kontroller och interaktiva element

Kirigami erbjuder ett stort urval av olika interaktiva element som du kan använda i dina program. Varje olika typ har något olika interaktionsstilar, visuella stilar och funktioner. Att använda rätt typ av kontroll i dina program hjälper till att göra ditt användargränssnitt mer mottagligt och intuitiv.

Knappar

I Kirigami-program använder vi knappar från QtQuick Controls. Att använda dem är ganska rättframt: vi ställer in texten i egenskapen text och alla åtgärder vi vill utföra ställs in i egenskapen 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!")
    }

}

Ändringsbara knappar

Knapparnas beteende kan ändras för att göra dem ändringsbara: i det läget förblir de nedtryckta tills de klickas en gång till. Läget kan aktiveras genom att ställa in egenskapen checkable till true: vi kan också ställa in knappar till att vara på från början genom att ställa in egenskapen checked till true.

Vi kan få ut så mycket som möjligt av ändringsbara knappar genom att använda egenskapen onCheckedChanged. Den fungerar på liknande sätt som onClicked, utom att den tilldelade åtgärden utförs när knappens egenskap checked ändras. checked är en Boolesk egenskap, som kan vara praktiskt i vissa användarfall.

I det här exemplet ställer vi in synligheten hos en låda på plats enligt status av en ändringsbar knapp:

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

Verktygsradsknappar

Det finns en specifik knapptyp som är avsedd för att använda i verktygsrader, Controls.ToolButton. Den mest uppenbara skillnaden mellan den och en vanlig knapp är stilen, där verktygsknappar är platta (även om det går att ändra med den Booleska egenskapen flat).

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

Urvalskontroller

Urvalskontroller låter användare göra ett val eller välja ett alternativ. Det finns olika typer som är bäst lämpade i olika situationer.

Kryssrutor

Kryssrutor är avsedda för alternativ där valen inte är exklusiva och där varje val har ett klart alternativ.

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

Som du kan se, är de enkla att använda. Egenskapen checked innehåller ett Booleskt värde bestämmer om de har markerats eller inte.

Alternativknappar

Alternativknappar är konstruerade för situationer där användaren måste välja ett alternativ från en uppsättning av flera alternativ.

Alternativknappar är normalt exklusiva: bara en knapp i samma överliggande objekt kan markeras.

På samma sätt som kryssrutor kan de ställas in att vara markerade eller avmarkerade som förval med egenskapen checked.

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

Omkopplare

Omkopplare är i huvudsak konstruerade för användning på mobiler.

På skrivbordet gäller ändring av inställningar att ändra inställningen och sedan verkställa ändringen genom att klicka på knapparna 'Verkställ' eller 'Ok'. På en mobil kan vi använda omkopplare istället.

Omkopplare kan ändras mellan tillstånden på och av. De kan klickas eller beröras för att ändra dem, eller kan dras mot positionen 'på' eller 'av'. Återigen kan omkopplare ställas in att vara på eller av som förval med egenskapen checked.

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

Skjutreglage

Skjutreglage tillåter användare att välja ett visst värde genom att flytta ett grepp längs ett spår. Tack vare QtQuick Controls finns det flera typer som du kan välja bland, beroende på värdena du vill att användarna ska välja bland i ditt program.

Vanliga och streckmarkerade skjutreglage

Ett vanligt skjutreglage ger användaren mycket fin kontroll över valet de vill göra.

Normal går skjutreglage från vänster till höger för att ökas (och nerifrån och upp för att ökas när de är vertikala). Färgläggningen tillhandahåller en visuell indikering av hur stort värdet du väljer är.

Skjutreglage har några viktiga egenskaper som vi måste ta hänsyn till:

• value: innehåller värdet där greppet är placerat, och kan också ställas in manuellt för att tillhandahålla ett förvald startvärde
• to: definierar skjutreglagets intervall genom att ange det maximala värdet den kan gå till
• orientation: låter skjutreglaget ställas in till en vertikal orientering med Qt.Vertical

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

En annan användbar egenskap vi kan använda är stepSize. Att ställa in den till ett numeriskt värde låter oss skapa ett skjutreglage som låser till värden som är multipler av angiven stepSize, där multiplerna anges av streckmarkeringar. Om vi därför ställer in egenskapen till 2.0, när användaren drar skjutreglagets grepp, kan de bara välja 0.0, 2.0, 4.0, etc. upp till värdet angivet i egenskapen to.

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

Intervallskjutreglage

QtQuick Controls tillhandahåller också intervallskjutreglage. De har två grepp, och låter dig därmed definiera ett talintervall mellan de två greppen.

Två nya egenskaper är viktiga att hålla i minnet: first.value och second.value, som innehåller de två greppens värden. Liksom egenskapen value i de vanliga skjutreglagen kan de förinställas.

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

Vi kan också göra den till ett streckmarkerat skjutreglage genom att ställa in ett värde för egenskapen stepSize, på exakt samma sätt som ett vanligt skjutreglage.

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