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

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
}