Pogledi seznama

Pregledi seznamov vam lahko pomagajo prikazati predmete iz modela na privlačen način. Če želite uporabiti pogled seznama, morate spremljati tri stvari:

1. model, ki vsebuje podatke, ki jih želite prikazati v pogledu seznama
2. delegat, ki določa, kako bo vsak element v modelu prikazan
3. 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.

Ustvarjanje osnovnega pregleda seznama

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

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

import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {

  ListView {
    id: myList

    // Če navedete številko za lastnost modela, boste ustvarili, da se števec vnosov podatkov začne
    // od 0.
    model: 200

    delegate: Kirigami.BasicListItem {
      label: "Item " + modelData
    }
  }

}

V primerih, ko podatki modela vsebujejo samo en del podatkov, kot v zgornjem primeru, lahko podatke v modelu zgrabite tako, da se sklicujete na 'modelData'.

Opomba o pooblaščencih: če vaš model vsebuje predmete s podatki v imenovanih lastnostih, bo ime teh lastnosti samodejno izpostavljeno vašemu pooblaščencu in samo ta imena boste morali uporabljati v pooblaščencu.

ListModel {
  id: myModel
  ListElement { type: "Item"; number: 0 }
  ListElement { type: "Item"; number: 1 }
  ListElement { type: "Item"; number: 2 }
  ListElement { type: "Item"; number: 3 }
}

ListView {
  id: myList

  model: myModel

  delegate: Kirigami.BasicListItem {
    label: type + " " + number
  }
}

Kirigami ponuja številne komponente, ki so bile zasnovane posebej za uporabo v pogledih seznama, kot so 'Kirigami.BasicListItem', 'Kirigami.CheckableListItem' in 'Kirigami.SwipeListItem', vse pa gradijo na 'Kirigami.AbstractListItem'. Obstajajo tudi 'Kirigami.CheckDelegate', 'Kirigami.RadioDelegate' in 'Kirigami.SwitchDelegate', ki so zasnovani tako, da izkoristijo te posebne kontrole.

Vendar pa niste omejeni na uporabo teh komponent in lahko izberete, katere želite - čeprav to lahko pomeni nekaj poseganja v vašo postavitev.

Sporočila oznak lokacije

V nekaterih primerih boste morda želeli uporabiti pogled seznama, ki je prazen, dokler uporabnik nekaj ne naredi. V teh primerih je uporaba 'Kirigami.PlaceholderMessage' lahko privlačen način, da uporabniku poveste, da je seznam prazen in da lahko nekaj stori glede tega.

Na splošno boste želeli postaviti predmet PlaceholderMessage v središče predmeta ListView in bi tudi želeli, da se ne bo razprl čez celotno širino predmeta ListView. Očitno boste tudi želeli, da ne bo viden, ko bo model ListView napolnjen s podatki: na srečo ima ListViews lastnost z imenom 'count', zaradi katere je to zelo enostavno.

V sporočilo ograde boste morda želeli dodati tudi koristno dejanje. To lahko storite tako, da priložite dejanje lastnosti helpfulAction v Kirigami.PlaceHolderMessage.

ListView {
  id: myList

  model: ListModel { id: myModel }

  delegate: Kirigami.BasicListItem {
    label: text
  }

  Kirigami.PlaceholderMessage {
    anchors.centerIn: parent
    width: parent.width - (Kirigami.Units.largeSpacing * 4)

    visible: myList.count === 0
    text: "Add something to me!"
    helpfulAction: Kirigami.Action {
      icon.name: "list-add"
      text: "Add"
      onTriggered: myModel.append({"text": "Hello!!"})
    }
  }
}

Glave seznama

ListViews podpira tudi komponente glave z lastnostjo 'header` in Kirigami zagotavlja privlačno komponento za ta namen: 'Kirigami.ItemViewHeader'. Tej komponenti zagotovimo besedilo za lastnost 'title' in lokacijo slike za lastnost 'backgroundImage.source' in smo nastavljeni.

Zanimiva lastnost pogleda seznama je 'headerPositioning'. To vpliva na način premikanja glave, ko sodelujemo z dolgim pogledom seznama, ki se razširi preko višine strani. 'headerPositioning' lahko nastavite na tri različne nastavitve:

• 'ListView.OverlayHeader': V tej nastavitvi se bo glava strnila, ko se začnemo pomikati navzdol, vendar bo ostala vidna v bolj kompaktnem stanju.
• 'ListView.PullBackHeader': Glava bo izginila, ko se pomaknemo navzdol, vendar se bo ponovno prikazovala, ko se pomaknemo nazaj navzgor, tudi če še nismo dosegli vrha pogleda seznama.
• 'ListView.InlineHeader': glava bo delovala kot del seznama in ostala na vrhu seznama.

ListView {
  id: myList

  headerPositioning: ListView.OverlayHeader
  header: Kirigami.ItemViewHeader {
  backgroundImage.source: "../banner.jpg"
    title: "LongListView"
  }

  model: 200

  delegate: Kirigami.BasicListItem {
    label: "Item " + modelData
  }
}