Posúvateľné stránky a zobrazenia zoznamov

Posúvateľné stránky sú užitočné v kombinácii s vertikálnymi komponentmi alebo dynamickými komponentmi ako sú zobrazenia zoznamov.

Kirigami.ScrollablePage

Kirigami.ScrollablePage je stránka, ktorá obsahuje posúvateľný obsah, ako napríklad ListView. Posúvanie aj ukazovatele posúvania sú automaticky spravované.

Kirigami.ScrollablePage {
    id: root
    //Obdĺžnik bude automaticky posúvateľný
    Rectangle {
        width: root.width
        height: 99999
    }
}

Takmer vo všetkých ostatných ohľadoch je posúvateľná stránka rovnaká ako normálna stránka.

Upozornenie

Nevkladajte ScrollView do Kirigami.ScrollablePage; potomkovia Kirigami.ScrollablePage sú už vo vnútri ScrollView.

ListView v ScrollablePage

Keď priami potomkovia Kirigami.ScrollablePage presahujú vertikálne za veľkosť samotnej stránky, na pravom okraji stránky sa objaví posúvač a stránka bude posúvateľná.

Dve posúvateľné stránky, obe obsahujúce ListView s vlastným obsahom (snímka obrazovky z NeoChat)

Často máte viac ako jedno dieťa vo vašej Kirigami.ScrollablePage a poziciovanie položiek môže byť zložité — najmä v kombinácii s ListView.

Pre nevizuálne komponenty ich umiestnenie vnútri komponentu ListView nezmení vizuál stránky, takže ich môžeme presunúť do rozsahu zobrazenia zoznamu. Rovnako pre prvky ukotvené do stredu stránky, ako sú zástupné správy pre prázdne zobrazenia zoznamu.
Pre ostatné položky môže mať zmysel presunúť ich do hlavičky alebo päty Kirigami.ScrollablePage. Toto je často prípad vyhľadávacích panelov.

Vnorené správy

Je možné pridať Kirigami.PlaceholderMessage s pokynmi pre prípad, že je zobrazenie zoznamu prázdne.

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")
                // Ďalší kód...
            }
        }
        model: // Kód modelu...
    }
}

Vyhľadávanie v ListView

Vyhľadávacie pole sa často pridáva na Kirigami.ScrollablePage na filtrovanie ListView. Toto sa dá urobiť zmenou predvoleného titleDelegate na použitie 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
        // Zvyšok kódu listview...
    }
}

Rada

Na jednoduché pridanie možnosti filtrovania priamo v QML bez potreby C++ kódu môžete použiť KSortFilterProxyModel z KItemModel.

Potiahnutím obnovíte

Ďalšou funkciou poskytovanou týmto komponentom je akcia "potiahni na obnovenie". Na jej použitie ju aktivujte nasledovne:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // POZNÁMKA: MyModel nepochádza z komponentov, je to čisto príklad, ako sa dá použiť spolu s
        // nejakou aplikačnou logikou, ktorá môže aktualizovať model zoznamu a signalizovať, keď je
        // hotová.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Potiahnutím nadol môžete tiež aktivovať špeciálny režim s väčším horným okrajom, ktorý uľahčuje ovládanie aplikácie jednou rukou.

Riadky stránok a zásobníky stránok

Karta