Kontrolniki in interaktivni elementi
Kirigami ponuja širok izbor različnih interaktivnih elementov, ki jih lahko uporabite v vaših aplikacijah. Vsaka različna vrsta ima nekoliko različne sloge interakcije, vizualne sloge in funkcionalnost. Uporaba pravega nadzora v aplikaciji lahko pomaga, da vaš uporabniški vmesnik bolj odziven in intuitiven.
Gumbi
V aplikacijah Kirigami uporabljamo kontrolne gumbe iz QtQuick Controls. Njihova uporaba je precej enostavna: besedilo nastavimo na lastnost text in katerokoli dejanje, ki želimo da ga izvede, je nastavljeno na lastnost 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!")
}
}

Preklopni gumbi
Obnašanje gumbov je mogoče spremeniti tako, da bodo preklopljivi: v tem načinu bodo ostali pritisnjeni, dokler ne kliknete še enkrat. Ta način je mogoče aktivirati z nastavitvijo lastnosti checkable na 'true'; gumbe pa lahko nastavimo tako, da so privzeto preklopljeni z nastavitvijo lastnosti checked na 'true'.
Iz preklopnih gumbov lahko izvlečemo kar največ obdelovalnika signala `onCheckedChanged ', ki je samodejno generiran iz signala checked. Deluje podobno kot "onClicked", razen da se tu dodeljeno dejanje izvedlo, ko se stanje gumba spremeni. Gre za logično lastnost, ki je lahko koristna za posebne primere uporabe.
V tem primeru nastavimo vidnost v predalu vrstice glede na stanje preklopnega gumba:
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!"
}
}

Opomba
S privzeto temo Sapica v KDE Plasmi je težko ugotoviti, ali je gumb preklopljen, saj so gumbi obarvani modro, ko jih kliknete. Upoštevajte to pri kreiranju aplikacije: drug kontrolnik bi morda bil uporabniku bolj prijazen.Gumbi orodne vrstice
Obstaja določena vrsta gumba namenjena rabi v orodnih vrsticah Controls.ToolButton . Najbolj očitna razlika med tem in običajnim gumbom Button je njegov slog, pri čemer so orodni gumbi ploščati (čeprav je to mogoče spremeniti z logično lastnostjo flat).
Controls.ToolButton {
text: "Tool beep..."
onClicked: showPassiveNotification("Tool boop!")
}

Izbirni kontrolniki
Kontrolniki izbire uporabnikom omogočijo izbiro ali izberejo možnost. Obstajajo različne vrste, ki so najbolje primerni za različne situacije.
Potrditvena polja
Potrditveno polje Controls.CheckBox je namenjeno možnostim, kjer so izbire neizključujoče in kjer ima vsaka možnost jasno alternativo.
Controls.CheckBox {
text: "Beep!"
checked: true
}
Controls.CheckBox {
text: "Boop!"
checked: false
}

Kot vidite, so preprosti za uporabo. Lastnost checked ima boolovo vrednost, ki določa, ali so bili potrjeni ali ne.
Radijski gumbi
Radijski gumb Controls.RadioButton je zasnovan za situacije, ko mora uporabnik izbrati eno možnost iz velikega nabora možnosti.
Radijski gumbi so privzeto izključujoči: v istem nadrejenem elementu je mogoče potrditi samo en gumb.
Tako kot potrditvena polja jih je mogoče nastaviti, da jih je mogoče privzeto nastaviti na potrjeno ali nepotrjeno z lastnostjo checked.
ColumnLayout {
Controls.RadioButton {
text: "Tick!"
checked: true
}
Controls.RadioButton {
text: "Tock!"
checked: false
}
}

Stikala
Na namizju spreminjanje nastavitev običajno vključuje spreminjanje nastavitve in nato uporabo nastavitve s klikom gumba »Uveljavi« ali »V redu«. Na mobilnih napravah lahko namesto tega uporabimo stikala Controls.Switch .
Stikala je mogoče preklopiti med vklopljenim in izklopljenim stanjem. Lahko jih kliknete ali tapnete, da jih preklopite, ali pa jih povlečete proti položaju »vključeno« ali »izključeno«. Stikala lahko privzeto nastavite tako, da so vklopljena ali izklopljena z lastnostjo potrjeno checked.
Controls.Switch {
text: "Switchy"
checked: true
}
Controls.Switch {
text: "Swootchy"
checked: false
}

Drsniki
Drsniki omogočajo uporabnikom, da izberejo določene vrednosti, tako da drsijo ročico vzdolž steze. Obstaja več vrst, ki jih lahko izberete, odvisno od vrednosti, za naj bi jih uporabniki izbrali v aplikaciji.
Standardni drsniki in drsniki s kljukico
Standardni drsnik Controls.Slider omogoča uporabniku zelo dober nadzor nad izborom, ki ga želi opraviti.
V načinu od leve proti desni drsniki od levo proti desni večajo, ko so v horizontalni orientaciji, medtem ko v načinu desno proti levi v obratni smeri. V obeh načinih drsniki v navpični orientaciji gredo od spodaj navzgor.
Barvanje nudi vizualni prikaz, kako velika je vrednost, ki jo izbirate.
Drsniki imajo nekaj pomembnih lastnosti, na katere moramo biti pozorni:
- vrednost value: vsebuje vrednost, na katero je pritrjen ročaj, in ga je mogoče nastaviti tudi ročno, da se zagotovi privzeta začetno vrednost
- to: določa obseg drsnika tako, da določi njegovo največjo vrednost, kamor lahko gre
- usmerjenost orientation: omogoča, da je drsnik nastavljen na navpično usmerjenost s 'Qt.Vertical'
Controls.Slider {
id: normalSlider
orientation: Qt.Vertical
value: 5.0
to: 10.0
}

Še ena uporabna lastnost, ki jo lahko uporabimo, je velikost koraka stepSize. Nastavitev velikosti koraka na številsko vrednost nam omogoča, da ustvarimo drsnik, ki se zatakne na vrednosti, ki so večkratniki določene velikosti koraka 'stepSize', pri tem pa so ti večkratniki označeni s črtico. Če bomo to lastnost nastavili na '2.0', bo uporabnik povlekel drsnik in bo lahko izbral le '0.0', '2.0', '4.0' itd. do vrednosti, ki je določena v lastnosti 'to'.
Controls.Slider {
id: tickmarkedSlider
value: 6.0
to: 10.0
stepSize: 2.0
}

Drsniki obsega
QtQuick Controls zagotavlja tudi drsnike obsega Controls.RangeSliders . Ti imajo dve ročici, zato vam omogočajo, da določite obseg števil med obema ročajema.
V mislih je treba imeti v mislih dve novi lastnosti: first.value in second.value, ki imata vrednosti dveh ročk. Tako kot lastnost value standardnih drsnikov, so te lahko vnaprej nastavljene.
Controls.RangeSlider {
id: rangeSlider
to: 10.0
first.value: 3.0
second.value: 6.0
}

Prav tako lahko naredimo s črticami označen drsnik tako, da nastavimo vrednost lastnosti stepSize na številko na enak način kot standardni drsnik.
Controls.RangeSlider {
id: rangeTickmarkedSlider
to: 10.0
first.value: 4.0
second.value: 6.0
stepSize: 2.0
}