Aranĝoj, ListViews kaj Kartoj

Eltrovi la malsamajn manierojn meti aferojn sur paĝon

Disponi vian enhavon

Nun kiam ni komprenas kiel funkcias paĝoj, estas tempo aldoni aĵojn al ili. Ni ekzamenos kelkajn gravajn aranĝajn komponantojn kaj elementojn, kiuj estos utilaj dum desegnado de nia apo.

Ĝis la fino de ĉi tiu sekcio vi havos aspektantan aplikaĵon.

ListViews

Se vi iam uzis Discover, NeoChat, aŭ la Sistemajn Agordojn de Plasma, vi havos trovi ListView. Tute simple, ĝi ebligas al vi montri datumojn en listo.

pageStack.initialPage: Kirigami.ScrollablePage {
    // ...
    Kirigami.CardsListView {
       id: cardsView
        model: kountdownModel
        delegate: kountdownDelegate
    }
}

Tio ŝajnas kripta, sed ne maltrankviliĝu. Ni komencu de la komenco.

Ni aldonas ĉi tiun komponanton ene de nia Kirigami.ScrollablePage de la lasta lernilo.

Ni uzas Kirigami.CardsListView, kiu estas ListView kiu ebligas al ni facile montri kartojn en listo. Tamen, ListViews estas faritaj por montri datumojn prenitajn de modelo - por aŭtomate plenigi sin de aro de datumoj al kiuj ni montras ĝin. Jen kie la propreco modelo eniras: en ĉi tiu ekzemplo, ĝi montras al kountdownModel.

Modelo

Kirigami.ApplicationWindow {
    // ...
    ListModel {
        id: kountdownModel
        // Ĉiu ListElement estas elemento en la listo, enhavante informojn
        ListElement {
            name: "Dog birthday!!"
            description: "Big doggo birthday blowout."
            date: 100
        }
    }
    // ...
}

Ni aldonas nian kountdownModel ene de la Kirigami.ApplicationWindow de la lasta lernilo.

Modelo difinas la manieron kiel dateneniro estas strukturita. Nia countdownModel konsistos el nur unu elemento nuntempe. Rigardante nian ListElement supre, ni povas vidi kiel la datumoj de nia kountdownModel estas strukturitaj: ĝi enhavas nomo, priskribo kaj dato. Ĉi tio ne estas fiksita, kaj vi eble havas malsamajn specojn de datumoj en via modelo. La unuaj du estas nur ĉenoj, kaj la tria estas nombro, kiun ni uzas kiel anstataŭilon.

Noto

Ĉar QML estas konstruita sur Ĝavoskripto, multaj el la funkcioj de ĉi tiu lingvo estas disponeblaj por uzo en QML-dosieroj. Tamen, QML-variabloj devas esti prefiksitaj per proprieto, krom se ĝi estas ene de JS-kodbloko. Vi povas legi pli pri ĝi en ĉi tiu paĝo.

Modeloj ankaŭ estas utilaj en kiel ili povas esti modifitaj per la uzo de pluraj metodoj. Iuj gravaj estas:

ListModel.append(youobject: jsobject) aldonas JavaScript-objekton (JSObject) youobject al la ListModel kaj metas ĝin post la lasta elemento en la modelo. Por ke ĉi tio okazu ĝuste, vi devas provizi JSObject kun la ĝustaj proprecoj kaj respondaj datumtipoj.
ListModel.get(index: int) resendas la JSObject ĉe la indeksa loko, kiun vi provizas.
ListModel.remove(index: int, count: int) forigas la JSObject ĉe la provizita ` indeksa loko, kaj tiom da post tiu indeksa loko kiom vi metas en "kalkulo" (1 inkluzivas nur la JSObject ĉe la provizita indekso)
ListModel.set (indekso: int, viaobjekto: jsobject) ŝanĝas la eron ĉe la provizita index loko kun la valoroj provizitaj en youobject. Samaj reguloj kiel ĉe append().

Delegitoj

Dum nia kountdownModel enhavas la datumojn kiuj estos montritaj, nia kountdownDelegate pritraktos kiel la datumoj estos montritaj en la [ListView](https://doc.qt.io/qt-6/qml-qtquick-listview .html). Por tio ni uzas Kirigami.CardsListView desegnitan por montri kartspecajn delegitojn, kaj tiuj delegitoj estos vide reprezentitaj per Kirigami.AbstractCard.

Delegitoj aŭtomate ricevas la ecojn de la ListElements kiujn ni specifis en nia modelo. Ni povas do nur rilati al iliaj nomo', priskribo', kaj `dato' proprecoj kvazaŭ ili estus konvenciaj variabloj ene de nia delegito.

Konstruante la delegitan karton

La Component kiu reprezentos nian delegiton povas esti aldonita ene de nia Kirigami.ApplicationWindow. Ni tiam kontrolos kion faras ĉiu parto de nia delegita komponanto.

Kirigami.ApplicationWindow {
    // ...
    Component {
        id: kountdownDelegate
        Kirigami.AbstractCard {
            contentItem: Item {
                // implicitWidth/Height difinas la naturan larĝon/alton de ero se neniu larĝo aŭ
                // alteco estas specifita. La suba agordo difinas la preferatan grandecon de
                // komponento laŭ ĝia enhavo
                implicitWidth: delegateLayout.implicitWidth
                implicitHeight: delegateLayout.implicitHeight
                GridLayout {
                    id: delegateLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }
                    rowSpacing: Kirigami.Units.largeSpacing
                    columnSpacing: Kirigami.Units.largeSpacing
                    columns: root.wideScreen ? 4 : 2

                    Kirigami.Heading {
                        Layout.fillHeight: true
                        level: 1
                        text: date
                    }

                    ColumnLayout {
                        Kirigami.Heading {
                            Layout.fillWidth: true
                            level: 2
                            text: name
                        }
                        Kirigami.Separator {
                            Layout.fillWidth: true
                            visible: description.length > 0
                        }
                        Controls.Label {
                            Layout.fillWidth: true
                            wrapMode: Text.WordWrap
                            text: description
                            visible: description.length > 0
                        }
                    }
                    Controls.Button {
                        Layout.alignment: Qt.AlignRight
                        Layout.columnSpan: 2
                        text: i18n("Edit")
                        // onKlakita: farota... baldaŭ!
                    }
                }
            }
        }
    }
    // ...
}

implicitWidth kaj implicitHeight

La unua parto, kiun ni rigardos, estas kiel administri la larĝon kaj altecon de nia komponanto:

Kirigami.AbstractCard {
    contentItem: Item {
        implicitWidth: delegateLayout.implicitWidth
        implicitHeight: delegateLayout.implicitHeight
        GridLayout {
            id: delegateLayout
            // ...
        }
    }
}

Rigardante nian Kirigami.AbstractCard, la unuaj ecoj kiujn ni starigas estas [implicitWidth](https://doc.qt.io/qt-6/qml-qtquick-item.html#implicitWidth- prop) kaj implicitHeight. Ni agordis ĉi tiujn al la delegateLayout.implicitWidth kaj delegateLayout.implicitHeight, t.e. la implicitWidth kaj implicitHeight de la GridLayout elemento.

Implicaj larĝoj kaj altecoj estas proprecoj haveblaj en iu ajn Ero kiuj funkcias kiel sugestoj kaj estas agordita kiel defaŭlta, aŭ kiel rezervi, se ne ekzistas eksplicita larĝo aŭ alteco agordita por ĉi tiuj komponantoj. Ĉi tiuj valoroj defaŭlte estas 0x0, do estas tre grave, ke vi difinas tiujn en krudaj Item-komponentoj kiel farite supre.

Ĉi tie ni starigis la implicitWidth kaj implicitHeight de nia Kirigami.AbstractCard al tiu de la [GridLayout](https://doc.qt.io/qt-6/qml- qtquick-layouts-gridlayout.html) sube por certigi, ke ĝi ne elverŝiĝas el la karto. Tiel, la karto prenas tiom da spaco estas necesa por sia enhavo.

Aranĝoj

La GridLayout estas ene de la [Ero](https://doc.qt.io/qt-6/ qml-qtquick-item.html) komponanto, kiun ni provizis por la propreco contentItem. Ĉi tiu estas la Ero kiu enhavas tion, kio estos montrata en via karto.

Ni ankaŭ devas elekti aranĝon por niaj komponantoj, por ke ili ne nur amasiĝu unu sur la alian. Estas tri ĉefaj tipoj, kiujn ni povas elekti:

ColumnLayout aranĝas viajn komponantojn vertikale, en ununura kolumno
RowLayout aranĝas viajn komponantojn horizontale, en ununura vico
GridLayout prezentas viajn komponantojn en krado kun komponado de via elekto

Kun ColumnLayout kaj [RowLayout](https://doc.qt.io/qt-6/qml- qtquick-layouts-rowlayout.html), ĉio, kion ni devas fari, estas skribi niajn komponantojn ene de la Layout-komponento. Kiel vi povas vidi, ni iris kun GridLayout, kiu implicas iom pli da manlaboro.

GridLayout {
    id: delegateLayout
    anchors {
        left: parent.left
        top: parent.top
        right: parent.right
    }
    rowSpacing: Kirigami.Units.largeSpacing
    columnSpacing: Kirigami.Units.largeSpacing
    columns: root.wideScreen ? 4 : 2
    // ...
}

La unua afero, kiun vi vidas, estas niaj ankroj. La ankra sistemo de QtQuick provizas utilan manieron certigi, ke viaj komponantoj estas poziciigitaj en certaj partoj de gepatra komponanto. Ni ankris nian GridLayout maldekstren, supre kaj dekstren de la gepatra karto, certigante ke nia enhavo etendiĝas transe. la tuta karto.

Poste ni specifas la interspacon inter la vicoj kaj kolumnoj ene de nia krado, por ke niaj komponantoj ne amasiĝas. Kirigami disponigas kelkajn oportunajn antaŭdifinitajn unuojn por uzi ĉi-cele:

Kirigami Unuo	Rastrumeroj
malgranda interspaco	4px
granda interspaco	8px
gridUnit	18px

Noto

La Vida Dezajno-Grupo (VDG) de KDE havas multe pli da informoj pri la malsamaj unuoj difinitaj ene de Plasma kaj Kirigami sur la Gvidlinioj pri Homaj Interfaco.

Kiel vi eble memoras, radiko estas la identigilo de nia Kirigami.ApplicationWindow. Ĝi disponigas la wideScreen proprecon, uzatan por determini ĉu la nuna aparatekrano estas larĝekrano (t.e. komputila ekrano aŭ telefono en pejzaĝo). Ni uzas ternaran kondiĉon ĉi tie por variigi la nombron da kolumnoj en nia krado depende de la ekrano, kiun ni estas. uzante: se ĝi estas larĝa ekrano, la krado havos 4 kolumnojn, alie ĝi havos 2.

Internaj komponantoj

Ni povus simple krei tri etikedojn ene de nia delegita komponanto kaj nomi ĝin tage, sed tio ne aspektus precipe bela. Ni uzos kelkajn pli oportunajn komponantojn:

GridLayout {
    // ...
    Kirigami.Heading {
        Layout.fillHeight: true
        level: 1
        text: date
    }

    ColumnLayout {
        Kirigami.Heading {
            Layout.fillWidth: true
            level: 2
            text: name
        }

        Kirigami.Separator {
            Layout.fillWidth: true
            visible: description.length > 0
        }

        Controls.Label {
            Layout.fillWidth: true
            wrapMode: Text.WordWrap
            text: description
            visible: description.length > 0
        }
    }

    Controls.Button {
        Layout.alignment: Qt.AlignRight
        Layout.columnSpan: 2
        text: i18n("Edit")
    }
}

Maldekstre, Kirigami.Titolo: uzas la daton' de ListElement` kiel 1-nivelan titolon.
Meze, ColumnLayout: havas Kirigami.Heading kiu montras la taskonomon ; a Kirigami.Separator, kiu provizas la horizontalan linion; kaj Controls.Label, kiu montras la laŭvolan priskribon de tasko. La lastaj du komponantoj havas videblan proprecon, kiu kontrolas ĉu la priskribo estas malplena aŭ ne kaj montras la komponantoj depende de la rezulto de priskribo.length > 0.
Ĝuste, Controls.Button: butono kiu faros ion... baldaŭ!

Nia aplikaĵo ĝis nun

Main.qml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    title: i18nc("@title:window", "Day Kountdown")

    // ListModel needed for ListView, contains elements to be displayed
    ListModel {
        id: kountdownModel
        // Each ListElement is an element on the list, containing information
        ListElement {
            name: "Dog birthday!!"
            description: "Big doggo birthday blowout."
            date: 100
        }
    }

    Component {
        id: kountdownDelegate
        Kirigami.AbstractCard {
            contentItem: Item {
                implicitWidth: delegateLayout.implicitWidth
                implicitHeight: delegateLayout.implicitHeight
                GridLayout {
                    id: delegateLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }
                    rowSpacing: Kirigami.Units.largeSpacing
                    columnSpacing: Kirigami.Units.largeSpacing
                    columns: root.wideScreen ? 4 : 2

                    Kirigami.Heading {
                        // Level determines the size of the heading
                        level: 1
                        text: date
                    }

                    // Layout for positioning elements vertically
                    ColumnLayout {
                        Kirigami.Heading {
                            Layout.fillWidth: true
                            level: 2
                            text: name
                        }
                        // Horizontal rule
                        Kirigami.Separator {
                            Layout.fillWidth: true
                            visible: description.length > 0
                        }
                        // Labels contain text
                        Controls.Label {
                            Layout.fillWidth: true
                            // Word wrap makes text stay within box and shift with size
                            wrapMode: Text.WordWrap
                            text: description
                            visible: description.length > 0
                        }
                    }
                    Controls.Button {
                        Layout.alignment: Qt.AlignRight
                        // Column spanning within grid layout (vertically in this case)
                        Layout.columnSpan: 2
                        text: i18n("Edit")
                        //onClicked: to be done...
                    }
                }
            }
        }
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")

        // List view for card elements
        Kirigami.CardsListView {
            id: cardsView
            // Model contains info to be displayed
            model: kountdownModel
            // Delegate is how the information will be presented in the ListView
            delegate: kountdownDelegate
        }
    }
}

Ekrankopio de la aplikaĵo post kompletigado de ĉi tiu leciono

Do estas nia baza karto!

Kun ĉi tiuj paŝoj, ni nun metis la bazan bazon por aldoni ĉiujn funkciojn al nia programo.

Klarigante paĝojn

Aldonante agojn