Kontroller och interaktiva element

Gör dina program mer interaktiva genom att använda knappar, urvalskontroller, skjutreglage och textfält.

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

}
Ett fönster som innehåller knappen "Beep" på den övre vänstra sidan, som visar ett passivt meddelande "Boop" längst ner i fönstret när du klickar på den

Ä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 signalhanteraren onCheckedChanged som automatiskt genereras från signalen checked. Den fungerar på liknande sätt som onClicked, utom att den tilldelade åtgärden utförs när knappens tillstånd ändras. Den är en Boolesk egenskap, som kan vara praktiskt i specifika 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!"
    }
}
Ett fönster som innehåller en ändringsbar knapp "Toggle" som när den ändras visar "Peekaboo" i området contentItem som en statusrad

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 Button ä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!")
}
Ett fönster som visar verktygsknappen "Toolbeep" som är helt platt

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

En Controls.CheckBox ä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
}
Ett fönster som visar en uppsättning kryssrutor där mer än en kryssruta kan markeras samtidigt

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

En Controls.RadioButton ä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.

Liksom 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
    }
}
Ett fönster som visar en uppsättning alternativknappar där endast en alternativknapp kan markeras samtidigt

Omkopplare

På skrivbordet gäller ändring av inställningar att ändra inställningen och sedan verkställa den genom att klicka på knapparna 'Verkställ' eller 'Ok'. På en mobil kan vi använda en Controls.Switch 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
}
Ett fönster som visar en uppsättning omkopplare som fungerar som alternativ

Skjutreglage

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

Vanliga och streckmarkerade skjutreglage

En vanligt Controls.Slider ger användaren mycket fin kontroll över valet de vill göra.

I vänster till höger-läge ökar reglagen från vänster till höger i horisontell orientering, medan de i höger till vänster-läge går i motsatt riktning. I båda lägena går reglagen i vertikal orientering nerifrån och upp.

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
}
Ett fönster som visar en uppsättning reglage, en horisontell och en vertikal

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
}
Ett fönster som visar en uppsättning graderade skjutreglage som är symmetriskt uppdelade, där varje gradering kallas ett steg

Intervallreglage

QtQuick Controls tillhandahåller också Controls.RangeSliders . 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 ställas in i förväg.

Controls.RangeSlider {
    id: rangeSlider
    to: 10.0
    first.value: 3.0
    second.value: 6.0
}
Ett fönster som visar en uppsättning intervallreglage med två rörliga cirklar som används för att avgränsa ett visst intervall

Vi kan också göra det 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
}