C

Qt Quick ウルトラライトリストモデル例

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

概要

この例では、Qul::ListModel を使ってミュータブル・モデルを作成する方法を示します。このモデルはListView で使用され、最小限のアラームアプリケーションを構築します。

この例では、一時停止、再開、削除が可能なアラームのリストを示しています。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)
                }
            }

Files：

Qul::ListModel およびListViewも参照してください。

Qt の特定のライセンスの下で利用可能です。