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.

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 är rullningsbar.

Skärmbild av rullningsbar sida i NeoChat

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 ListView elementet. Så vi kan flytta dem in i en ListView. Samma sak för element förankrade på sidans mitt, såsom platsmarkeringsmeddelanden för en tom ListView.
  • 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
        ...
    }
}

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.