MochiuWiki : SUSE, EC, PCB

「QMLのコントロール - ListModelのカスタム」の版間の差分

ビジュアルウィキテキスト
ページの作成:「== 概要 == カスタムリストモデルの目的は、QMLのビューコンポーネントに対して柔軟なデータ構造を提供することである。<br> これは、ListView、GridView、TableView等のビューコンポーネントと組み合わせて使用される。<br> <br> 通常のListModelは、単純なKey-Value形式のプロパティのみをサポートしており、配列やネストされたオブジェクトを直接持つことがで…」
 
 
(同じ利用者による、間の9版が非表示)
30行目: 30行目:
== カスタムリストモデルの定義 ==
== カスタムリストモデルの定義 ==
==== QAbstractListModelクラスの継承 ====
==== QAbstractListModelクラスの継承 ====
カスタムリストモデルはQAbstractListModelクラスを継承する必要がある。<br>
カスタムリストモデルは、<code>QAbstractListModel</code>クラスを継承する必要がある。<br>
このクラスは、データの格納、アクセス、変更のための機能を提供する。<br>
このクラスは、データの格納、アクセス、変更のための機能を提供する。<br>
<br>
<br>
  <syntaxhighlight lang="c++">
  <syntaxhighlight lang="c++">
  #include <QAbstractListModel>
  #include <QAbstractListModel>
class <クラス名> : public QAbstractListModel
{
    Q_OBJECT
public:
    explicit CustomListModel(QObject *parent = nullptr) : QAbstractListModel(parent)
    {}
    // ...略
};
// 例:
class CustomListModel : public QAbstractListModel
{
    Q_OBJECT
public:
    explicit CustomListModel(QObject *parent = nullptr) : QAbstractListModel(parent)
    {}
    // ...略
};
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
==== モデルのデータ構造 ====
==== モデルのデータ構造 ====
データ構造の定義は、構造体を使用して各アイテムが持つデータを定義する。<br>
データ構造の定義は、構造体を使用して各アイテムが持つデータを定義する。<br>
44行目: 68行目:
  // カスタムデータ構造の定義
  // カスタムデータ構造の定義
   
   
struct <構造体名> {
    // ...略
};
// 例: 配列を含むデータ構造
// デフォルトのListModelではデータに配列を持つことができないため
  struct CustomData {
  struct CustomData {
     QString name;
     QString name;
60行目: 90行目:
  // QML側からアクセスする場合に使用する識別子となる
  // QML側からアクセスする場合に使用する識別子となる
   
   
enum CustomRoles {
    // ...略
};
// 例: 3つのデータを持つカスタムリストモデルのロール
  enum CustomRoles {
  enum CustomRoles {
     NameRole = Qt::UserRole + 1,
     NameRole = Qt::UserRole + 1,
77行目: 112行目:
   
   
  // 例: 上記の例のCustomData構造体の場合
  // 例: 上記の例のCustomData構造体の場合
  QVector<CustomData> m_items;
  class CustomListModel : public QAbstractListModel
{
    Q_OBJECT
private:
    QVector<CustomData> m_items;
    // ...略
};
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
86行目: 129行目:
  // データの行数を取得する
  // データの行数を取得する
   
   
  int rowCount(const QModelIndex &parent = QModelIndex()) const override;
  int rowCount(const QModelIndex &parent = QModelIndex()) const override
// 例: 上記の例のCustomData構造体の場合
int rowCount(const QModelIndex &parent = QModelIndex()) const override
int CustomListModel::rowCount(const QModelIndex &parent = QModelIndex()) const
{
    // 親インデックスが有効な場合は0を返す
    // リストモデルでは子アイテムを持たないため
    if (parent.isValid()) return 0;
    return m_items.size();
}
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
94行目: 148行目:
  // 指定されたインデックスとロールに対応するデータを取得する
  // 指定されたインデックスとロールに対応するデータを取得する
   
   
  QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
  QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override
// 例: 上記の例のCustomData構造体の場合
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override
QVariant CustomListModel::data(const QModelIndex &index, int role = Qt::DisplayRole) const
{
    // インデックスの有効性確認
    if (!index.isValid() || index.row() >= m_items.size()) return QVariant();
    // 指定された行のデータを取得
    const CustomData &item = m_items[index.row()];
    // ロールに応じて適切なデータを返す
    switch (role) {
      case NameRole:  return item.name;
      case ValueRole: return item.value;
      case TagsRole:  return QVariant::fromValue(item.tags);
      default:        return QVariant();
    }
}
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
===== roleNamesメソッド =====
===== roleNamesメソッド =====
roleNamesメソッドは必ずオーバーライドする必要がある。<br>
このメソッドは、QML側でアクセスするプロパティ名を定義するものである。<br>
<br>
  <syntaxhighlight lang="c++">
  <syntaxhighlight lang="c++">
  // QAbstractListModelクラスのオーバーライドが必須のメソッド
  // QAbstractListModelクラスのオーバーライドが必須のメソッド
  // QML側で使用するロール名を定義する
  // QML側で使用するロール名を定義する
   
   
  QHash<int, QByteArray> roleNames() const override;  
  QHash<int, QByteArray> roleNames() const override
// 例: 上記の例のCustomData構造体の場合
QHash<int, QByteArray> roleNames() const override
QHash<int, QByteArray> CustomListModel::roleNames() const
{
    // ロール名とロールIDのマッピングを定義
    // これにより、QML側でロール名を使用してデータにアクセス可能となる
    QHash<int, QByteArray> roles;
    roles[NameRole]  = "name";
    roles[ValueRole] = "value";
    roles[TagsRole]  = "tags";
    return roles;
}
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
==== データ操作メソッド ====
==== データ操作メソッド ====
===== appendItemメソッド =====
===== appendItemメソッド =====
116行目: 208行目:
  // 例: 上記の例のCustomData構造体の場合
  // 例: 上記の例のCustomData構造体の場合
  Q_INVOKABLE void appendItem(const QString &name, int value, const QStringList &tags);
  Q_INVOKABLE void appendItem(const QString &name, int value, const QStringList &tags);
void CustomListModel::appendItem(const QString &name, int value, const QStringList &tags)
{
    // データ追加開始を通知
    beginInsertRows(QModelIndex(), m_items.size(), m_items.size());
    // 新しいアイテムを追加
    CustomData item{name, value, tags};
    m_items.append(item);
    // データ追加完了を通知
    endInsertRows();
}
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
125行目: 230行目:
   
   
  Q_INVOKABLE void removeItem(int index);
  Q_INVOKABLE void removeItem(int index);
// 例: 上記の例のCustomData構造体の場合
void CustomListModel::removeItem(int index)
{
    // インデックスの有効性確認
    if (index < 0 || index >= m_items.size()) return;
    // データ削除開始を通知
    beginRemoveRows(QModelIndex(), index, index);
    // アイテムを削除
    m_items.removeAt(index);
    // データ削除完了を通知
    endRemoveRows();
}
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
134行目: 255行目:
   
   
  Q_INVOKABLE void clearItems();
  Q_INVOKABLE void clearItems();
// 例: 上記の例のCustomData構造体の場合
void CustomListModel::clearItems()
{
    // データが存在しない場合
    if (m_items.isEmpty()) return;
    // データ削除開始を通知
    beginRemoveRows(QModelIndex(), 0, m_items.size() - 1);
    // 全てのアイテムを削除
    m_items.clear();
    // データ削除完了を通知
    endRemoveRows();
}
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
146行目: 283行目:
  // 例: 上記の例のCustomData構造体の場合
  // 例: 上記の例のCustomData構造体の場合
  Q_INVOKABLE void updateItem(int index, const QString &name, int value, const QStringList &tags);
  Q_INVOKABLE void updateItem(int index, const QString &name, int value, const QStringList &tags);
void CustomListModel::updateItem(int index, const QString &name, int value, const QStringList &tags)
{
    // インデックスの有効性確認
    if (index < 0 || index >= m_items.size()) return;
    // アイテムを更新
    CustomData &item = m_items[index];
    item.name = name;
    item.value = value;
    item.tags = tags;
    // データ更新を通知
    // このシグナルにより、QMLのビューが自動的に更新される
    emit dataChanged(createIndex(index, 0), createIndex(index, 0));
}
</syntaxhighlight>
<br><br>
== ListViewとの連携 ==
==== エントリポイント ====
<syntaxhighlight lang="c++">
#include "CustomListModel.h"  // カスタムリストモデルクラスの定義
// ...略
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    // カスタムリストモデルクラスのインスタンスを生成
    CustomListModel *model = new CustomListModel();
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("customModel", model);  // カスタムリストモデルクラスの登録
    engine.load(QUrl(QStringLiteral("qrc:/Main.qml")));
    return app.exec();
}
  </syntaxhighlight>
<br>
==== カスタムリストモデルの呼び出し ====
<syntaxhighlight lang="qml">
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
Window {
    id:      root
    visible: true
    width:  800
    height:  600
    title:  "Custom List Example"
    color:  "#ffffff"
    // カスタムリストモデルを使用するメインコンポーネント
    ColumnLayout {
      anchors.fill: parent
      ListView {
          Layout.fillWidth: true
          Layout.fillHeight: true
          model: customModel  // C++側で登録したカスタムリストモデルのインスタンス
          clip: true
          // 各アイテムの表示定義
          delegate: Rectangle {
            width: ListView.view.width
            height: 60
            radius: 5
            color: "#f0f0f0"
            RowLayout {
                anchors.fill: parent
                spacing: 10
                // NameとValueの表示
                Column {
                  Layout.fillWidth: true
                  spacing: 5
                  Text {
                      text: name
                  }
                  Text {
                      text: "Value: " + value
                  }
                }
                // Tagの表示 (カンマ区切り)
                Rectangle {
                  width:  Math.min(tagText.implicitWidth + 20, 150)
                  height:  24
                  radius:  12
                  visible: tags.length > 0
                  Text {
                      id:              tagText
                      text:            tags.join(", ")
                      width:            parent.width - 20
                      elide:            Text.ElideRight  // テキストが指定された幅を超えた場合は省略記号 (...) を表示
                      maximumLineCount: 1
                      anchors.centerIn: parent
                  }
                }
                // 削除ボタン
                Button {
                  text: "x"
                  onClicked: customModel.removeItem(index)
                }
            }
          }
      }
      // 新規アイテムの追加フォーム
      RowLayout {
          Layout.fillWidth: true
          TextField {
            id:              nameInput
            Layout.fillWidth: true
            placeholderText:  "Name"
          }
          TextField {
            id:                    valueInput
            Layout.preferredWidth: 80
            placeholderText:      "Value"
            validator:            IntValidator {}
          }
          TextField {
            id:              tagsInput
            Layout.fillWidth: true
            placeholderText:  "tags (カンマ区切り)"
          }
          Button {
            text: "Add"
            onClicked: {
                if (nameInput.text && valueInput.text) {
                  customModel.appendItem(
                      nameInput.text,
                      parseInt(valueInput.text),
                      tagsInput.text.split(",").map(tag => tag.trim())
                  )
                  nameInput.text  = ""
                  valueInput.text = ""
                  tagsInput.text  = ""
                }
            }
          }
      }
    }
}
</syntaxhighlight>
<br>
==== カスタムリストモデルクラスの定義 ====
<syntaxhighlight lang="c++">
// CustomListModel.h
#include <QAbstractListModel>
#include <QVector>
// カスタムデータ構造の定義
struct CustomData {
    QString    name;
    int        value;
    QStringList tags;  // 配列データ
};
class CustomListModel : public QAbstractListModel
{
    Q_OBJECT
private:
    // モデルのデータを保持するコンテナ
    QVector<CustomData> m_items;
public:
    // モデルで使用するロールの定義
    // QML側からアクセスする時に使用する識別子
    enum CustomRoles {
        NameRole = Qt::UserRole + 1,
        ValueRole,
        TagsRole
    };
    explicit CustomListModel(QObject *parent = nullptr) : QAbstractListModel(parent)
    {}
    // QAbstractListModelの必須オーバーライド関数
    // データの行数を取得する
    int rowCount(const QModelIndex &parent = QModelIndex()) const override
    {
      // 親インデックスが有効な場合は0を返す
      // リストモデルでは子アイテムを持たないため
      if (parent.isValid()) return 0;
      return m_items.size();
    }
    // 指定されたインデックスとロールに対応するデータを取得する
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override
    {
      // インデックスの有効性確認
      if (!index.isValid() || index.row() >= m_items.size()) return QVariant();
      // 指定された行のデータを取得
      const CustomData &item = m_items[index.row()];
      // ロールに応じて適切なデータを返す
      switch (role) {
          case NameRole:  return item.name;
          case ValueRole: return item.value;
          case TagsRole:  return QVariant::fromValue(item.tags);
          default:        return QVariant();
      }
    }
    // ロール名をQML側に公開する
    QHash<int, QByteArray> roleNames() const override
    {
      // ロール名とロールIDのマッピングを定義
      // これにより、QML側でロール名を使用してデータにアクセス可能となる
      QHash<int, QByteArray> roles;
      roles[NameRole] = "name";
      roles[ValueRole] = "value";
      roles[TagsRole] = "tags";
      return roles;
    }
    // データ操作用メソッド
    // QML側から呼び出し可能なメソッド
    Q_INVOKABLE void appendItem(const QString &name, int value, const QStringList &tags)
    {
      // データ追加開始を通知
      beginInsertRows(QModelIndex(), m_items.size(), m_items.size());
      // 新しいアイテムを追加
      CustomData item{name, value, tags};
      m_items.append(item);
      // データ追加完了を通知
      endInsertRows();
    }
    Q_INVOKABLE void removeItem(int index)
    {
      // インデックスの有効性確認
      if (index < 0 || index >= m_items.size()) return;
      // データ削除開始を通知
      beginRemoveRows(QModelIndex(), index, index);
      // アイテムを削除
      m_items.removeAt(index);
      // データ削除完了を通知
      endRemoveRows();
    }
    Q_INVOKABLE void clearItems()
    {
      // データが存在しない場合
      if (m_items.isEmpty()) return;
      // データ削除開始を通知
      beginRemoveRows(QModelIndex(), 0, m_items.size() - 1);
      // 全てのアイテムを削除
      m_items.clear();
      // データ削除完了を通知
      endRemoveRows();
    }
    Q_INVOKABLE void updateItem(int index, const QString &name, int value, const QStringList &tags)
    {
      // インデックスの有効性確認
      if (index < 0 || index >= m_items.size()) return;
      // アイテムを更新
      CustomData &item = m_items[index];
      item.name  = name;
      item.value = value;
      item.tags  = tags;
      // データ更新を通知
      // この通知により、QMLビューが自動的に更新される
      emit dataChanged(createIndex(index, 0), createIndex(index, 0));
    }
};
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br><br>
<br><br>


「https://mochiu.net/index.php/QMLのコントロール_-_ListModelのカスタム」から取得