Pogledi seznama

Pogled seznama vam lahko pomaga pri dinamičnem prikazu številnih komponent.

Pogledi seznama vam lahko pomagajo prikazati objekte iz modela na privlačen način. Za uporabo pogleda seznama morate upoštevati tri stvari:

model, ki vsebuje podatke, ki jih želite prikazati v pogledu seznama
delegat, ki določa, kako bo vsak element v modelu prikazan
Sam pogled seznama, ki bo prikazoval informacije iz modela v skladu z delegatom

Če želite dodatno pojasnilo, ima dokumentacija Qt informativna stran na to temo.

Osnove modelov in pogledov

Seznamski pogled ima dve bistveni lastnosti, na kateri moramo biti pozorni:

model, ki sprejema podatke ali 'id' predmeta, ki nosi podatke
delegate, ki sprejema komponento, ki jo bomo uporabili za prikaz podatkov v modelu

Model ni viden, saj vsebuje le podatke. Običajno bo delegat zavit v komponento, tako da jo je mogoče ponovno uporabiti: služi kot načrt za instanciranje vsakega delegata.

Tukaj je primer, ki vsebuje natanko en pogled seznama, en model in enega delegata z uporabo Kirigami.SubtitleDelegate:

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "List of Plasma products"
    width: 600
    height: 400
    pageStack.initialPage: Kirigami.ScrollablePage {
        ListView {
            anchors.fill: parent
            model: plasmaProductsModel
            delegate: listDelegate
        }
        ListModel {
            id: plasmaProductsModel
            ListElement { product: "Plasma Desktop"; target: "desktop" }
            ListElement { product: "Plasma Mobile";  target: "mobile" }
            ListElement { product: "Plasma Bigscreen"; target: "TVs" }
        }
        Component {
            id: listDelegate
            Controls.ItemDelegate {
                width: ListView.view.width
                text: `${model.product} is KDE software developed for ${model.target} stored at index ${model.index} of this list`
            }
        }
    }
}

In popolnoma enak primer, v vrstici:

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "List of Plasma products (inline)"
    width: 600
    height: 400
    pageStack.initialPage: Kirigami.ScrollablePage {
        ListView {
            anchors.fill: parent
            model: ListModel {
                id: plasmaProductsModel
                ListElement { product: "Plasma Desktop"; target: "desktop" }
                ListElement { product: "Plasma Mobile";  target: "mobile" }
                ListElement { product: "Plasma Bigscreen"; target: "TVs" }
            }
            delegate: Controls.ItemDelegate {
                width: ListView.view.width
                text: `${model.product} is KDE software developed for ${model.target} stored at index ${model.index} of this list`
            }
        }
    }
}

Razumevanje modelov

Model vsebuje podatke, ki bodo uporabljeni za zapolnitev pogleda seznama. Različni načini uporabe modelov imajo različne načine za dostop do podatkov:

NAČIN UPORABE	KAKO DOSTOPATI	KDAJ UPORABITI
Modeli Qt z več kot eno vlogo	model.index, model.somerole	V večini primerov
Modeli Qt z eno vlogo	model.index, model.somerole, model.modelData	V večini primerov, za izdelavo prototipov
JavaScript array model	model.index, model.modelData	Za izdelavo prototipov
Celoštevilski model	model.index, model.modelData	Za izdelavo prototipov

O drugih načinih uporabe modelov lahko preberete v dokumentaciji Qt.

V zgornji tabeli se "modeli Qt" nanašajo tako na modele, specifične za C++, kot je QAbstractListModel, kot na modele, specifične za QML, kot je ListModel. Ta stran učbenika se bo osredotočila samo na modele, specifične za QML. Malo naprej nudimo učbenik za Povezovanje modelov C++ z QML z uporabo QAbstractListModel.

Lastnost model.index je na voljo vsakemu modelu in vsebuje indeks (položaj) vsakega delegata. Zaradi udobja ga je mogoče skrajšati na index.

Zgoraj omenjena lastnost model.somerole je le označba mesta in ni specifična lastnost, ki izhaja iz QML: somerole je lahko katera koli vloga, ki jo definira model. V prvem primeru kode te strani, ki je prikazan nad tabelo, ima model plasmaProductsModel vlogi product in target, do katerih lahko dostopate z model.product oziroma model.target.

Tako kot je model.index mogoče skrajšati v index, lahko vsako lastnost model.somerole skrajšamo samo v somerole (kot product) zaradi udobja, vendar je priporočljivo, da jih spremenite v zahtevane lastnosti :

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "List of Plasma products (shortened with required properties)"
    width: 600
    height: 400
    pageStack.initialPage: Kirigami.ScrollablePage {
        ListView {
            anchors.fill: parent
            model: plasmaProductsModel
            delegate: listDelegate
        }
        ListModel {
            id: plasmaProductsModel
            ListElement { product: "Plasma Desktop"; target: "desktop" }
            ListElement { product: "Plasma Mobile";  target: "mobile" }
            ListElement { product: "Plasma Bigscreen"; target: "TVs" }
        }
        Component {
            id: listDelegate
            Controls.ItemDelegate {
                width: ListView.view.width
                required property string product
                required property string target
                required property int index
                text: `${product} is KDE software developed for ${target} stored at index ${index} of this list`
            }
        }
    }
}

Poleg tega, če model vsebuje samo eno vlogo ali sploh nima nobene vloge, je mogoče do njegovih podatkov dostopati tudi z lastnostjo model.modelData, ki jo je mogoče tudi skrajšati v modelData (in kot taka bi morala biti tudi zahtevana lastnost):

import QtQuick
import QtQuick.Controls