Páginas desplazables y vistas de lista
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
A Kirigami.ScrollablePage is a page that holds scrollable content, such as a ListView. Scrolling, as well as scrolling indicators, are automatically managed.
Kirigami.ScrollablePage {
id: root
//El rectángulo se podrá desplazar automáticamente
Rectangle {
width: root.width
height: 99999
}
}En casi todos los demás aspectos, una página desplazable es lo mismo que una página normal.
Advertencia
Do not put a ScrollView inside of a Kirigami.ScrollablePage; children of aKirigami.ScrollablePage are already inside a ScrollView.ListView en una ScrollablePage
When the direct children of a Kirigami.ScrollablePage extend vertically beyond the size of the page itself, a scrollbar appears at the right edge of the page and the page will be scrollable.
Dos páginas desplazables, ambas conteniendo una ListView con contenido personalizado (captura de pantalla de NeoChat)
Often you have more than one child in your Kirigami.ScrollablePage, and positioning items can be tricky—especially in combination with a ListView.
- For non-visual components, having them inside the ListView component won't change the visuals of the page, so we can move them inside the scope of the list view. Same for elements anchored to the center of the page, such as placeholder messages for empty list views.
- Para otros elementos, podría tener sentido moverlos al encabezado o al pie de página de Kirigami.ScrollablePage. Este suele ser el caso de las barras de búsqueda.
PlaceholderMessage
Es posible añadir un Kirigami.PlaceholderMessage con algunas instrucciones en caso de que la vista de la lista esté vacía.
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")
// Más código...
}
}
model: // Código del modelo...
}
}Buscar en la ListView
A search field is often added to a Kirigami.ScrollablePage to filter the ListView. This can be done by changing the default titleDelegate to use a Kirigami.SearchField instead.
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 del código de la vista de lista...
}
}Sugerencia
Puede usar el KSortFilterProxyModel de KItemModel para añadir filtrado con facilidad directamente en QML, sin ninguna necesidad de código C++.Tirar para actualizar
Otra función que proporciona este componente es una acción «tirar para actualizar». Para usarla, actívela como se indica a continuación:
Kirigami.ScrollablePage {
id: view
supportsRefreshing: true
onRefreshingChanged: {
if (refreshing) {
myModel.refresh();
}
}
ListView {
// Nota: MyModel no proviene de los componentes; solo es un ejemplo de cómo se puede usar
// junto con alguna lógica de aplicación que puede actualizar el modelo de la lista y emitir
// una señal cuando haya terminado.
model: MyModel {
onRefreshDone: view.refreshing = false;
}
delegate: BasicListItem {}
}
}Al tirar hacia abajo, también puede activar un modo especial con un margen superior más grande que facilita el uso de la aplicación con una sola mano.