列出视图(ListView)用于以列表的形式展示多个同类控件,并能根据ListView大小和每个条目控件的大小动态的只生成当前可视的条目控件。ListView是典型的模型-视图(Model-View)架构,通过控制数据来动态的生成视图(条目控件),而非直接创建、修改视图(条目控件)。
下面以展示一个学生列表来演示ListView的基本使用方法。
数据
可以使用任意蓝图类(Object
)来作为数据源,结构体不可以作为数据源。
我们创建一个继承于Object
的蓝图类BP_Student
,增加两个变量Name
和Age
,并且它们的属性里勾选“可编辑实例”和“生成时公开”以方便使用。

条目控件
ListView由任意个实现UserListEntry
或UserObjectListEntry
接口的同类条目控件组成。
我们创建一个用户控件WBP_StudentItem
,增加两个文本框用来显示Name和Age,如图:

修改类设置,增加UserObjectListEntry
接口(UserListEntry
接口的功能较少)。


接下来实现刚刚增加的“列表项目对象集上(OnListItemObejectSet)”事件,该事件会在这个条目控件(WBP_StudentItem
)被创建后自动调用,并把关联的数据(BP_Student
)传给我们以便给控件赋值。

创建ListView
例如在控件蓝图里创建一个ListView
并命名为ListView_Students
,将属性中的“条目控件类”设置为WBP_StudentItem
,这时视图中就会出现5个条目的效果预览。

我们增加两条模拟数据看下最终效果。先用“从类构建对象”(Construct Ojbect from Class)创建BP_Student
数据,然后调用ListView_Students
的“添加项目”(Add Item)接口将数据与ListView绑定。


修改数据
再次强调,ListView是通过控制数据来影响效果。在修改数据后,需要调用ListView的“重新生成所有条目”(RegenerateAllEntries
)接口来刷新界面。
