Pàgines desplaçables i vistes de llista

Les pàgines desplaçables són útils quan es combinen amb components verticals o dinàmics com les 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 una ScrollView 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.

Captura de pantalla d'una pàgina desplaçable en el NeoChat — 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 la ListView. El mateix per als elements ancorats al centre de la pàgina, com els missatges amb algun marcador de posició per a les ListView 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à.

Tipografia

Targetes (Card)