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
    //The rectangle will automatically be scrollable
    Rectangle {
        width: root.width
        height: 99999
    }
}

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

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

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