Schuifbare pagina's en lijstweergaven

Kirigami.ScrollablePage

Een Kirigami.ScrollablePage is een pagina die schuifbare inhoud bevat, zoals ListView . Schuiven en schuifindicatoren worden automatisch beheerd.

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.

ListView in een ScrollablePage

Wanneer de directe kinderen van een Kirigami.ScrollablePage zich verticaal uitbreiden over de grootte van de pagina zelf, zal er een schuifbalk aan de rechter rand van de pagina verschijnen en zal de pagina schuifbaar zijn.

U hebt vaak meer dan één kind in uw Kirigami.ScrollablePage en items positioneren kan moeilijk zijn-speciaal in combinatie met een 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.
• Voor andere items kan het zinvol zijn om ze te verplaatsen naar de kop of voet van de Kirigami.ScrollablePage . Dit is vaak het geval voor zoekbalken.

PlaceholderMessage

Het is mogelijk om een Kirigami.PlaceholderMessage met enige instructies toe te voegen in geval de lijstweergave leeg is.

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

In de ListView zoeken

Er wordt vaak een zoekveld toegevoegd aan een Kirigami.ScrollablePage om de ListView te filteren. Dit kan gedaan worden door de standaard titleDelegate te wijzigen om een Kirigami.SearchField in plaats daarvan te gebruiken.

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

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.