Списки

Панелі списків можуть допомогти у показі об’єктів на основі моделі у привабливий спосіб. Щоб правильно користуватися панеллю списку, вам слід стежити за трьома речима:

1. Моделлю, яка містить дані, які має бути показано на вашій панелі списку
2. Делегата, який визначає, як буде показано кожне з елементів моделі
3. Самої панелі списку, на якій буде показано відомості щодо моделі, відповідно до параметрів делегата

Якщо вам потрібні додаткові пояснення, у документації Qt є інформативна сторінка щодо цього питання.

Створення базового списку

У панелі списку є дві ключові властивості, на які нам слід звернути увагу:

• model, яка приймає дані або id об’єкта, який містить дані
• delegate, яка приймає компонент, якими ми скористаємося для показу даних у моделі

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

    // Надання властивості моделі числового значення призведе до створення відповідної кількості
    // записів даних, починаючи з 0.
    model: 200

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

}

У випадках, коли ваша модель даних містить лише один блок даних, подібно до наведеного вище прикладу, ви можете просто зібрати дані у модель використанням посилання modelData.

Зауваження щодо делегатів: якщо ваша модель містить об’єкти із даними в іменованих властивостях, назву цих властивостей буде автоматично відкрито вашому делегату, і вам слід лише скористатися цими назвами у вашому делегаті.

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 пропонує декілька компонентів, які було розроблено спеціально для використання на панелях списків, зокрема Kirigami.BasicListItem, Kirigami.CheckableListItem і Kirigami.SwipeListItem, усі з них побудовано на основі Kirigami.AbstractListItem. Також передбачено Kirigami.CheckDelegate, Kirigami.RadioDelegate і Kirigami.SwitchDelegate, які розроблено для того, щоб скористатися перевагами цих специфічних елементів керування.

Втім, вас не обмежено використанням цих компонентів, і ви можете вибрати будь-які компоненти — хоча це може означати певне коригування компонування.

Повідомлення-замінники

У певних випадках може виникнути потреба у використанні порожньої панелі списку до моменту виконання якихось дій користувачем. Тоді, використання Kirigami.PlaceholderMessage може бути привабливим способом повідомити користувачеві, що список порожній, і слід щось з цим робити.

Зазвичай, PlaceholderMessage розташовують у центрі панелі списку. Не варто розгортати його на усю ширину панелі списку. Очевидно, у його показі вже не буде потреби, коли модель панелі списку почне заповнюватися даними — на щастя, у ListView є властивість із назвою count, яка дає змогу зробити це доволі просто.

Також ви можете додати допоміжну дію до вашого повідомлення-замінника. Зробити це можна долучивши дію до властивості helpfulAction 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!!"})
    }
  }
}

Заголовки списку

Крім того, у панелях списку передбачено підтримку компонентів заголовків за допомогою властивості header, і у Kirigami є привабливий компонент для цього: Kirigami.ItemViewHeader. Нам достатньо вказати для цього компонента текстом для властивості title і адресу зображення для властивості backgroundImage.source, ось і все.

Цікавою властивістю панелі списку є headerPositioning. Значення цієї властивості впливає на спосіб, у який заголовок пересуватиметься, коли ми взаємодіємо із довгою панеллю списку, яка перевищує за висотою сторінку. Для headerPositioning можна встановити три різних значення:

• ListView.OverlayHeader: якщо вказано це значення, заголовок стискатиметься після початку гортання вниз, але лишатиметься видимим у компактнішій формі.
• ListView.PullBackHeader: заголовок зникатиме при гортанні вниз, але повторно з’явиться при зворотному гортанні, навіть якщо ви ще не досягли верхньої частини панелі списку.
• ListView.InlineHeader: заголовок працюватиме як частина панелі списку і лишатиметься у верхній частині панелі списку.

ListView {
  id: myList

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

  model: 200

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