Aranĝoj, ListViews kaj Kartoj
Disponi vian enhavon
Nun kiam ni komprenas kiel funkcias paĝoj, estas tempo aldoni aĵojn al la niaj. Ni ekzamenos kelkajn gravajn aranĝajn komponantojn kaj elementojn, kiuj estos utilaj dum desegnado de nia apo.
Ne timu la grandaj pecoj de kodo! Ni trarigardos ĉion, kion ni antaŭe ne kovris, kaj antaŭ la fino de ĉi tiu sekcio vi havos bonordan aspekton.
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.
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
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 countdownModel
ene de nia
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 perproprieto
, 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
youobject
al la ListModel, kaj metas ĝin post la lasta objekto en la modelo. Por ke ĉi tio okazu ĝuste, vi devas provizi JavaScript-Objekton kun la ĝustaj propraĵoj 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 enyouobject
. Samaj reguloj kiel ĉeappend()
.
Delegito
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).
Kirigami.CardsListView
estis desegnita por montri kartspecajn delegitojn, kaj ni ja uzis
Kirigami.AbstractCard
elementon kiel nia delegito en la supra eltiraĵo.
Delegitoj aŭtomate ricevas la ecojn de la ListElements, kiujn ni specifis en nia modelo. Ni povas do nur rilati al la nomo
, priskribo
, kaj dato
propraĵoj de niaj ListElementoj kvazaŭ ili estus konvencia variablo ene de nia delegito.
Konstruante nian delegitan karton
La Component kiu reprezentos nian delegiton povas esti aldonita ene de nia Kirigami.ApplicationWindow . Ni tiam procedos kontrolante kion faras ĉiu parto de nia delegita komponanto.
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 < 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")
// 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 trajtoj kiuj estas fiksitaj kiel defaŭlte, t.e. se ekzistas neniu eksplicita larĝo aŭ alteco aro por tiuj komponentoj. Ni do 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.
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 provizas 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 uzas: 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 aparte bele aspektus.
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
|
|
Do estas nia baza karto!
Kun ĉi tiuj paŝoj, ni nun metis la bazan bazon por aldoni ĉiujn funkciojn al nia programo.