Kontroloj kaj interagaj elementoj

Kirigami ofertas ampleksan elekton de malsamaj interagaj elementoj, kiujn vi povas uzi en viaj aplikoj. Ĉiu malsama tipo havas iomete malsamajn interagajn stilojn, vidajn stilojn kaj funkciojn. Uzi la ĝustan tipon de regilo en via aplikaĵo povas helpi igi vian uzantinterfacon pli respondema kaj intuicia.

Butonoj

En Kirigami-programoj, ni uzas butonojn de QtQuick Controls. Uzi ilin estas sufiĉe simpla: ni agordas la tekston al la propreco text kaj ajna ago kiun ni volas. ĝi por plenumi estas agordita al la proprieto 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!")
    }

}

Ŝanĝeblaj butonoj

La konduto de butonoj povas esti ŝanĝita por igi ilin ŝalteblaj: en ĉi tiu reĝimo, ili restos premitaj ĝis alklako denove. Ĉi tiu reĝimo povas esti aktivigita agordante ilian kontroleblan proprecon al vera; ni ankaŭ povas agordi butonojn por esti ŝaltitaj defaŭlte agordante checked al true.

Ni povas eltiri la plej grandan profiton de ŝanĝeblaj butonoj uzante la signal-traktilon onCheckedChanged' kiu estas [aŭtomate generita](https://doc.qt.io/qt-6/qtqml-syntax-signals.html#property-change- signal-traktantoj) de la [kontrolita](https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html#checked-prop) signalo. Ĝi funkcias simile al onClicked`, krom ĉi tie la asignita ago estos efektivigita kiam la stato de la butono ŝanĝiĝos. Ĝi estas bulea propreco, kiu povas esti utila por specifaj uzkazoj.

En ĉi tiu ekzemplo, ni agordas la videblecon de enlinia tirkesto laŭ la stato de ŝanĝebla butono:

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

Ilobreto-butonoj

Estas specifa butontipo destinita por uzo en ilbretoj, Controls.ToolButton . La plej evidenta diferenco inter ĉi tio kaj konvencia Butono estas la stilo, kun ilbutonoj plataj (kvankam tio estas ŝanĝebla kun la bulea eco [flat](https://doc. qt.io/qt-6/qml-qtquick-controls2-button.html#flat-prop)).

Controls.ToolButton {
    text: "Tool beep..."
    onClicked: showPassiveNotification("Tool boop!")
}

Elektaj kontroloj

Elektaj kontroloj lasas uzantojn fari elekton aŭ elekti opcion. Estas malsamaj tipoj, kiuj plej taŭgas por malsamaj situacioj.

Markobutonoj

Controls.CheckBox estas signifita por opcioj kie la elektoj estas neekskluzivaj kaj kie ĉiu opcio havas klaran alternativon.

Controls.CheckBox {
    text: "Beep!"
    checked: true
}
Controls.CheckBox {
    text: "Boop!"
    checked: false
}

Kiel vi povas vidi, ili estas simplaj uzeblaj. La checked propreco tenas bulean valoron determinantan ĉu aŭ ne ili estis kontrolitaj.

Radiobutonoj

Controls.RadioButton estas desegnita por situacioj kie la uzanto devas elekti unu opcion el aro de pluraj opcioj.

Radiobutonoj estas defaŭlte ekskluzivaj: nur unu butono povas esti markita en la sama gepatra ero.

Kiel markobutonoj, ili povas esti agorditaj por esti markitaj aŭ malmarkitaj defaŭlte kun la markita propreco.

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

Ŝaltiloj

Sur la labortablo, ŝanĝi agordojn kutime implicas ŝanĝi la agordojn kaj poste apliki ĝin alklakante butonon "Apliki" aŭ "Bone". Ĉe poŝtelefono, ni povas uzi Controls.Switch anstataŭe.

Ŝaltiloj povas esti ŝanĝitaj inter ŝaltita kaj malŝaltita stato. Ili povas esti ŝanĝitaj alklakante aŭ frapetante ilin, aŭ ili povas esti trenitaj al la enŝaltita aŭ malŝaltita pozicio. Denove, ŝaltiloj povas esti ŝaltitaj aŭ malŝaltitaj defaŭlte kun la propreco checked.

Controls.Switch {
    text: "Switchy"
    checked: true
}
Controls.Switch {
    text: "Swootchy"
    checked: false
}

Ŝoviloj

Glitiloj permesas al uzantoj elekti certajn valorojn glitante tenilon laŭ trako. Estas pluraj tipoj, kiujn vi povas elekti laŭ la valoroj, kiujn vi ŝatus, ke viaj uzantoj elektu en via aplikaĵo.

Normaj kaj markitaj glitiloj

Norma Controls.Slider provizas la uzanton per tre bona rego pri la elekto kiun ili volas fari.

En Dekstre al Dekstre reĝimo, glitiloj iras maldekstren dekstren por pliiĝi kiam en horizontala orientiĝo, dum en Dekstre al Maldekstren reĝimo ili iras en la inversa direkto. En ambaŭ reĝimoj, glitiloj en vertikala orientiĝo iras de malsupre supren.

La kolorigo provizas vidan indikilon pri kiom granda estas la valoro, kiun vi elektas.

Glitiloj havas kelkajn gravajn ecojn, pri kiuj ni devas atenti:

• valoro: enhavas la valoron ĉe kiu la tenilo estas metita, kaj ankaŭ povas esti agordita mane al provizi defaŭltan komencan valoron
• al: difinas la gamon de la glitilo specifante la maksimuman valoron al kiu ĝi povas iri
• orientiĝo: permesas la glitilon esti agordita al vertikala orientiĝo kun Qt.Vertical

Controls.Slider {
    id: normalSlider
    orientation: Qt.Vertical
    value: 5.0
    to: 10.0
}

Alia utila propreco, kiun ni povas uzi, estas stepSize. Agordi ĉi tion al nombra valoro ebligas al ni krei glitilon kiu alklakas valorojn kiuj estas multobloj de la specifita stepSize, kun ĉi tiuj multobloj indikitaj per tickmarkoj. Tial se ni agordas ĉi tiun proprecon al 2.0, kiam la uzanto trenas la glitilon, ili nur povos elekti 0.0, 2.0, 4.0, ktp. ĝis la valoro specifita en la to propreco.

Controls.Slider {
    id: tickmarkedSlider
    value: 6.0
    to: 10.0
    stepSize: 2.0
}

Gamaj glitiloj

QtQuick Controls ankaŭ provizas Controls.RangeSliders . Ĉi tiuj havas du tenilojn, tial permesante al vi difini gamon da nombroj inter la du teniloj.

Du novaj ecoj estas grave memori: first.value kaj [second.value] (https://doc.qt.io/qt-5/qml-qtquick-controls2-rangeslider.html#second-prop), kiuj tenas la valorojn de la du teniloj. Kiel la valoro propreco de la normaj glitiloj, ĉi tiuj povas esti antaŭmetitaj.

Controls.RangeSlider {
    id: rangeSlider
    to: 10.0
    first.value: 3.0
    second.value: 6.0
}

Ni ankaŭ povas fari ĝin markita glitilo fiksante la proprecvaloron stepSize al nombro, en sammaniere kiel norma glitilo.

Controls.RangeSlider {
    id: rangeTickmarkedSlider
    to: 10.0
    first.value: 4.0
    second.value: 6.0
    stepSize: 2.0
}