UGUI交互组件ScrollView

一.ScrollView的结构

对象 说明
Scroll View 挂有Scroll Rect组件的主体对象
Viewport 滚动显示区域,有Image和mask组件
Content 显示内容的父节点,只有个Rect Transform组件
Scrollbar Horizontal 水平滚动条
Scrollbar Vertical 垂直滚动条

二.Scroll Rect组件的属性

属性: 功能:
Content 这是对需要滚动的 UI 元素(例如大型图像)的矩形变换的引用。
Horizontal 启用水平滚动
Vertical 启用垂直滚动
Movement Type Unrestricted、Elastic 或 Clamped。使用 Elastic 或 Clamped 可强制内容保持在滚动矩形的边界内。Elastic 模式在内容到达滚动矩形边缘时弹回内容
Elasticity 这是弹性模式中使用的反弹量。
Inertia 如果设置 Inertia,则拖动指针再松开时内容将继续移动。如果未设置 Inertia,则只有进行拖动时内容才移动。
Deceleration Rate 设置 Inertia 的情况下,减速率 (Deceleration Rate) 决定了内容停止移动的速度。速率为 0 将立即停止移动。值为 1 表示移动永不减速。
Scroll Sensitivity 对滚轮和触控板滚动事件的敏感性。
Viewport 对作为内容矩形变换父项的视口矩形变换的引用。
Horizontal Scrollbar 对水平滚动条元素的引用(可选)。
Visibility 滚动条是否应在不需要时自动隐藏以及(可选)是否还展开视口。
Spacing 滚动条与视口之间的空间。
Vertical Scrollbar 对垂直滚动条元素的引用(可选)。
Visibility 滚动条是否应在不需要时自动隐藏以及(可选)是否还展开视口。
Spacing 滚动条与视口之间的空间。

注意事项:

  • 视口Viewport具有Mask组件。视口可以是根游戏对象,也可以是作为根的子项的单独游戏对象。如果使用自动隐藏的滚动条,则视口必须是子项。需要在滚动矩形的 Viewport 属性中引用视口矩形变换。
  • 所有滚动内容必须是作为视口子项的单个内容游戏对象的子项。需要在滚动矩形的 Content 属性中引用内容矩形变换。
  • 滚动条(如果使用)是根游戏对象的子项。请参阅滚动条页面了解有关滚动条设置的更多详细信息,并参阅下面的滚动条设置部分了解有关滚动视图的滚动条设置的信息。

广泛应用的Scroll View情形:垂直,回弹,无滚动条,如下图所示,看下要改哪些设置

2.1 Horizontal关闭

2.2 删除Scrollbar Horizontal和Scrollbar Vertical

2.3 将ViewPort和Content的宽度设为和父节点一样

2.4 Content下挂上一个子节点,将位置摆在最上面

三.动态添加子节点

实际项目中Scroll View上有几个显示内容节点大部分情况是取决于后端数据,因此需要通过代码动态创建,内容创建完成后要注意的是需要设置Content的高度,不然当所有显示内容高于Content时,滚动显示不完整,实例代码如下

cs 复制代码
using TMPro;
public class CScrollView : MonoBehaviour
{
    void Start()
    {
        GameObject bgItem = GameObject.Find("ScrollView/Viewport/Content/bgItem");
        GameObject contentSV = GameObject.Find("ScrollView/Viewport/Content");

        int itemNum = 9;
        int itemHeight = 100;
        int itemOffset = 110;
        int allItemHeight = (itemNum - 1) * itemOffset + itemHeight;
        int svHeight = 500;
        for(int i = 0; i < itemNum; i++)
        {
            GameObject oneBgItem = Instantiate(bgItem);
            oneBgItem.transform.SetParent(contentSV.transform,true);
            float posY = -50 - i * itemOffset;
            oneBgItem.transform.localPosition = new Vector3(200, posY, 0);
            //设置文本
            GameObject itemText = oneBgItem.transform.GetChild(0).gameObject;
            itemText.GetComponent<TMP_Text>().SetText((i+1).ToString());
        }
        bgItem.SetActive(false);
        //设置content高度
        if(svHeight < allItemHeight)
        {
            RectTransform rectTransform = contentSV.GetComponent<RectTransform>();
            rectTransform.sizeDelta = new Vector2( 400, allItemHeight);
        }
    }
}

运行后可以看到模拟出了游戏中需要的效果

四.事件监听和滚动到指定位置

cs 复制代码
        //滚动监听
        ScrollRect scrollRect = GameObject.Find("ScrollView").GetComponent<ScrollRect>();
        scrollRect.onValueChanged.AddListener(delegate (Vector2 ve2)
        {
             Debug.Log("滚动ing y = "+ ve2.y);
        });
        //滚动到指定位置
        scrollRect.normalizedPosition = new Vector2(0, 0.5f);;
相关推荐
向宇it11 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
Heaphaestus,RC12 小时前
【Unity3D】获取 GameObject 的完整层级结构
unity·c#
芋芋qwq12 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
tealcwu13 小时前
【Unity服务】关于Unity LevelPlay的基本情况
unity·游戏引擎
大眼睛姑娘16 小时前
Unity3d场景童话梦幻卡通Q版城镇建筑植物山石3D模型游戏美术素材
unity·游戏美术
鹿野素材屋20 小时前
Unity Dots下的动画合批工具:GPU ECS Animation Baker
unity·游戏引擎
小春熙子1 天前
Unity图形学之着色器之间传递参数
unity·游戏引擎·技术美术·着色器
Java Fans1 天前
在Unity中实现电梯升降功能的完整指南
unity·游戏引擎
GrimRaider2 天前
[Unity]TileMap开发,TileMap地图缝隙问题
unity·游戏引擎·tilemap
无敌最俊朗@2 天前
unity3d——基础篇小项目(开始界面)
unity·游戏引擎