Schuifbare pagina's en lijstweergaven

Schuifbare pagina's zijn nuttig in combinatie met verticale componenten of dynamische componenten zoals lijstweergaven.

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
    //De rechthoek zal automatisch te schuiven zijn
    Rectangle {
        width: root.width
        height: 99999
    }
}

Op bijna elke andere manier is een schuifbare pagina hetzelfde als een normale pagina.

Waarschuwing

Do not put a ScrollView inside of a Kirigami.ScrollablePage; children of a Kirigami.ScrollablePage are already inside a ScrollView.

ListView in een 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.

Twee schuifbare pagina's, beiden bevatten een ListView met aangepaste inhoud (schermafdruk van NeoChat)

Often you have more than one child in your Kirigami.ScrollablePage, and positioning items can be tricky—especially in combination with a ListView.

Voor niet-zichtbare componenten, die binnen de ListView component zitten wijzigen niet de zichtbaarheden van de pagina. We kunnen ze dus binnen de lijstweergave plaatsen. Hetzelfde voor elementen verankert aan het centrum van de pagina, zoals plaatshouderberichten voor lege lijstweergaven.
For other items, it might make sense to move them to the header or footer of the Kirigami.ScrollablePage. This is often the case for search bars.

PlaceholderMessage

It is possible to add a Kirigami.PlaceholderMessage with some instructions in case the list view is empty.

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")
                // Meer code...
            }
        }
        model: // Model code...
    }
}

In de ListView zoeken

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
        // De rest van de listview code...
    }
}

Tip

You can use KSortFilterProxyModel from KItemModel to easily add filtering capability directly in QML without any need for C++ code.

Pull om te vernieuwen

Een andere functie geleverd door deze component is een actie "pull-om-te-vernieuwen". Om dit te gebruiken, activeer het als volgt:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // OPMERKING: MyModel komt niet uit de componenten, het is puur een voorbeeld over hoe het
        // gebruikt kan worden samen met enige toepassingslogica die het lijstmodel en signalen kan
        // bijwerken wanneer het gereed is.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Door omlaag te trekken kunt u ook een speciale modus activeren met een grotere bovenmarge die gebruik van de toepassing met één hand gemakkelijker maakt.

Paginarijen en paginastapels

Kaarten