Списки
Панелі списків можуть допомогти у показі об'єктів на основі моделі у привабливий спосіб. Щоб правильно користуватися панеллю списку, вам слід стежити за трьома речима:
- Моделлю, яка містить дані, які має бути показано на вашій панелі списку
- Делегата, який визначає, як буде показано кожне з елементів моделі
- Самої панелі списку, на якій буде показано відомості щодо моделі, відповідно до параметрів делегата
Якщо вам потрібні додаткові пояснення, у документації Qt є інформативна сторінка щодо цього питання.
Створення базового списку
У панелі списку є дві ключові властивості, на які нам слід звернути увагу:
- model, яка приймає дані або
id
об'єкта, який містить дані - delegate, яка приймає компонент, якими ми скористаємося для показу даних у моделі
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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 може бути привабливим способом повідомити користувачеві, що список порожній, і слід щось з цим робити.
Зазвичай, повідомлення-замінник розташовують у центрі панелі списку. Не варто розгортати його на усю ширину панелі списку. Очевидно, у його показі вже не буде потреби, коли модель панелі списку почне заповнюватися даними — на щастя, у ListView є властивість із назвою count, яка дає змогу зробити це доволі просто.
Також ви можете додати допоміжну дію до вашого повідомлення-замінника. Зробити це можна долучивши дію до властивості PlaceholderMessage.helpfulAction .
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!!"})
}
}
}
