🏮

【UE5/Widget】ページ送りのサンプル

2023/03/18に公開

Unreal Engine

商品一覧をページ送りで実装する例です。
下の方にいけば処理内容をコピペできます。

商品データの作成

Widgetに表示する商品データを作ります。
その際に、構造体とDataTableを使います。

1.DataTabale用の構造体を作成

構造体名：S_Item

DataTable作成には構造体が必要です。
まずは構造体を作ります。商品データ用の構造体です。
サンプルなので、テキトーな構造体です。
必要に応じて、値段や説明文、画像など追加するのもありかもしれません。

2.DataTabaleを作成

先ほど作った構造体：「S_Item」を使ってDataTabaleを作成します。

DataTabale名：DT_Item

10個単位でページ送りしたいので、こんな感じの中身にしました。

1ページごとに商品データをグループ分けする

構造体を作成

構造体名：S_NameArray

中身はName型の配列です。この配列には、1ページ分の商品データを格納します。
そして、この構造体を配列として使用することで、以下のような感じにしていこうと思います。

1ページ目(S_NameArray[0:トマト×10])
2ページ目(S_NameArray[1:お肉×10])
3ページ目(S_NameArray[2:にんじん×10])
4ページ目(S_NameArray[3:どらやき×2])

WidgetBPの作成

Widget名：W_Paging
ページ送りするためのボタンと商品名を表示するためのテキストを用意しました。

1.BP側でいじれるように変数を表示

VerticalBox_ItemListを変数として表示させる

Widgetが変数として表示されているのを確認

これでBPから「VerticalBox_ItemList」を触れるようになりました。
これをする理由としては、「VerticalBox_ItemList」経由でテキスト一覧を取得するためです。

2.ボタンの設定：クリックイベントを用意

次ページへ、前ページへとページ更新させるために、クリックイベントを用意します。

3.変数を用意

新たに変数を用意します。

変数の説明

変数名：ItemList/型：Widget

「ItemList」は「VerticalBox_ItemList」内にあるテキスト一覧を格納するためのものです。

変数名：PageItems/型：S_NameArray

ここで作った構造体の配列です。
1ページごとの商品データを格納しています。

変数名：RowNames/型：Name

「変数：PageItems」に値を格納するための一時的な変数です。
1ページ分の商品データだけを扱います。

変数名：PageIndex/型：Integer

現在が何ページ目かを把握するために、必要な変数です。
この変数を使うことで、ページごとの商品一覧を取得することが可能です。

4.あとは処理を書くだけ！

こちらをFullScreenで見ていただくと処理の流れを把握しやすいかと思います。
コピペして、ご自身の環境で動かしてみるのも良いかもしれません。
処理についてはコメントで補足していますので、そちらも見ていただけたらと思います。