Unity Ugui 实现列表item居中放大效果

最新推荐文章于 2025-04-16 10:18:52 发布

lesjay0824

最新推荐文章于 2025-04-16 10:18:52 发布

阅读量2.5k

点赞数 2

文章标签： unity ui 游戏引擎

本文链接：https://blog.youkuaiyun.com/qq_37775368/article/details/125427100

版权

本文介绍了如何在Unity UGUI中创建一个列表，使得用户可以通过拖拽或点击图片，使图片居中并放大。通过使用Scroll View组件和Grid Layout Group，记录每个列表项到滚动视图中心点的距离，拖拽时动态判断并更新最接近中心的项，使用插值Lerp平滑移动和缩放。同时，通过Button组件监听点击事件，也能实现列表项的居中放大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过拖拽或者点击图片使图片居中放大

使用scroll view组件并为子节点conter添加 Grid layout Group 组件

实现逻辑

记录每个item到scroll中心点的距离的数据

在拖拽过程中通过当前conter的localpostion位置去判断离中心点距离最短的item

找到对应item 让conter的localpostion通过插值lerp 移动到对应的位置使其item居中并缩放

水平拖拽这里知晓localpostion关于x的信息即可

垂直拖拽即y。

 //初始化函数
    private void InitView()
    {
        //获取组件ScrollRect
        scrollRect = transform.GetComponent<ScrollRect>();
        //获取Scrollview下的conter
        content = scrollRect.content;
        //设置svcoll属性为无限制
        scrollRect.movementType = ScrollRect.MovementType.Unrestricted;
        //对应的GridLayoutGroup组件
        layoutGroup = content.GetComponent<GridLayoutG