「QMLのコントロール - ListView」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=QMLのコントロール - ListViewです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集

ビジュアルウィキテキスト

@@ 25行目: / 25行目: @@
 <br><br>
-== 基本的な使い方 ==
+== ListViewの基本 ==
 * ListViewの宣言
 *: QMLファイル内でListViewコンポーネントを宣言する。
@@ 49行目: / 49行目: @@
 * ヘッダ / フッタの追加
 *: <code>header</code>プロパティと<code>footer</code>プロパティを使用して、リストの先頭と末尾に追加のコンテンツを表示する。
+<br><br>
+== モデル ==
+==== JavaScriptの配列の使用 ====
+以下の例では、ListViewのmodelプロパティにJavaScriptの配列 (データモデル) を指定している。<br>
+実務では、ListModelコンポーネントを使用して、より複雑なモデルを使用する。<br>
+<br>
+delegateプロパティで各アイテムの表示方法を定義している。<br>
+デリゲートにイベントハンドラを追加することにより、アイテムが選択された場合の動作を定義している。<br>
+<br>
+modelDataは、現在のアイテムのデータを参照するための特別な変数である。<br>
+JavaScriptの配列をモデルとして使用する場合に使用することができる。<br>
+<br>
+ <syntaxhighlight lang="qml">
+ import QtQuick
+ import QtQuick.Controls
+ Window {
+    width:   300
+    height:  400
+    title:   "サンプルリスト"
+    visible: true
+    ListView {
+       anchors.fill: parent
+       // モデルプロパティにJavaScript配列を直接指定
+       // これにより、ListViewは配列内の各要素をリストアイテムとして表示
+       model: ["りんご", "バナナ", "オレンジ", "ぶどう", "メロン"]
+       // デリゲートプロパティで各アイテムの表示方法を定義
+       delegate: ItemDelegate {
+          width: parent.width
+          text: modelData // modelDataは現在のアイテムのデータを参照します
+          // クリックイベントの処理
+          onClicked: {
+             console.log("選択された果物: " + modelData)
+          }
+       }
+    }
+ }
+ </syntaxhighlight>
+<br>
+==== ListModelコンポーネントの使用 ====
+以下の例では、ListViewのmodelプロパティにListModelコンポーネント (データモデル) を指定している。<br>
+<br>
+* ListModelコンポーネント
+*: 複数の属性 (例: name, color, stock) を持つアイテムのリストを生成する。
+* ListViewコンポーネント
+*: modelプロパティにListModelコンポーネントを指定する。
+* ListViewコンポーネントのdelegateプロパティ
+*: 各アイテムの表示方法をより詳細に定義する。
+*: <br>
+*: デリゲートに複雑なコンポーネントを定義して表示する。
+*: デリゲート内の各コンポーネントにおいて、ListElementで定義した各プロパティ (例: name, color, stock) にアクセスする。
+<br>
+<u>※注意</u><br>
+<u>ListModelコンポーネントを使用することにより、複数の属性を持つ構造化されたデータを扱うことができる。</u><br>
+<u>また、モデルを動的に更新する、あるいは、C++側から操作することも可能である。</u><br>
+<br>
+<u>ListModelコンポーネントは小規模なデータセットには適しているが、大規模なデータを扱う場合はC++で定義したカスタムモデルを使用することが推奨される。</u><br>
+<br>
+ <syntaxhighlight lang="qml">
+ import QtQuick
+ import QtQuick.Controls
+ import QtQuick.Layouts
+ Window {
+    width: 300
+    height: 400
+    title: "サンプルリスト"
+    visible: true
+    // ListModelを定義して、複数の属性を持つアイテムのリストを定義
+    ListModel {
+       id: fruitModel
+       ListElement { name: "りんご"; color: "赤"; stock: 50 }
+       ListElement { name: "バナナ"; color: "黄"; stock: 30 }
+       ListElement { name: "オレンジ"; color: "橙"; stock: 40 }
+       ListElement { name: "ぶどう"; color: "紫"; stock: 25 }
+       ListElement { name: "メロン"; color: "緑"; stock: 15 }
+    }
+    ListView {
+       anchors.fill: parent
+       // 上記で定義したListModelをモデルとして使用
+       model: fruitModel
+       // 各アイテムの表示方法を定義
+       delegate: ItemDelegate {
+          width: parent.width
+          height: 60
+          RowLayout {
+             anchors.fill: parent
+             anchors.margins: 10
+             // 果物の名前を表示
+             Text {
+                text: name // ListElementで定義した'name'プロパティにアクセス
+                font.bold: true
+             }
+             // 果物の色を表示
+             Text {
+                text: "色: " + color // 'color'プロパティにアクセス
+             }
+             // 在庫数を表示
+             Text {
+                text: "在庫: " + stock // 'stock'プロパティにアクセス
+                Layout.alignment: Qt.AlignRight // 右寄せに配置
+             }
+          }
+          // クリックイベントの処理
+          onClicked: {
+             console.log("選択された果物: " + name + ", 在庫: " + stock)
+          }
+       }
+    }
+ }
+ </syntaxhighlight>
 <br><br>