Pàgines desplaçables i vistes de llista
Kirigami.ScrollablePage
Una
Kirigami.ScrollablePage
és una pàgina que conté contingut desplaçable, com ara les ListView
. El desplaçament i els indicadors de desplaçament es gestionen automàticament.
Kirigami.ScrollablePage {
id: root
// El rectangle es podrà desplaçar automàticament
Rectangle {
width: root.width
height: 99999
}
}
En gairebé tots els altres aspectes, una pàgina desplaçable és el mateix que una pàgina normal.
Avís
No poseu unaScrollView
dins d'una Kirigami.ScrollablePage
. Els fills d'una Kirigami.ScrollablePage
ja estan dins d'una ScrollView
.Vista de llista en una pàgina desplaçable
Quan els elements fills directes de la Kirigami.ScrollablePage
s'estenen verticalment més enllà de la mida de la pàgina en si, apareixerà una barra de desplaçament a la vora dreta de la pàgina i la pàgina es podrà desplaçar.

Dues pàgines desplaçables, ambdues amb una ListView amb contingut personalitzat (captura de pantalla del NeoChat).
Sovint, tindreu més d'un fill a la vostra Kirigami.ScrollablePage
, i col·locar-hi els elements pot ser complicat -especialment en combinació amb una ListView-.
- Per als components no visuals, tenir-los dins de l'element
ListView
no canviarà les imatges de la pàgina. Llavors podem moure'ls dins de laListView
. El mateix per als elements ancorats al centre de la pàgina, com els missatges amb algun marcador de posició per a lesListView
buides. - Per als altres elements, podria tenir sentit moure'ls a la capçalera o al peu de pàgina de la
Kirigami.ScrollablePage
. Aquest sol ser el cas de les barres de cerca.
PlaceholderMessage
És possible afegir un
Kirigami.PlaceholderMessage
amb algunes instruccions en cas que la vista de llista estigui buida.
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")
...
}
}
model: ...
}
}
Cercar a la vista de llista
Sovint s'afegeix un camp de cerca a la Kirigami.ScrollablePage
per a filtrar la ListView
. Això es pot fer canviant el titleDelegate
predeterminat per a utilitzar en el seu lloc un
Kirigami.SearchField
.
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
...
}
}
Consell
Podeu utilitzar un KSortFilterProxyModel des del KItemModel per a afegir amb facilitat la capacitat de filtratge directament en el QML sense necessitat de codi en C++.Estirar per a actualitzar
Una altra funció proporcionada per aquest component és una acció d'«estira per a actualitzar». Per a utilitzar això, activeu-lo de la manera següent:
Kirigami.ScrollablePage {
id: view
supportsRefreshing: true
onRefreshingChanged: {
if (refreshing) {
myModel.refresh();
}
}
ListView {
// NOTA: MyModel no prové dels components, senzillament és un exemple de com es pot emprar
// juntament amb alguna lògica de l'aplicació que quan està feta pot actualitzar el model de
// llista i els senyals.
model: MyModel {
onRefreshDone: view.refreshing = false;
}
delegate: BasicListItem {}
}
}
En estirar cap avall, també podreu activar un mode especial amb un marge superior més gran que facilita l'ús de l'aplicació amb una sola mà.