Vistes de llista

Les vistes de llista poden ajudar a mostrar objectes d'un model d'una manera atractiva. Per a utilitzar una vista de llista, haureu de realitzar un seguiment de tres coses:

1. El model, el qual conté les dades que voleu mostrar a la vista de llista.
2. El delegat, el qual defineix com es mostrarà cada element en el model.
3. La vista de llista en si, la qual mostrarà la informació del model segons el delegat.

Per a més aclariments, la documentació de les Qt té una pàgina informativa sobre el tema.

Crear una vista de llista bàsica

Una vista de llista té dues propietats essencials a les quals hem de prestar atenció:

• model, el qual accepta les dades o l'id de l'objecte que conté les dades.
• delegate, el qual accepta el component que utilitzarem per a mostrar les dades en el model.

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

    // Si proporcioneu un número per a la propietat del model, es generaran aquest nombre d'entrades
    // de dades a partir de 0.
    model: 200

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

}

En els casos en què les dades del model només contenen una sola peça de dades, com en l'exemple anterior, podeu prendre les dades en el model fent referència a modelData.

Una nota sobre els delegats: si el vostre model conté objectes amb dades en propietats amb nom, el nom d'aquestes propietats s'exposarà automàticament al delegat i només podreu utilitzar aquests noms en el vostre delegat.

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

El Kirigami ofereix una sèrie de components que s'han dissenyat específicament per al seu ús en vistes de llista, com Kirigami.BasicListItem, Kirigami.CheckableListItem i Kirigami.SwipeListItem, tots els quals es basen en el Kirigami.AbstractListItem. També hi ha Kirigami.CheckDelegate, Kirigami.RadioDelegate i Kirigami.SwitchDelegate, els quals estan dissenyats per a aprofitar aquests controls específics.

No obstant això, no esteu limitat a utilitzar aquests components i podreu triar els que vulgueu -encara que això pot significar alguns ajustos en la vostra disposició-.

Missatges amb marcadors de posició

En alguns casos, possiblement voldreu utilitzar una vista de llista que estigui buida fins que l'usuari faci alguna cosa. En aquestes situacions, utilitzar un Kirigami.PlaceholderMessage pot ser una forma atractiva de dir-li a l'usuari que la llista està buida i que hi pot fer alguna cosa.

En general, voldreu col·locar un PlaceholderMessage al centre de la ListView i tampoc voldreu que abasti tota l'amplada de la ListView. Òbviament, també voldreu que no sigui visible un cop es completi amb dades el model de la ListView: afortunadament, les ListView tenen una propietat anomenada count, la qual fa que fer això sigui molt fàcil.

Possiblement també voldreu afegir una acció d'ajuda al vostre missatge amb un marcador de posició. Això es pot fer adjuntant una acció a la propietat helpfulAction d'un 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!!"})
    }
  }
}

Capçaleres de les llistes

Les ListView també admeten components de capçalera amb la propietat header, i el Kirigami proporciona un component atractiu per a aquest propòsit: Kirigami.ItemViewHeader. Proporcionem aquest component amb el text per a la propietat title i una ubicació d'imatge per a la propietat backgroundImage.source i ja estan establertes.

Una propietat interessant de la vista de llista és headerPositioning. Afecta la forma en què es mourà la nostra capçalera quan interactuem amb una vista de llista llarga que s'expandeix més enllà de l'alçada de la pàgina. headerPositioning es pot establir en tres opcions de configuració diferents:

• ListView.OverlayHeader: en aquesta configuració, la capçalera es contraurà un cop que comencem a desplaçar cap avall, però romandrà visible en un estat més compacte.
• ListView.PullBackHeader: la capçalera desapareixerà a mesura que ens desplacem cap avall, però reapareixerà a mesura que ens desplacem cap amunt, fins i tot si encara no hem arribat a la part superior de la vista de llista.
• ListView.InlineHeader: la capçalera actuarà com a part de la vista de llista i romandrà a la part superior de la vista de llista.

ListView {
  id: myList

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

  model: 200

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