Widoki listy

Listviews can help you display objects from a model in an attractive way. To use a list view, you have to keep track of three things:

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, which accepts the data or the id of the object that holds the data
• delegate, which accepts the component we will use to display the data in the model

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

        // 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
        }
    }
}

In cases where your model data only contain a single piece of data, like in the example above, you can just grab the data in the model by referencing 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 offers a number of components that have been designed specifically for use in list views, such as Kirigami.BasicListItem , Kirigami.CheckableListItem and Kirigami.SwipeListItem , all of which build upon Kirigami.AbstractListItem . There are also Kirigami.CheckDelegate , Kirigami.RadioDelegate , and Kirigami.SwitchDelegate , which are designed to take advantage of those specific controls.

However, you are not limited to using these components and you can choose whichever ones you wish. This may require some tweaking of your layout.

Wiadomości zastępcze

In some cases, you might want to use a list view that is empty until the user does something. In these situations, using a Kirigami.PlaceholderMessage can be an attractive way of telling your user that the list is empty and that they can do something about it.

You will generally want to place a placeholder message in the center of the ListView and you will likely not want it to span the entire width of the ListView. You will obviously also want it to be hidden once the ListView's model becomes populated with data. Thankfully, ListViews have a property named count that makes doing this quite easy.

You might also want to add a helpful action to your placeholder message. This can be done by attaching an action to the PlaceholderMessage.helpfulAction property.

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!!"})
        }
    }
}