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（這裡很重要，會觸發後續的更新接口事件）：