Postavitve, seznam pogledov in kartice
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.
Opomba
Ker je QML zgrajen na vrhu JavaScripta, so številne funkcije tega jezika na voljo za uporabo v datotekah QML. Vendar pa je treba spremenljivke QML predpona s "lastnostjo", razen če je znotraj kodnega bloka JS. Več o tem si lahko preberete v tej strani.Modeli so uporabni tudi v tem, kako jih je mogoče spremeniti z uporabo več metod. Nekatere pomembne so:
- ListModel.append(yourobject: jsobject) doda predmet v JavaScript, ki ga posredujete v ListModel, in ga postavi za zadnjim elementom v modelu. Če želite, da se to pravilno zgodi, morate predmetu JavaScript zagotoviti pravilne lastnosti in ustrezne vrste podatkov.
- ListModel.get(index: int) vrne JSObject na mestu indeksa, ki ga navedete.
- ListModel.remove(index: int, count: int) odstrani JSObject na predvidenem mestu indeksa
index
in tolikokrat po tem mestu indeksa, kot želite v števcucount
(1 vključuje samo JSObject na danem indeksu) - ListModel.set(index: int, yourobject: jsobject) spremeni postavko na zagotovljenem mestu indeksa
index
z vrednostmi, navedenimi v vašemu predmetuyourobject
. Enaka pravila so kot priappend()
.
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 Kirigami | Slik. točk |
---|---|
smallSpacing | 4px |
largeSpacing | 8px |
gridUnit | 18 tč |
Opomba
Skupina KDE's Visual Design Group (VDG) ima veliko več informacij o različnih enotah določenih v Plasmi and Kirigami v Smernicah za uporabniški vmesnik Human Interface Guidelines.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")
}
}
- Levo,
Kirigami.Heading
: uporablja lastnost
ListElement
date
kot naslov ravni 1. - Sredina, ColumnLayout: ima naslov Kirigami.Heading , ki prikazuje ime opravila; ' Kirigami.Separator , ki zagotavlja vodoravno črto; in Controls.Label , ki prikazuje izbirni opis opravila. Slednji dve komponenti imata lastnost visible, ki preverja, ali je opis prazen ali ne in prikazuje komponente glede na rezultat 'description.length > 0'.
- Desno, Controls.Button : gumb, ki bo nekaj naredil... kmalu!
Naša aplikacija do sedaj
|
|
Tu je naša osnovna kartica!
S temi koraki smo zdaj v postavili temeljne podlage za dodajanje vseh funkcionalnosti v našo aplikacijo.