Rulumeblaj paĝoj kaj listvidoj
About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now
Click here to read more
We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.
In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.
If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.
Kirigami.ScrollablePage
Kirigami.ScrollablePage estas paĝo kiu enhavas ruleblan enhavon, kiel ListView. Rulumado, same kiel movadaj indikiloj, estas aŭtomate administritaj.
Kirigami.ScrollablePage {
id: root
//La rektangulo aŭtomate estos rulebla
Rectangle {
width: root.width
height: 99999
}
}En preskaŭ ĉiu alia maniero, rulebla paĝo estas sama kiel normala paĝo.
Averto
Ne metu ScrollView interne de Kirigami.ScrollablePage; infanoj deKirigami.ScrollablePage jam estas ene de ScrollView.ListView en ScrollablePage
Kiam la rektaj infanoj de Kirigami.ScrollablePage etendiĝas vertikale preter la grandeco de la paĝo mem, rulumbreto aperas ĉe la dekstra rando de la paĝo kaj la paĝo estos rulebla.
Du ruleblaj paĝoj, ambaŭ enhavantaj ListView kun propra enhavo (ekrankopio de NeoChat)
Ofte vi havas pli ol unu infanon en via Kirigami.ScrollablePage, kaj poziciigi elementojn povas esti malfacila—precipe en kombinaĵo kun ListView.
- Por nevideblaj komponantoj, havi ilin ene de la komponanto ListView ne ŝanĝos la vidaĵojn de la paĝo, do ni povas movi ilin en la amplekson de la listvido. Same por elementoj ankritaj al la centro de la paĝo, kiel anstataŭigaj mesaĝoj por malplenaj listvidoj.
- Por aliaj eroj, povus havi sencon movi ilin al la kaplinio aŭ piedlinio de la Kirigami.ScrollablePage. Ĉi tio ofte okazas por serĉbretoj.
AnstataŭiloMesaĝo
Eblas aldoni Kirigami.PlaceholderMessage kun kelkaj instrukcioj, se la listvido estas malplena.
Kirigami.ScrollablePage {
ListView {
id: listView
Kirigami.PlaceholderMessage {
anchors.centerIn: parent
width: parent.width - (Kirigami.Units.largeSpacing * 4)
visible: listView.count === 0
text: i18n("No data found")
helpfulAction: Kirigami.Action {
text: i18n("Load data")
// Pli da kodo...
}
}
model: // Modelkodo...
}
}Serĉu en la ListView
Serĉkampo ofte estas aldonita al Kirigami.ScrollablePage por filtri la ListView. Ĉi tio povas esti farita ŝanĝante la defaŭltan titleDelegate por uzi Kirigami.SearchField anstataŭe.
Kirigami.ScrollablePage {
titleDelegate: Kirigami.SearchField {
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.fillHeight: true
Layout.fillWidth: true
onTextChanged: mySortFilterModel.filterText = text
KeyNavigation.tab: listView
}
ListView {
id: listView
// Resto de listvido-kodo...
}
}Sugesto
Vi povas uzi KSortFilterProxyModel de KItemModel por facile aldoni filtran kapablon rekte en QML sen ia bezono de C++-kodo.Tiru por refreŝigi
Alia funkcio provizita de ĉi tiu komponanto estas ago "tiri por refreŝigi". Por uzi ĉi tion, aktivigu ĝin jene:
Kirigami.ScrollablePage {
id: view
supportsRefreshing: true
onRefreshingChanged: {
if (refreshing) {
myModel.refresh();
}
}
ListView {
// NOTO: MyModel ne venas de la komponantoj, ĝi estas nur ekzemplo pri kiel ĝi povas esti
// uzata kune kun iu aplika logiko, kiu povas ĝisdatigi la listomodelon kaj signali kiam ĝi
// estas farita.
model: MyModel {
onRefreshDone: view.refreshing = false;
}
delegate: BasicListItem {}
}
}Tirante malsupren, vi ankaŭ povas aktivigi specialan reĝimon kun pli granda supra marĝeno, kiu faciligas unumanan uzon de la aplikaĵo.