C

Qt Quick Ultralite リストモデルの例

変更可能なリストモデルの作成方法を示します。

概要

このサンプルでは、Qul::ListModel を使用して変更可能なモデルを作成する方法を示します。このモデルは、ListView 内で使用され、最小限のアラームアプリケーションを構築します。

一時停止、再開、削除が可能な最小限のアラームアプリケーションを示すListModelの例。

この例では、一時停止、再開、削除が可能なアラームのリストを示しています。「Create new 」ボタンをクリックするたびに、新しいアラームが追加されます。

対象プラットフォーム

プロジェクト構造

リストモデル

mylistmodel.hファイルは、リストモデルを定義しています。

まず、リスト要素のデータ型を宣言します。

// 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
{
    AlarmData()
        : seconds(0)
        , running(false)
    {}

    AlarmData(int argSeconds, bool argRunning)
        : seconds(argSeconds)
        , running(argRunning)
    {}

    int seconds;
    bool running;
};

inline bool operator==(const AlarmData &lhs, const AlarmData &rhs)
{
    return lhs.seconds == rhs.seconds && lhs.running == rhs.running;
}

次に、ListModel<AlarmData> に基づいて `AlarmModel ` を実装します：

// 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:
    Qul::DynamicList<AlarmData> m_data;

public:
    // Implement the ListModel interface
    int count() const QUL_DECL_OVERRIDE { return m_data.count(); }
    AlarmData data(int index) const QUL_DECL_OVERRIDE { return m_data[index]; }

このモデルには、addEntry() 関数のように、QMLからモデルを変更するための関数も含まれています。

    void addEntry(int seconds)
    {
        m_data.append(AlarmData(seconds, true));
        modelReset();
    }

リストビュー

listmodel.qml内のListView にはAlarmModel が必要であり、そのインスタンスはルートオブジェクトの子として作成されます：

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

ListView は、モデルインスタンスを使用してalarmDelegate にデータを設定します：

    // 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 {
            id: createNewButton
            text: "Create new"
            anchors.right: parent.right
            onClicked: alarmModel.addEntry(15)
        }

デリゲート

デリゲートは、モデルからのデータに基づいて、ListView 内の各エントリのルックアンドフィールを制御します。

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

たとえば、各アラームのボタンの状態やラベルは、次のように定義されます：

            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 およびListView 。

特定の Qt ライセンスの下で利用可能です。
詳細はこちらをご覧ください。