Drseče strani in pogledi seznama

Strani, po katerih je mogoče drseti, so uporabne v kombinaciji z navpičnimi komponentami ali dinamičnimi komponentami, kot so pogledi seznama.

Kirigami.ScrollablePage

A Kirigami.ScrollablePage is a page that holds scrollable content, such as a ListView. Scrolling, as well as scrolling indicators, are automatically managed.

Kirigami.ScrollablePage {
    id: root
    //Po pravokotniku se bo samodejno dalo drseti
    Rectangle {
        width: root.width
        height: 99999
    }
}

Na skoraj vsak drug način je stran, po kateri je mogoče drseti, enaka običajni strani.

Opozorilo

Do not put a ScrollView inside of a Kirigami.ScrollablePage; children of a Kirigami.ScrollablePage are already inside a ScrollView.

Pregled seznama v strani, po kateri se da drseti

When the direct children of a Kirigami.ScrollablePage extend vertically beyond the size of the page itself, a scrollbar appears at the right edge of the page and the page will be scrollable.

Dve strani, po katerih se da drseti in obe vsebujeta pogled seznama z vsebino po meri (posnetek zaslona NeoChat)

Often you have more than one child in your Kirigami.ScrollablePage, and positioning items can be tricky—especially in combination with a ListView.

Nevizualne komponente v elementu ListView ne bodo spremenile videz strani. Lahko jih premaknemo v seznam pogledov. Enako velja za elemente, ki so zasidrani na sredino strani, kot so lokacije za sporočila o praznih seznamih pogledov.
For other items, it might make sense to move them to the header or footer of the Kirigami.ScrollablePage. This is often the case for search bars.

PlaceholderMessage

It is possible to add a Kirigami.PlaceholderMessage with some instructions in case the list view is empty.

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")
                // Več kode...
            }
        }
        model: // Model kode...
    }
}

Iskanje v pogledu seznama

A search field is often added to a Kirigami.ScrollablePage to filter the ListView. This can be done by changing the default titleDelegate to use a Kirigami.SearchField instead.

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
        // Preostala koda listview...
    }
}

Namig

You can use KSortFilterProxyModel from KItemModel to easily add filtering capability directly in QML without any need for C++ code.

Povlecite za osvežitev

Druga funkcija, ki jo zagotavlja ta komponenta, je dejanje "Povlecite za osvežitev". Če želite to uporabiti, jo aktivirajte na naslednji način:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // OPOMBA: MyModel ne prihaja iz komponent, to je zgolj primer, kako se lahko uporablja
        // skupaj nekaj logike aplikacije, ki lahko posodobi model seznama in signalizira, ko je to
        // končano.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Z vlečenjem navzdol lahko aktivirate tudi poseben način z večjim zgornjim robom, ki še lažje omogoča enoročno uporabo aplikacije.

Vrstice strani in skladi strani

Kartice