Listvyer

Listvyer kan hjälpa dig att visa objekt från en modell på ett attraktivt sätt. För att använda en listvy måste du hålla redan på tre saker:

1. En modell, som innehåller data som du vill att din listvy ska visa
2. En delegat, som definierar hur varje element i modellen kommer att visas
3. Själva listvyn, som visar information från modellen enligt delegaten

Om du vill ha ytterligare klargöranden, har Qt-dokumentationen en informativ sida om ämnet.

Skapa en grundläggande listvy

En listvy har två grundläggande egenskaper som vi måste ta hänsyn till:

• model, som accepterar objektets id som innehåller data
• delegate, som accepterar komponenten vi ska använda för att visa data i modellen

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

    // Att tillhandahålla ett tal för modellegenskapen genererar så många dataposter med början på
    // 0.
    model: 200

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

}

I fallet där modellens data bara innehåller ett enda datavärde, som i exemplet ovan, kan du bara hämta data i modellen genom att referera till modelData.

En anmärkning om delegater: Om din modell innehåller objekt med data i namngivna egenskaper, exponeras namnet på egenskaperna automatiskt till din delegat och du behöver bara använda namnen i din 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
  }
}

Kirigami erbjuder ett antal komponenter som specifikt har konstruerats för användning i listvyer, såsom Kirigami.BasicListItem, Kirigami.CheckableListItem och Kirigami.SwipeListItem, som alla bygger på Kirigami.AbstractListItem. Det finns också Kirigami.CheckDelegate, Kirigami.RadioDelegate och Kirigami.SwitchDelegate, som är konstruerade för att dra nytta av de specifika kontrollerna.

Dock är du inte begränsad till att använda de här komponenterna och kan välja vilka du vill, även om det kan betyda att layouten måste justeras något.

Platsmarkeringsmeddelanden

I vissa fall, kan du vilja använda en listvy som är tom tills användaren gör något. I sådana situationer, kan användning av en Kirigami.PlaceholderMessage vara ett attraktivt sätt att tala om för användaren att listan är tom och att de kan göra något åt det.

I allmänhet placerar du en PlaceholderMessage i listvyns mitt, och du vill inte heller att den inte ska fylla hela listvyns bredd. Man vill uppenbarligen också att det inte är synligt när listvyns modell befolkas med data: som tur är har listvyer en egenskap som heter count som gör det rätt enkelt.

Du kanske också vill lägga till en hjälpsam åtgärd i platsmarkeringsmeddelandet. Det går att göra genom att bifoga en åtgärd till egenskapen helpfulAction i en 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!!"})
    }
  }
}

Listhuvuden

Listvyer stöder också huvudkomponenter med egenskapen header, och Kirigami tillhandahåller en attraktiv komponent i detta syfte: Kirigami.ItemViewHeader. Vi tillhandahåller komponenten med text för egenskapen title och med en bildplats för egenskapen backgroundImage.source så är vi klara.

En intressant egenskap i listvyn är headerPositioning. Den påverkar hur vårt huvud flyttas när vi interagerar med en lång listvy som expanderar utanför sidans höjd. headerPositioning kan ställas in till tre olika värden:

• ListView.OverlayHeader: Med det här värdet dras huvudet ihop när vi börjar rulla neråt, men förblir synligt i ett mer kompakt tillstånd.
• ListView.PullBackHeader: Huvudet försvinner när vi rullar neråt, men dyker upp igen när vi rullar tillbaka uppåt, även om vi inte har nått listvyns topp ännu.
• ListView.InlineHeader: Huvudet beter sig som en del av listvyn och förblir längst upp i listvyn.

ListView {
  id: myList

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

  model: 200

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