Widoki listy

Listviews mogą pomóc ci wyświetlić obiekt z modelu w przystępny sposób. Aby użyć widoku listy, musisz pamiętać o trzech rzeczach:

1. model, który zawiera dane, które chcesz, aby wyświetlał twój widok listy
2. Delegat, który określa w jaki sposób będzie wyświetlana każda rzecz w modelu
3. Widok listy, który wyświetli szczegóły z modelu w zależności od delegata

Jeśli potrzebujesz bardziej szczegółowego wyjaśnienia, to dokumentacja Qt zawiera stronę informacyjną na ten temat.

Tworzenie podstawowego widoku listy

Widok listy ma dwie istotne właściwości, na które musimy zwrócić uwagę:

• model, który przyjmuje dane lub id obiektu, który przechowuje dane
• delegate, którzy przyjmuje składnik, którego użyjemy do wyświetlenie danych z 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

    // Wpisanie liczby dla właściwości modelu stworzy taką liczbę wpisów, poczynając od 0.
    model: 200

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

}

W przypadku, gdy twoje dane modelu zawierają tylko pojedynczy kawałek danych, jak w powyższym przypadku, to wystarczy, że pobierzesz dane z modelu, odnosząc się do modelData.

Uwaga odnośnie delegatów: jeśli twój model zawiera obiekty z danymi w nazwanych właściwościach, to nazwy tych właściwości staną się samoczynnie dostępne dla twojego delegata i wystarczy, że będziesz używać ich nazw w swoim delegacie.

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 daje wiele składników, które zostały opracowane do użytku w widokach list, takie jak Kirigami.BasicListItem, Kirigami.CheckableListItem oraz Kirigami.SwipeListItem, wszystkie z nich są zbudowane na Kirigami.AbstractListItem. Istnieje także Kirigami.CheckDelegate, Kirigami.RadioDelegate oraz Kirigami.SwitchDelegate, które zostały stworzone, aby korzystać z danych elementów sterowania.

Jednakże, nie jesteś ograniczony do używania tylko tych składników i możesz używać jakichkolwiek chcesz - co może się wiązać z pewnym dostrojeniem twojego układu.

Wiadomości zastępcze

W niektórych przypadkach, możesz chcieć użyć widoku listy, który jest pusty, aż do chwili, gdy użytkownik w nim coś umieści. W takich przypadkach, użycie Kirigami.PlaceholderMessage może być dobrym sposobem na powiedzenie użytkownikowi, że lista jest pusta i że muszą coś z tym zrobić.

Zazwyczaj będziesz chciał umieścić PlaceholderMessage na środku ListView i nie będziesz też chciał, aby rozciągało się na całą szerokość ListView. Oczywiście nie będziesz też chciał, aby było to widoczne, po tym jak model ListView wypełni się danymi: na szczęście, ListViews ma właściwość o nazwie count, która czyni to łatwiejszym.

Możesz także chcieć dodać pomocne działanie do naszej wiadomości zastępczej. Można to zrobić doczepiając działanie do własności helpfulAction rzeczy 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!!"})
    }
  }
}

Nagłówki list

ListViews także obsługują składniki nagłówka wewnątrz właściwości header, a Kirigami zapewnia ładnie wyglądający składnik do tych celów: Kirigami.ItemViewHeader. Dajemy ten składnik z tekstem dla właściwości title oraz położeniem obrazu dla właściwości backgroundImage.source i już gotowe.

Ciekawą właściwością widoku listy jest headerPositioning. Wpływa to na sposób poruszania się naszego nagłówka, gdy będziemy z nim oddziaływać na długim widoku listy, który wychodzi poza wysokość strony. headerPositioning może być ustawiony na trzy różne wartości:

• ListView.OverlayHeader: W tym ustawieniu, nagłówek skurczy się, gdy zaczniemy przewijać w dół, lecz pozostanie widoczny w bardziej zwartym stanie.
• ListView.PullBackHeader: Nagłówek zniknie, gdy przewiniemy na dół, lecz pojawi się ponownie, gdy przewiniemy z powrotem w górę, nawet gdy nie osiągniemy jeszcze szczytu widoku listy.
• ListView.InlineHeader: Nagłówek będzie działał jako część widoku listy i pozostanie na szczycie widoku listy.

ListView {
  id: myList

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

  model: 200

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