Postavitve, seznam pogledov in kartice

Ugotavljanje različnih načinov postavitve stvari na stran

Postavitev vsebine

Zdaj, ko razumemo, kako delujejo strani, je čas, da dodamo stvari našim. Preiskali bomo številne pomembne komponente in elemente postavitve, ki bodo uporabni pri načrtovanju naše aplikacije.

Ne bodite prestrašeni z velikimi kosi kode! Preiskali bomo vse, kar še nismo še spoznali in do konca tega razdelka pa boste imeli aplikacijo, ki je lepo deluje.

Seznam pogledov

Če ste kdaj uporabljali Discover, NeoChat, ali sistemske nastavitve Plasme, ste naleteli na seznam pogledov ListView. Preprosto, seznam pogledov vam dovoli prikaz podatkov v seznamu.

Kirigami.CardsListView {
    id: cardsView
    model: kountdownModel
    delegate: kountdownDelegate
}

To se zdi skrivnostno, ampak ne skrbite. Začnimo na začetku.

Dodamo to komponento znotraj naše strani Kirigami.ScrollablePage iz zadnje vaje.

Uporabljamo Kirigami.CardsListView , kar je seznam pogledov ListView, ki nam omogoča enostavno prikazovanje kartic v seznamu. Vendar je seznam pogledov narejen tako, da prikazuje podatke, ki jih vzamemo iz modela - da se samodejno napolnijo iz nabora podatkov, na katere jih usmerimo. Tam vpliva lastnost 'model': v tem primeru kaže na 'kountdownModel'.

Model

ListModel {
    id: kountdownModel
    // Vsak element seznama je element na seznamu, ki vsebuje informacije
    ListElement {
        name: "Dog birthday!!"
        description: "Big doggo birthday blowout."
        date: 100
    }
}

Dodamo naš kountdownModel znotraj naše Kirigami.ApplicationWindow iz zadnje vaje.

Model določa način strukturiranja vnosa podatkov. Naš kountdownModel bo za zdaj sestavljen samo iz enega elementa. Z ogledom našega ListElement zgoraj, vidimo, kako so strukturirani podatki naše modela kountdownModel: vsebuje ime, opis in datum. To ni vklesano v kamen in vi imate lahko v vašem modelu različne vrste podatkov. Prva dva sta samo niza, tretja pa število, ki jo uporabljamo kot držalo prostora.

Modeli so uporabni tudi v tem, kako jih je mogoče spremeniti z uporabo več metod. Nekatere pomembne so:

Delegat

Medtem ko naš kountdownModel vsebuje podatke, ki bodo prikazani, bo naš kountdownDelegate poskrbel, kako bodo podatki prikazani v seznamu ListView. Kirigami.CardsListView je bil zasnovan, da prikaže delegate vrste kartica in smo zares uporabili element Kirigami.AbstractCard kot našega delegata v gornjem izvlečku.

Delegati samodejno prejmejo lastnosti seznama elementov, ki smo jih določili v našem modelu. Zato lahko samo napotimo na lastnosti name, description, in date našega seznama elementov, kot da so konvencionalne spremenljivke znotraj našega delegata.

Gradnja naše kartice delegata

Komponenta Component , ki bo predstavljala našega delegata bo dodana znotraj našega okna aplikacije Kirigami.ApplicationWindow . Nato bomo nadaljevali s preverjanjem, kaj počne vsak del naše komponente delegata.

Component {
    id: kountdownDelegate
    Kirigami.AbstractCard {
        contentItem: Item {
            // implicitWidth/Height določi naravno širino/višino elementa, če ni določena širina ali
            // višina. Spodnja nastavitev določa želeno velikost komponente na podlagi njene vsebine
            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 < 100000) ? date : i18n("%1 days", Math.round((date-Date.now())/86400000))
                }

                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")
                    // onClicked: za opraviti... kmalu!
                }
            }
        }
    }
}

implicitWidth in implicitHeight

V prvem delu si bomo ogledali, kako upravljati širino in višino naše komponente:

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

Če pogledamo našo Kirigami.AbstractCard , so prve lastnosti, ki smo jih določili, so implicitWidth in implicitHeight. Te smo nastavili na delegateLayout.implicitWidth in delegateLayout.implicitHeight, to je implicitWidth in implicitHeight elementa GridLayout. Implicitne širine in višine so lastnosti, ki so določene kot neke vrste privzete vrednosti, torej če za te komponente ni nastavljena eksplicitna širina ali višina. Zato smo nastavili implicitWidth in implicitHeight naše Kirigami.AbstractCard tako GridLayout` spodaj, da zagotovimo, da se ne razlije iz kartice.

Postavitve

Postavitev GridLayout je znotraj komponente postavke Item, ki smo jo zagotovili za lastnost contentItem. To je postavka Item, ki vsebuje, kar bo prikazano v vaši kartici.

Izbrati moramo tudi postavitev layout za naše komponente, tako da se ne bodo nakopičili drug na drugega. Obstajajo trije glavni tipi, ki jih lahko izbiramo:

  • ColumnLayout naniza vaše komponente navpično v enem stolpcu
  • RowLayout naniza vaše komponente vodoravno v eni vrstici
  • GridLayout naniza vaše komponente v mreži s sestavo, ki jo izberete

Pri ColumnLayout and RowLayout moramo samo napisati naše komponente znotraj komponente Layout. Kot lahko vidite, smo šli z mrežno postavitev GridLayout, ki vključuje malo več ročnega dela.

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
    ...
}

Prva stvar, ki jo vidite je naša sidra 'anchors'. Sistem za sidranje QtQuick's anchoring system zagotavlja uporaben način, da zagotovite, da so vaše komponente postavljene na določenih delih nadrejene komponente. Zasidrali smo našo GridLayout levo, vrh in desno od nadrejene kartice, kar zagotavlja, da se naša vsebina razteza čez celotno kartico.

Nato določimo razmik med vrsticami in stolpci znotraj naše mreže, tako da se naše komponente ne stiskajo. Kirigami zagotavlja številne priročne vnaprej določene enote predefined units , ki jih uporabimo za ta namen:

Enota KirigamiSlik. točk
smallSpacing4px
largeSpacing8px
gridUnit18 tč

Kot se morda spomnite, je root id našega okna aplikacije Kirigami.ApplicationWindow . Omogoča lastnost širokega zaslona wideScreen , ki se uporablja za določitev, ali je trenutni zaslon naprave širok (tj. računalniški monitor ali telefon z zaslonom v ležečem položaju). Tu uporabljamo ternarni pogoj, da spremenimo število stolpcev v naši mreži, odvisno od zaslona, ki ga uporabljamo: če je na širokem zaslonu, bo mreža imela 4 stolpce, sicer bo imela 2.

Notranje komponente

Lahko bi ustvarili tri oznake znotraj naše komponente delegata in končali. Ampak to ne bi bilo videti posebej lepo.

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

Posnetek zaslona prikazuje, kako je videti kartica

Naša aplikacija do sedaj

 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
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    id: root

    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 {
                        // Heading will be as tall as possible while respecting constraints
                        Layout.fillHeight: true
                        // 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
        }
    }
}

Posnetek zaslona videza aplikacije po končanju te lekcije

Tu je naša osnovna kartica!

S temi koraki smo zdaj v postavili temeljne podlage za dodajanje vseh funkcionalnosti v našo aplikacijo.