Strony przewijalne oraz widoki list

Przewijalne strony są użyteczne w połączeniu ze składnikami pionowymi lub dynamicznymi takimi jak widoki list.

`Kirigami.ScrollablePage`

Kirigami.ScrollablePage jest stroną, która przechowuje przewijalną treść, taką jak widoki ListView. Przewijanie oraz wskaźniki przewijania są samoczynnie zarządzane.

Kirigami.ScrollablePage {
    id: root
    // Prostokąt sam umożliwi swoje przewijanie
    Rectangle {
        width: root.width
        height: 99999
    }
}

Pod prawie każdym względem, przewijalna strona jest taka sama jak zwykła.

Ostrzeżenie

Nie umieszczaj ScrollView wewnątrz Kirigami.ScrollablePage; rzeczy podrzędne do Kirigami.ScrollablePage już są wewnątrz ScrollView.

ListView w ScrollablePage

Gdy bezpośrednia rzecz podrzędna Kirigami.ScrollablePage wykroczy w pionie poza rozmiar samej strony, to pojawi się pasek przewijania na prawej krawędzi strony, który umożliwi jej przewijanie.

Zrzut ekranu strony przewijalnej NeoChat — Dwie przewijalne strony, obie zawierają widok ListView z własną treścią (Zrzut ekranu NeoChat)

Często masz więcej niż jedną rzecz podrzędną w Kirigami.ScrollablePage, a umieszczenie rzeczy może być złożone - szczególnie w połączeniu z ListView.

Dla niegraficznych składników, posiadanie ich w widoku ListView nie zmieni wyglądu strony. Tak więc możemy przemieszczać je wewnątrz ListView. To samo tyczy się rzeczy zakotwiczonych do środka strony, takich jak wiadomości zastępcze dla pustych widoków ListView.
Dla innych rzeczy, sens może mieć przeniesienie ich do nagłówka lub stopki Kirigami.ScrollablePage. Umieszczane są tam zazwyczaj paski wyszukiwania.

Wiadomość zastępcza

Możliwym jest dodania Kirigami.PlaceholderMessage z pewnymi podpowiedziami w przypadku, gdy widok listy jest pusty.

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

Szukanie w widoku listy

Pole wyszukiwania często jest dodawane do Kirigami.ScrollablePage do filtrowania ListView. Można to zrobić zmieniając domyślne titleDelegate na używanie 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
        ...
    }
}

Podpowiedź

Możesz użyć KSortFilterProxyModel z KItemModel, aby łatwo dodać możliwość filtrowania bezpośrednio w QML bez potrzeby dołączania kodu C++.

Pociągnij, aby odświeżyć

Kolejną funkcją, którą zawiera ten składnik, to działanie "pociągnij, aby odświeżyć". Aby jej użyć, wyzwól ją w następujący sposób:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // UWAGA: MyModel nie pochodzi ze składników, jest to czysty przykład na temat tego jak
        // można go użyć wraz z logiką pewnej aplikacji i który może uaktualnić model listy oraz
        // sygnały, gdy skończy.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Pociągając w dół, możesz także włączyć wyjątkowy tryb z większym marginesem górnym, który czyni obsługę aplikacji jedną ręką łatwiejszą.

Wiersze stron i stosy stron

Karty