【UE5】UMG ViewModelプラグインを使ってListViewに文字列のリストを表示する

はじめに

UMG ViewModel(MVVM)プラグインで、単体テキストや体力バーの表示は紹介されていたのですが、リストビューへの反映の手順が見当たらなかったので調べました。

公式ドキュメント

導入

Edit > Plugins から UMG ViewModelを有効にする（要再起動）

やりたいこと

• ViewModelの仕組みを使って ListView に文字列のリストを表示する

構成

名前	種類	親クラス	内容
VM_TextEntry	ViewModel	MVVMViewModelBase	各行の表示テキストを保持
VM_TextList	ViewModel	MVVMViewModelBase	複数の EntryViewModel を保持
WBP_TextEntry	ウィジェット	UserWidget + UserObjectListEntry	テキスト1行の UI
WBP_MainView	ウィジェット	UserWidget	ListView を配置するメイン UI

手順

(1)各行のViewModelの作成（行ごとのテキストを表示）

1. Blueprint クラス作成：親 = MVVMViewModelBase
   
   　名前：VM_TextEntry
2. 変数を追加
   　名前：Text / 型：Text
   　Field Notify（ベルのアイコン）にチェックを入れる
   

(2)メインViewModelの作成（テキストのリスト）

1. Blueprint クラス作成：親 = MVVMViewModelBase
   　名前：VM_TextList
2. 変数を追加
   　名前：TextEntries / 型：VM_TextEntryの配列
   　Field Notify（ベルのアイコン）にチェックを入れる
   

(3)Entryウィジェットの作成と設定：WBP_TextEntry

A. 作成

1. Blueprint Class → UserWidget → 名前：WBP_TextEntry

B. インターフェース追加（ここ重要！）

1. クラス設定 → インターフェース → UserObjectListEntry を追加

C. UIデザイン

1. TextBlock を1つ追加（表示用）
   

D. MVVM Binding

1. Bindings → TextBlock.Text を ViewModel の Text にバインド
   
   

E. イベント実装（OnListItemObjectSet）

追加したインターフェースでViewModelを設定する

Event OnListItemObjectSet(InObject)
→ Cast to VM_TextEntry
→ Set ViewModel ノードで ViewModel を設定（MVVM用のViewModel変数へ）

このステップが「ListView の表示行ごとに ViewModel をバインド」する要になります。

(4)メインウィジェットの作成：WBP_MainView

1. Blueprint Class → UserWidget → 名前：WBP_MainView
2. UI に ListView を配置
   

A. MVVM Binding

• ViewModel を指定：VM_TextList
  

B. ListView 設定

• Entry Widget Class: WBP_TextEntry
• Entry ViewModel Class: VM_TextEntry
  
• Items → バインド → ViewModel の TextEntries
  
  
  

C. Creation Typeの設定

Creation Type を Create Instance に設定します。

表示するテキストデータを追加

今回は WBP_MainView の Event Construct で行いました。

1. "Apple", "Orange", "Lemmon", "Banana", "Strawberry"のText Arrayを作成
2. それぞれ Construct Object from Class に VM_TextEntry を指定してViewModel を作成して配列に保存
3. VM_TextList の TextEntries に設定（SET w/ Broadcast）する
   

リストビューを表示

今回は Level Blueprint に実装しました。

1. Level Blueprintを開く
2. Create Widget で WBP_MainView を作成
3. Add to Viewport で表示
   

実行

プレイするとリストビューにテキストが表示されました。

まとめ

使い勝手が良くなりそうなプラグインだと思って使い始めました。
リストビューを使った資料がなくて調べたのでまとめました。
参考になれば幸いです。

参考

https://qiita.com/HSKKOU/items/abc562a9decf7409322e
https://qiita.com/HSKKOU/items/e31e393cdac2309b4d1e
https://www.youtube.com/watch?v=1PNpRdVP_68&t=1737s&ab_channel=LifeEXE