UE5蓝图实战：VaRest插件应用指南 - 从JSON文件到无限列表

在本文中，我将演示如何在 UE5 中使用 VaRest 插件来读取 JSON 文件，并将数据显示在无限滚动的列表中。VaRest 是一个强大的开源插件，它使得在 UE5 中进行 HTTP 请求和 JSON 数据处理变得简单直观。

安装并启用 VaRest 插件#

首先需要在虚幻商城 搜索VaRest关键字，找到该插件点击 “免费按钮”，然后切换到库，在保管库下降 VaRest 安装到所需要的项目引擎中即可。

最后需要再引擎中开启该插件的使用，依次在菜单栏点击编辑 -- 插件 -- 搜索并勾选 VaRest-- 重启引擎。

创建 Json 文件和搭建无限列表#

使用 Json 在线编辑器模拟 Json 数据

在项目 Content 目录下新建 Data 文件夹，新建文本文件命名为 Info.json。将在线 Json 编辑器模拟的数据复制粘贴到 Info.json 中。

搭建无限列表 UI
我们需要做一个 UI 来显示 Json 数据。

首先做一个无限列表显示显示 Item：命名为 WBP_StudentPanel，添加一个 ListView 控件，在其列表记录栏下点击 + 号新建一个 EntryWidgetClass 蓝图类，用于显示单个学生信息的预制体 UI，命名为 WBP_StudentItem。如下图：

蓝图节点连连看#

定义数据结构#

这里还需要定义两个基本数据结构用于数据的解析和显示。新建一个结构体蓝图，命名为 S_StudentInfo，定义与之前 Json 数据匹配的四个变量：name、number、height、weight 用于解析 Json 数据后构造的数结构体；新建一个继承于 Object 类的蓝图类，命名为 O_StudentInfo。定义一个变量，类型为刚才定义的结构体：S_StudentInfo 用于将数结构体据显示的列表 UI 上。如下图两个基本蓝图类：

完善测试蓝图逻辑#

初始显示无限列表 UI#

在一个相机控制的蓝图类中，开始 BeginPlay 节点连接 Create Widget 节点，Class 引脚选择 WBP_StudentPanel，执行引脚连接到 Add to Viewport。如下图：

点击数字 0 键解析 Json 并显示到列表中#

这里将用到 VaRest 插件提供的 API，所以在此之前确保 VaRest 插件已启用。

解析 Json 的蓝图逻辑

首先使用 Load Json from File 函数解析相对于 Content 目录下的 json 文件，所以 Path 引脚处填入 Data/Info.json。然后在 Get Array Field 方法解析 data 节点下的数据，构造一个 Student Data 的 Json 数据，如下图：

然后 for 循环遍历这个 Json 数组，没每个元素单独解析，这里使用 Get String Field 方法对 name、number、height、weight 单独解析然后再构造 S_StudentInfo 添加到 StudentInfoList 数组中，最后定义一个事件分发器 ParseStudentInfoCompleted，在解析完成后调用将 StudentInfoList 传递出去。如下图：

绑定事件分发器 ParseStudentInfoCompleted

在 WBP_StudentPanel 中，从 Event Construct 牵出引线获取相机控制器的引用，绑定事件分发器，再用 Create Event 节点创建一个事件触发函数 ParseStudentInfoCompletedCallBack。

完善函数 ParseStudentInfoCompletedCallBack：

定义一个变量 StudentInfos，类型为 O_StudentInfo。对于传递过来的结构体数组进行遍历，单个元素构造 O_StudentInfo。使用 Add item 节点添加到 StudentListView（这里是一个无限列表 ListView 控件），完成之后设置 ListView 的 item，用到 SetListItems（这里很重要，会触发后续的更新接口事件）：