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

}

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č z uporabo lastnosti 'onCheckedChanged'. Deluje podobno kot lastnost 'onClicked', razen tega da, se dodeljeno dejanje izvede, ko se spremeni lastnost gumba 'checked'. Lastnost 'checked' je boolova lastnost, ki lahko pride prav za posebne primere uporabe.

V tem primeru določimo 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 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

Potrditvena polja so namenjena 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 'odkljukano' ima boolovo vrednost, ki določa, ali so bili potrjeni ali ne.

Radijski gumbi

Radijski gumbi so zasnovani 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 potrditi ali počistiti potrditev z lastnostjo »checked«.

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

Stikala

Stikala (angl. switch) so namenjena predvsem uporabi v mobilnih napravah.

Na namizju spreminjanje nastavitev običajno vključuje spreminjanje nastavitve in nato uporabo nastavitve s klikom gumba »Uporabi«, »Uveljavi« ali »V redu«. Na mobilnih napravah lahko namesto tega uporabimo stikala.

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 »checked« (potrjeno).

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. Zahvaljujoč kontrolnikom QtQuick Controls obstaja več vrst, ki jih lahko izberete, odvisno od vrednosti, za naj bi jih uporabniki izberali v aplikaciji.

Standardni drsniki in drsniki s kljukico

Standardni drsnik omogoča uporabniku zelo dober nadzor nad izborom, ki ga želi opraviti.

Drsniki se privzeto povečajo od leve proti desni (in od spodaj navzgor, ko so navpični). Barvna je lahko vizualni pokazatelj, 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četna 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 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
}

Drsnik obsega

QtQuick Controls zagotavlja tudi drsnike obsega. Ti imajo dve ročici, zato vam omogoča, 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
}