Páginas desplazables y vistas de lista

Las páginas desplazables resultan de utilidad cuando se combinan con componentes verticales o con componentes dinámicos, como las vistas de lista.

`Kirigami.ScrollablePage`

Una Kirigami.ScrollablePage es una página que tiene contenido que se puede desplazar, como una ListView. El desplazamiento y los indicadores de desplazamiento se gestionan de forma automática.

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

No ponga un ScrollView dentro de un Kirigami.ScrollablePage; los hijos de un Kirigami.ScrollablePage ya están dentro de un ScrollView.

ListView en una ScrollablePage

Cuando un control hijo directo de Kirigami.ScrollablePage se extiende en vertical más allá del tamaño de la propia página, aparece una barra de desplazamiento en el borde derecho de la página, que se convierte en una página desplazable.

Captura de pantalla de la página desplazable de NeoChat — Dos páginas desplazables, ambas conteniendo una ListView con contenido personalizado (captura de pantalla de NeoChat)

A menudo tendrá más de un control hijo en una Kirigami.ScrollablePage, por lo que la colocación de elementos puede resultar complicado, especialmente en combinación con una ListView.

En el caso de los componentes no visuales, tenerlos dentro de un elemento ListView no alterará el aspecto visual de la página. Así, los podemos mover dentro de la ListView. Lo mismo ocurre con los elementos anclados en el centro de la página, como los mensajes de relleno para las ListView vacías.
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")
                ...
            }
        }
        model: ...
    }
}

Buscar en la ListView

Un campo de búsqueda se suele añadir a una Kirigami.ScrollablePage para filtrar la ListView. Esto se puede hacer cambiando el titleDelegate predeterminado para que use un Kirigami.SearchField en su lugar.

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
        ...
    }
}

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.

Tipografía

Tarjetas