首页 > 其他分享 >Unity UGUI的ScrollRect(滚动视图)组件的介绍及使用

Unity UGUI的ScrollRect(滚动视图)组件的介绍及使用

时间:2023-09-06 21:11:35浏览次数:56  
标签:content scrollRect 滚动 ScrollRect 视图 Content Unity

Unity UGUI的ScrollRect(滚动视图)组件的介绍及使用

1. 什么是ScrollRect组件?

ScrollRect(滚动视图)是Unity UGUI中的一个常用组件,用于在UI界面中创建可滚动的区域。通过ScrollRect组件,可以实现在有限的空间内显示大量的内容,并且可以通过滑动手势来浏览内容。

2. ScrollRect组件的工作原理

ScrollRect组件通过将内容放置在一个可滚动的矩形区域内,然后通过拖动或滑动手势来改变内容的显示位置。ScrollRect组件包含一个Viewport(视口)和一个Content(内容)两个子对象,Viewport用于限制Content的显示范围,而Content则包含了实际的内容。

3. ScrollRect组件的常用属性

  • Content:用于放置实际的内容的RectTransform对象。
  • Horizontal:是否允许水平方向的滚动。
  • Vertical:是否允许垂直方向的滚动。
  • Movement Type:滚动的类型,可选的类型有:Unrestricted(不受限制)、Elastic(弹性)、Clamped(限制)。
  • Inertia:是否启用惯性滚动。
  • Deceleration Rate:惯性滚动的减速率。
  • Scroll Sensitivity:滚动的灵敏度。

4. ScrollRect组件的常用函数

  • ScrollTo:滚动到指定位置。
  • StopMovement:停止滚动。
  • OnBeginDrag:开始拖拽时调用的函数。
  • OnDrag:拖拽过程中调用的函数。
  • OnEndDrag:结束拖拽时调用的函数。

5. 示例代码

示例1:基本的滚动视图

using UnityEngine;
using UnityEngine.UI;

public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;

    void Start()
    {
        // 设置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);

        // 设置滚动视图的滚动范围
        scrollRect.verticalNormalizedPosition = 1;
    }
}

操作步骤:

  1. 创建一个空的GameObject,并添加ScrollRect组件。
  2. 在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
  3. 将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
  4. 运行游戏,可以看到滚动视图中的内容可以通过滑动手势进行滚动。

示例2:限制滚动范围

using UnityEngine;
using UnityEngine.UI;

public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;

    void Start()
    {
        // 设置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);

        // 设置滚动视图的滚动范围
        scrollRect.verticalNormalizedPosition = 1;
        scrollRect.movementType = ScrollRect.MovementType.Clamped;
    }
}

操作步骤:

  1. 创建一个空的GameObject,并添加ScrollRect组件。
  2. 在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
  3. 将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
  4. 运行游戏,可以看到滚动视图中的内容在滚动到边界时会受到限制。

示例3:惯性滚动

using UnityEngine;
using UnityEngine.UI;

public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;

    void Start()
    {
        // 设置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);

        // 设置滚动视图的滚动范围
        scrollRect.verticalNormalizedPosition = 1;
        scrollRect.inertia = true;
        scrollRect.decelerationRate = 0.5f;
    }
}

操作步骤:

  1. 创建一个空的GameObject,并添加ScrollRect组件。
  2. 在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
  3. 将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
  4. 运行游戏,可以看到滚动视图中的内容在滑动结束后会有惯性滚动的效果。

示例4:滚动到指定位置

using UnityEngine;
using UnityEngine.UI;

public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;

    void Start()
    {
        // 设置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);

        // 设置滚动视图的滚动范围
        scrollRect.verticalNormalizedPosition = 1;

        // 滚动到指定位置
        scrollRect.ScrollTo(new Vector2(0, 500), 0.5f);
    }
}

操作步骤:

  1. 创建一个空的GameObject,并添加ScrollRect组件。
  2. 在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
  3. 将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
  4. 运行游戏,可以看到滚动视图会自动滚动到指定位置。

示例5:停止滚动

using UnityEngine;
using UnityEngine.UI;

public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;

    void Start()
    {
        // 设置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);

        // 设置滚动视图的滚动范围
        scrollRect.verticalNormalizedPosition = 1;

        // 停止滚动
        scrollRect.StopMovement();
    }
}

操作步骤:

  1. 创建一个空的GameObject,并添加ScrollRect组件。
  2. 在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
  3. 将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
  4. 运行游戏,可以看到滚动视图会停止滚动。

6. 注意事项

  • ScrollRect组件需要配合其他UI组件(如Mask)一起使用,以限制内容的显示范围。
  • 在使用ScrollRect组件时,需要注意Content的大小和滚动范围的设置,以确保内容能够正确地显示和滚动。

7. 参考资料

标签:content,scrollRect,滚动,ScrollRect,视图,Content,Unity
From: https://www.cnblogs.com/alianblank/p/17683385.html

相关文章

  • 【unity】使用QFramework开发微信小游戏的总结
    前言在使用Unity+QFramework开发微信小游戏的过程中遇到了一些问题,在此记录下来,方便查阅参考。主要问题主要问题是框架的资源加载方式和小游戏要求不一致。QFramework的UIKit和AudioKit依赖于ResKit,ResKit底层是从本地磁盘上读取AB包的。而[微信小游戏官方文档](minigame-u......
  • DRF----限流、序列化、视图、条件搜索
    1.4djangorestframework(中)drf内置了很多便捷的功能,在接下来的课程中会给大家依次讲解下面的内容:快速上手请求的封装版本管理认证权限限流序列化视图条件搜索分页路由解析器 6.限流限流,限制用户访问频率,例如:用户1分钟最多访问100次......
  • Unity 打包发布到 Web 踩坑
    重新打包发布后,网页内容没有更新。原因:浏览器有缓存机制,非首次访问网页时使用的可能是本地缓存数据。解决方案:手动清理下浏览器缓存参考文档:浏览器缓存机制   ......
  • 9个视图子类,视图类,视图集,ViewSetMixin, drf之路由
    1.9个视图子类fromrest_framework.genericsimportListAPIView,CreateAPIView,ListCreateAPIViewfromrest_framework.genericsimportRetrieveAPIView,DestroyAPIView,UpdateAPIViewfromrest_framework.genericsimportRetrieveUpdateDestroyAPIView,RetrieveDes......
  • 9个视图子类、视图集、drf之路由
    9个视图子类fromrest_framework.genericsimportListAPIView,CreateAPIView,ListCreateAPIViewfromrest_framework.genericsimportRetrieveAPIView,DestroyAPIView,UpdateAPIViewfromrest_framework.genericsimportRetrieveUpdateDestroyAPIView,RetrieveDestroy......
  • 9个视图子类
    视图类五层第一层:继承APIview,五个接口第二层:GenericAPIView,继承APIview(两个类属性+defgetpostgetputdelete)第三层:五个视图扩展类GenericAPIView+(RetrieveModelMixin,CreateModelMixin,DestroyModelMixin,ListModelMixin,UpdateModelMixin)(两个类属性+defgetpostget......
  • unity圆内随机一个点
    ///<summary>///根据半径随机出园内的点///</summary>///<paramname="vRadius"></param>///<returns></returns>publicstaticVector2GetRandomInCircle(floatvRadius){......
  • drf之请求,drf 之响应,drf之响应格式,两个视图基类,基于GenericAPIView,5个视图扩展类
    drf之请求1.1之请求Request类#data#query_params#用起来跟之前一样了解: request._request视图类的方法中:self是咱们写的视图类的对象,self.request是新的request,self.request是一个HttpRequest对象,它提供了许多属性和方法来访问和处理请求的信息.1.2......
  • drf-视图组件
    一、视图DjangoRESTframwork提供的视图的主要作用:控制序列化器的执行(检验、保存、转换数据)控制数据库查询的执行RESTframework提供了众多的通用视图基类与扩展类,以简化视图的编写。1. 两个视图基类1.1APIViewfromrest_framework.viewsimportAPIViewAPIView......
  • drf请求和响应、GenericAPIView封装、5个视图扩展类
    一、drf之请求1、drf之请求Request类视图类继承APIView后多了-0去除了csrf认证-1新的request-request.data-request.query_params-request.其他跟之前一样-request._request是老的-2三大认证-3全局异常2、控制前端请求的编码格式fromrest_fra......