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

Kirigami.ScrollablePage je stran, ki ima drsno vsebino, na primer ListView. Kazalniki za drsenje se samodejno upravljajo.

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

Ne postavljajte ScrollView v Kirigami.ScrollablePage; potomci 'Kirigami.ScrollablePage' so že znotraj 'ScrollView'.

Pregled seznama v strani, po kateri se da drseti

Ko se neposredni potomci Kirigami.ScrollablePage razširijo navpično preko velikosti strani, se na desni strani prikaže drsnik in po strani se da drseti.

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

Pogosto imate več kot enega potomca v Kirigami.ScrollablePage in pozicioniranje elementov je lahko zapleteno - še posebej v kombinaciji z 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.
Za druge elemente je morda bolj smiselno, da jih premaknete v glavo ali nogo strani [Kirigami.ScrollablePage](docs:kirigami2;ScrollablePage. To pogosto velja za iskalne vrstice.

PlaceholderMessage

Možno je dodati 'Kirigami.PlaceholderMessage' z nekaj navodili, če je seznam pogledov prazen.

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

Iskalno polje se pogosto doda Kirigami.ScrollablePage za filtriranje seznama pogledov ListView. To lahko storite tako, da spremenite privzeti titleDelegate za uporabo Kirigami.SearchField namesto tega.

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

Uporabite lahko KSortFilterProxyModel iz KItemModel za enostavno dodajanje zmogljivosti filtriranja neposredno v QML brez potrebe po kodi C++.

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