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.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!")
}
}
Ä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!"
}
}
Anmärkning
Med det förvalda temat Breeze i KDE Plasma kan det vara svårt att avgöra om en knapp är på, eftersom knappar är blåfärgade när de är klickade på. Säkerställ att du tar hänsyn till det när du skapar ditt program: en annan kontroll kan vara mer användarvänlig.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!")
}
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
}
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
}
}
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
}
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
}
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
}
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
}
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
}