UE5 UMG 蓝图 列出视图 循环列表

后台提供的数据列表,在蓝图中以列表形式进行循环展示

上效果图:
在这里插入图片描述

步骤走起:
1、在需要显示的主UI界面新建一个画布或者容器,拖一个列出视图到容器中。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2、新建一个控件蓝图UI用于承载循环的内容简称div,这个div里面只需要放一排的内容即可,设置每个文字内容的变量。
在这里插入图片描述

2.1、打开这个div的蓝图,选择【类设置】,在细节中找到栏目“接口”-“实现接口”,输入:【

userobjectlistectry

】 这个单词并选中,在左手边图表中的对象列表项中找到“列表项目对象集上” 【双击它】然后编译一下
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
然后在事件图表中写入:
在这里插入图片描述

绑定对应的变量,

3、创建一个蓝图类,选择object类型,在这个蓝图类中添加div中所需的所有变量并且将变量旁边的小眼睛开启,在右边细节中勾选公开
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4、在主容器中,选中画布面板下的列出视图,右边细节中找到“列表记录” 选择条目控件类,选择刚刚创建的控件蓝图div,
在这里插入图片描述
5、再设置条目间距:
在这里插入图片描述
【到这里设置部分就完成了,但是需要显示列表数据还不行,需要接下来在主UI中写入循环逻辑】
【主UI】
1、首先要添加必须先清除旧的列出项目
在这里插入图片描述
在这里插入图片描述z【注意】构建yichangshebei, 这里需要搜索构建对象,选择这个栏目
在这里插入图片描述
这里把内容传递给那个div列表。到此就可以运行成功了

在这里插入图片描述

### UE5中实现列表视图鼠标悬停时变色效果的方法 在 Unreal Engine 5 (UE5) 中,可以通过 UMG(User Widget Blueprint)系统来实现列表视图中的每一项在鼠标悬停时变色的效果。以下是具体实现方法: #### 创建带有悬停功能的列表项 1. **创建一个新的Widget蓝图用于单个列表项** 在内容浏览器中新建一个Widget蓝图,命名为 `ListItem` 或类似的名称。这个Widget将代表列表中的每一个项目。 2. **设计列表项外观** 在该Widget的设计视图中,添加一个容器组件(如 `Border`),并将所有需要展示的内容放置在这个 `Border` 容器内部。这样可以方便地控制整个项目的背景颜色和其他视觉属性[^3]。 3. **设置鼠标悬停状态** - 展开 `Border` 组件的属性面板,找到 `Brush Color` 设置区域。 - 修改 `Hovered` 状态下的 `Brush Color` 值,定义鼠标悬停时的颜色变化。例如,可以选择一种高亮颜色作为悬停态的颜色[^3]。 #### 动态绑定数据到列表项 为了使列表能够动态加载多项数据,通常还需要结合 `ListView` 或者 `TileView` 这样的高级控件来进行管理。 1. **创建包含 ListView 的父级 Widget** 新建另一个Widget蓝图作为主界面的一部分,其中加入一个 `ListView` 控件,并将其 Item Template 设定为你之前制作好的 `ListItem` 蓝图实例[^3]。 2. **填充数据源** 在主Widget蓝图的逻辑部分初始化一组数据对象数组,这些对象应当具备与 `ListItem` 对应字段匹配的信息结构。随后调用 `SetListItems()` 方法把准备好的数据传递给 `ListView` 控件[^3]。 ```cpp // 示例代码片段:C++ 方式向 ListView 添加条目 TArray<TObjectPtr<UObject>> Items; for(int i=0;i<NumberOfItems;i++) { UObject* NewItem = NewObject<MyDataClass>(); // 初始化每个新条目的具体内容... Items.Add(NewItem); } MyListView->SetListItems(Items); ``` 以上过程展示了如何基于UMG框架构建支持交互反馈的复杂UI元素组合体。通过精心规划各个层次间的协作关系,最终实现了预期行为模式即当用户的光标移动至特定区域内时触发相应样式的转变反应[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值