Rulumeblaj paĝoj kaj listvidoj

Rulumeblaj paĝoj estas utilaj kiam kombinitaj kun vertikalaj komponantoj aŭ dinamikaj komponantoj kiel Listo de Vidoj.

Kirigami.ScrollablePage

Kirigami.ScrollablePage estas paĝo kiu enhavas ruleblan enhavon, kiel ListView . Rulumado, same kiel movadaj indikiloj, estas aŭtomate administritaj.

Kirigami.ScrollablePage {
    id: root
    //La rektangulo aŭtomate estos rulebla
    Rectangle {
        width: root.width
        height: 99999
    }
}

En preskaŭ ĉiu alia maniero, rulebla paĝo estas sama kiel normala paĝo.

Averto

Ne metu ScrollView interne de Kirigami.ScrollablePage ; infanoj de Kirigami.ScrollablePage jam estas ene de ScrollView.

ListView en ScrollablePage

Kiam la rektaj infanoj de Kirigami.ScrollablePage etendiĝas vertikale preter la grandeco de la paĝo mem, rulumbreto aperas ĉe la dekstra rando de la paĝo kaj la paĝo estos rulebla.

Du ruleblaj paĝoj, ambaŭ enhavantaj ListView kun propra enhavo (ekrankopio de NeoChat)

Ofte vi havas pli ol unu infanon en via Kirigami.ScrollablePage , kaj poziciigi elementojn povas esti malfacila—precipe en kombinaĵo kun ListView .

Por nevideblaj komponantoj, havi ilin ene de la komponanto ListView ne ŝanĝos la vidaĵojn de la paĝo, do ni povas movi ilin en la amplekson de la listvido. Same por elementoj ankritaj al la centro de la paĝo, kiel anstataŭigaj mesaĝoj por malplenaj listvidoj.
Por aliaj eroj, povus havi sencon movi ilin al la kaplinio aŭ piedlinio de la Kirigami.ScrollablePage . Ĉi tio ofte okazas por serĉbretoj.

AnstataŭiloMesaĝo

Eblas aldoni Kirigami.PlaceholderMessage kun kelkaj instrukcioj, se la listvido estas malplena.

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

Serĉu en la ListView

Serĉkampo ofte estas aldonita al Kirigami.ScrollablePage por filtri la ListView . Ĉi tio povas esti farita ŝanĝante la defaŭltan titleDelegate por uzi Kirigami.SearchField anstataŭe.

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

Sugesto

Vi povas uzi KSortFilterProxyModel de KItemModel por facile aldoni filtran kapablon rekte en QML sen ia bezono de C++-kodo.

Tiru por refreŝigi

Alia funkcio provizita de ĉi tiu komponanto estas ago "tiri por refreŝigi". Por uzi ĉi tion, aktivigu ĝin jene:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // NOTO: MyModel ne venas de la komponantoj, ĝi estas nur ekzemplo pri kiel ĝi povas esti
        // uzata kune kun iu aplika logiko, kiu povas ĝisdatigi la listomodelon kaj signali kiam ĝi
        // estas farita.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Tirante malsupren, vi ankaŭ povas aktivigi specialan reĝimon kun pli granda supra marĝeno, kiu faciligas unumanan uzon de la aplikaĵo.

Paĝaj vicoj kaj paĝaj stakoj

Kartoj