以下中 用于显示在显示器上的UI控件蓝图类名为Test。

一、列表使用方法比较复杂,适合显示数以千条的列表。(如果使用水平盒显示数据太多会造成卡顿甚至系统崩溃)

UE4-(UI)第六十九课ListView

二、使用列表步骤

1.创建Entry类,实现IUserObjectListEntry

2.创建Item类

3.初始化Item实例,填充ListView

4.关联Item和Entry(哪个UI显示哪条数据)

三、实例:

1.创建新的控件蓝图,命名为EntryWidget,创建水平盒并放入图片及text控件

UE4-(UI)第六十九课ListView

在用于显示在显示器上的UI蓝图类Test中的设计师面板,选中ListView控件,在细节面板设置Entry Widget Class选择EntryWidget

UE4-(UI)第六十九课ListView

注意:1.此时在设计师面板中呈现的UI只是预览效果,运行后,显示器是无法显示UI的。

注意:2.在EntryWidget创建的UI显示模板(水平盒)的位置会影响最终显示的效果。要注意摆放位置。

如:EntryWidget控件放在左上角

UE4-(UI)第六十九课ListView

最终UI显示在视口中的效果

UE4-(UI)第六十九课ListView

EntryWidget控件放在中间

UE4-(UI)第六十九课ListView

最终UI显示在视口中的效果

UE4-(UI)第六十九课ListView

2.实现IUserObjectListEntry接口,在EntryWidget控件蓝图中,打开图标,选择类设置

UE4-(UI)第六十九课ListView

细节面板的接口处,应用的接口,选择添加搜索UserObjectListEntry

UE4-(UI)第六十九课ListView

完成后会在我的蓝图接口面板出现一个接口函数

UE4-(UI)第六十九课ListView

3.创建Item类,示例中是传递图片及名字,该类是用来保存图片及名字信息。

创建基于Objcet的蓝图类命名为ItemData,添加变量Icon类型为Texture2D ,变量Name类型为Text。并暴露参数,并且可以在生成类时可以直接在面板显示这两个参数进行赋值。

UE4-(UI)第六十九课ListView

4.初始化Item实例,填充ListView,在用于显示到显示器的UI蓝图类Test中的图表界面中,通过Event Contrust节点编辑根据类构建对象创建ItemData类对象,并传入参数,然后通过列表的addItem方法将数据添加到列表中。

UE4-(UI)第六十九课ListView

UE4-(UI)第六十九课ListView

根据类创建对象节点,其中Outer(已构建对象的所有者)选择self即可,使用forloop节点,可以设置创建多少个对象。

蓝图:(可以逻辑控制生成不同的图片,此示例中图片仅为一张)

UE4-(UI)第六十九课ListView

注意:该蓝图逻辑只是创建了ItemData对象,并设置图片还有名称信息,并将这些信息填充到了列表中。

5.关联ItemData与Entry

在EntryWidget的图表界面,因为应用了UserObjectListEntry接口,所以可以使用OnListItemObjectSet事件节点(此条目所代表的项目对象建立时调用,意思为当此类的对象被创建时会调用该方法),传入的参数就是之前添加到列表中的数据信息。

蓝图如下:

UE4-(UI)第六十九课ListView

6.然后编辑显示Test ui蓝图控件逻辑,就会看到效果。可以拖动滑动条进行页面滚动

UE4-(UI)第六十九课ListView

注意:当滑动条滑动过快时,列表会自动创建EntryWidget类控件,将数据填充,如果滑动缓慢,会重复使用已消失看不到的EntryWidget将之前的数据替换为要显示的数据后显示。

相关文章: