Qt Quick Ultralite listmodel 范例

Demonstrates how to create mutable list models.

概述

The example shows how to make a mutable model using Qul::ListModel . The model is used in a ListView to build a minimal alarm application.

The example shows a list of alarms that can be paused, resumed, and removed. The Create new button adds a new alarm on every click.

目标平台

工程结构

列表模型

mylistmodel.h file defines the list model.

First, it declares the list element data type:

// To create a custom ListModel<T>, we need to declare a type T that holds
// the data for each element and is equality comparable.
//
// Here, the data type is AlarmData and it holds the number of seconds before
// the alarm should trigger (negative if it has already triggered), as well
// as a running flag.
//! [ListModel data]
struct AlarmData
{
    int seconds = 0;
    bool running = false;
};
inline bool operator==(const AlarmData &lhs, const AlarmData &rhs)
{
    return lhs.seconds == rhs.seconds && lhs.running == rhs.running;
}
							

Then the AlarmModel is implemented based on ListModel<AlarmData> :

// Declare our AlarmModel.
//
// The only requirement is that we implement the pure virtual functions
// count() and data() from ListModel.
//
// We add the other functions to allow our UI to affect the model.
//! [custom ListModel]
struct AlarmModel : Qul::ListModel<AlarmData>
{
private:
    std::vector<AlarmData> m_data;
public:
    // Implement the ListModel interface
    int count() const override { return m_data.size(); }
    AlarmData data(int index) const override { return m_data[index]; }
							

The model also contains functions for modifying the model from QML, like the addEntry() 函数。

    void addEntry(int seconds)
    {
        m_data.push_back({seconds, true});
        modelReset();
    }
							
列表视图

ListView in listmodel.qml needs the AlarmModel , an instance of which is created as a child of the root object:

    // Create an instance of the custom AlarmModel
    AlarmModel {
        id: alarmModel
    }
							

ListView uses the model instance to fill the alarmDelegate with data:

    // This ListView is the main display element. It creates an alarmDelegate
    // instance for each entry in alarmModel and listens to alarmModel changes.
    ListView {
        width: parent.width
        anchors.top: parent.top
        anchors.bottom: controls.top
        model: alarmModel
        delegate: alarmDelegate
    }
							

Create new button is clicked, a function on the model is called to add a new alarm:

        Button {
            id: createNewButton
            text: "Create new"
            anchors.right: parent.right
            onClicked: alarmModel.addEntry(15)
        }
							
委托

The delegate controls the look-and-feel of each entry in the ListView based on the data from the model.

    // Declare the delegate that the ListView (below) instantiates for each
    // entry in the alarm model.
    //
    // It shows information about the entry and two buttons, one to pause or
    // unpause the alarm, and one to remove it from the list.
    Component {
        id: alarmDelegate
        Item {
            width: root.width
            height: 60
							

For example, the state and labels of the buttons on each alarm is defined like this:

            Row {
                anchors.right: parent.right
                Button {
                    text: model.running ? "Pause" : "Unpause"
                    visible: model.seconds > 0
                    // The "index" property contains the model index for
                    // the current delegate instance.
                    onClicked: alarmModel.togglePause(index)
                }
                Button {
                    text: "Remove"
                    onClicked: alarmModel.remove(index)
                }
            }
							

文件:

另请参阅 Qul::ListModel and ListView .