Rullningsbara sidor och listvyer

Rullningsbara sidor är användbara när de kombineras med vertikala komponenter eller dynamiska komponenter som listvyer.

Kirigami.ScrollablePage

Kirigami.ScrollablePage är en sida som innehåller rullningsbart innehåll, såsom en ListView . Rullning och rullningsindikering hanteras automatiskt.

Kirigami.ScrollablePage {
    id: root
    // Rektangeln är automatiskt rullningsbar
    Rectangle {
        width: root.width
        height: 99999
    }
}

På nästan alla andra sätt är en rullningsbar sida likadan som en normal sida.

Varning

Placera inte en ScrollView inne i en Kirigami.ScrollablePage . Underliggande objekt i en Kirigami.ScrollablePage är redan inne i en ScrollView.

Listvy på en rullningsbar sida

När direkt underliggande objekt i en Kirigami.ScrollablePage sträcks ut bortanför sidans egen storlek, visas en rullningslist vid högerkanten på sidan och sidan blir rullningsbar.

Två rullningsbara sidor, som båda innehåller en listvy med eget innehåll (skärmbild av NeoChat)

Ofta har man mer än ett underliggande objekt i en Kirigami.ScrollablePage , och det kan vara knepigt att positionera objekten, särskilt i kombination med en ListView .

För icke synliga komponenter, ändras inte sidans utseende om de finns inne i komponenten ListView , så vi kan flytta dem in i listvyns omgivning. Samma sak för element förankrade på sidans mitt, såsom platsmarkeringsmeddelanden för en tom listvy.
För andra objekt kan det vara vettigt att flytta dem till ett sidhuvud eller en sidfot i Kirigami.ScrollablePage . Det gäller ofta sökrader.

PlaceholderMessage

Det är möjligt att lägga till Kirigami.PlaceholderMessage med några instruktioner i fallet då listvyn är tom.

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

Söka i listvyn

Ett sökfält läggs ofta till i en Kirigami.ScrollablePage för att filtrera en ListView . Det kan göras genom att ändra fördefinierad titleDelegate att använda Kirigami.SearchField istället.

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

Tips

Du kan använda KSortFilterProxyModel från KItemModel för att enkelt lägga till filtreringsmöjlighet direkt i QML utan någon C++ kod.

Dra för att uppdatera

An annan funktion som tillhandahålls av komponenten är åtgärden "dra för att uppdatera". För att göra det, aktivera den på följande sätt:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // Observera: MyModel kommer inte från komponenterna, det är ett rent exempel på hur den kan
        // användas tillsammans med någon programlogik som kan uppdatera listmodellen och signalerar
        // när den är klar.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Genom att dra neråt, kan du också aktivera ett specialläge med en större övre marginal, som gör det enklare att använda programmet med en hand.

Sidrader och sidstaplar

Kort