Списки
Панелі списків можуть допомогти у показі об'єктів на основі моделі у привабливий спосіб. Щоб правильно користуватися панеллю списку, вам слід стежити за трьома речима:
- Моделлю, яка містить дані, які має бути показано на вашій панелі списку
- Делегата, який визначає, як буде показано кожне з елементів моделі
- Самої панелі списку, на якій буде показано відомості щодо моделі, відповідно до параметрів делегата
Якщо вам потрібні додаткові пояснення, у документації 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
}
}
