obsidian/笔记文件/2.笔记/UGUI整体解决方案-案例篇_第五章.md
2025-03-26 00:02:56 +08:00

3.9 KiB
Raw Permalink Blame History

回到总的滑动条管理逻辑类是挂载在最外层的滑动条Scroll View上其中OffsetY是子节点之间的偏移数值

!Pasted image 20240326172753.png

对应的具体逻辑除了子节点之间偏移OffsetY还有子节点的实体高度_itemHeight对应父物体_content而_items和_models分别是子节点对应的实体逻辑类和数据逻辑类队列容器

!Pasted image 20240326172835.png

这里的数据获取是从Resources的Icon图片目录初始化 LoopListItemModel 对象,加到对应的队列容器即可

!Pasted image 20240326173228.png

对应资源列表

!Pasted image 20240326173314.png

通过滑动条的高度除以单个子节点的高度加上偏移值得到最多可以容纳多少个Item子节点实体参考Mathf.CeilToInt

!Pasted image 20240326173417.png

初始化子节点是SpwanItem相关逻辑其中num是上述函数GetShowItemNum得到的该滑动条最大可实例化出子节点总数 基于总数遍历,实例化游戏实体; 子节点实体添加LoopListItem组件再把GetData作为AddGetDataListener的传参赋值给对应的Func委托 调用加LoopListItem的初始化函数完成实体初始化再加到队列容器即可

!Pasted image 20240326173612.png

对应的赋值接口

!Pasted image 20240326173856.png

其中GetData函数接口对应的具体逻辑是先判断是否在数据总合集中如果不在就实例化新的LoopListItemModel 如果在,就根据索引,完成数据调用即可

!Pasted image 20240326174014.png

这里的返回,是可以,配合之前提及过的合法性校验

!Pasted image 20240326174134.png

设置子节点父物体_content的sizeDelta尺寸

!Pasted image 20240327100631.png

对应的获取、赋值位置

!Pasted image 20240327100732.png

回到滑动条管理类的游戏初始函数Start都会调用前面提及解析的各个函数获取到总的装备数据容器合集对父物体_content、子节点高度itemHeight各个组件进行赋值 其中itemPrefab是单个子节点的组件通过资源加载接口Resources.Load函数加载对应的预制体 实例化子节点是调用上述提及的SpwanItem函数完成实例化多个子节点即可 然后就是调用SetContentSize设置父节点content尺寸 添加UGUI滑动条滚动的事件监听绑定ValueChange函数 这个函数是遍历子物体的LoopListItem组件随着滑动条滚动调用OnValueChange函数即可

!Pasted image 20240327100928.png

!Pasted image 20240327101411.png

子节点对应滑动条滚动触发的OnValueChange函数主要是随着滑动条快速滚动更新当前对应滑动条的开始id和结束id参考out和ref之间的区别

!Pasted image 20240327101815.png

更新id范围的函数开始id是通过Mathf.FloorToInt函数,配合父物体的锚点坐标,和节点高度+偏移,相除得到; 而结束id就是开始id加上实例化出来的子节点总数-1完成赋值

!Pasted image 20240327102725.png

随着滑动条滑动当前id会小于开始id或者超过结束id分别是对应向上滑动和向下滑动 针对不同的情况计算不同的偏移offset再调用之前提及解析的ChangeId函数修改当前id即可 进而实现无限滚动列表的表现效果实际上是通过id的改变触发不同的图片、装备数据修改即可

!Pasted image 20240327102956.png

id默认是私有变量为了测试先临时改成公有变量

!Pasted image 20240327103319.png

!Pasted image 20240327103332.png

运行游戏随着滑动条的滚动子节点对应的id也会跟随改变进而控制不同的图片和装备信息修改

!Pasted image 20240327103459.png

!Pasted image 20240327103440.png