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);;
相关推荐
向宇it27 分钟前
【从零开始入门unity游戏开发之——unity篇02】unity6基础入门——软件下载安装、Unity Hub配置、安装unity编辑器、许可证管理
开发语言·unity·c#·编辑器·游戏引擎
向宇it5 小时前
【从零开始入门unity游戏开发之——unity篇01】unity6基础入门开篇——游戏引擎是什么、主流的游戏引擎、为什么选择Unity
开发语言·unity·c#·游戏引擎
向宇it10 小时前
【从零开始入门unity游戏开发之——C#篇26】C#面向对象动态多态——接口(Interface)、接口里氏替换原则、密封方法(`sealed` )
java·开发语言·unity·c#·游戏引擎·里氏替换原则
神码编程16 小时前
【Unity功能集】TextureShop纹理工坊(五)选区
unity·游戏引擎·shader·ps选区
m0_748251721 天前
Android webview 打开本地H5项目(Cocos游戏以及Unity游戏)
android·游戏·unity
benben0441 天前
Unity3D仿星露谷物语开发7之事件创建动画
unity·游戏引擎
林枫依依1 天前
Unity2021.3.16f1可以正常打开,但是Unity2017.3.0f3却常常打开闪退或者Unity2017编辑器运行起来就闪退掉
unity
异次元的归来2 天前
Unity DOTS中的share component
unity·游戏引擎
向宇it2 天前
【从零开始入门unity游戏开发之——C#篇25】C#面向对象动态多态——virtual、override 和 base 关键字、抽象类和抽象方法
java·开发语言·unity·c#·游戏引擎
_oP_i2 天前
unity webgl部署到iis报错
unity