Списки

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

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

Якщо вам потрібні додаткові пояснення, у документації 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!!"})
        }
    }
}