注册
|
登录
发帖
热搜
活动
交友
discuz
论坛
BBS
翼度工具
翼度网址导航
开发工具
Linux命令速查
网页设计配色表
在线制作icon
颜色代码选取器
翼度科技
»
论坛
›
编程开发
›
.net
›
查看内容
返回列表
发新帖
Unity UGUI的ScrollRect(滚动视图)组件的介绍及使用
拉度
拉度
当前离线
积分
9
3
主题
3
帖子
9
积分
新手上路
新手上路, 积分 9, 距离下一级还需 41 积分
新手上路, 积分 9, 距离下一级还需 41 积分
积分
9
发消息
显示全部楼层
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;
}
}
复制代码
操作步骤:
创建一个空的GameObject,并添加ScrollRect组件。
在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
运行游戏,可以看到滚动视图中的内容可以通过滑动手势进行滚动。
示例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;
}
}
复制代码
操作步骤:
创建一个空的GameObject,并添加ScrollRect组件。
在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
运行游戏,可以看到滚动视图中的内容在滚动到边界时会受到限制。
示例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;
}
}
复制代码
操作步骤:
创建一个空的GameObject,并添加ScrollRect组件。
在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
运行游戏,可以看到滚动视图中的内容在滑动结束后会有惯性滚动的效果。
示例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);
}
}
复制代码
操作步骤:
创建一个空的GameObject,并添加ScrollRect组件。
在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
运行游戏,可以看到滚动视图会自动滚动到指定位置。
示例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();
}
}
复制代码
操作步骤:
创建一个空的GameObject,并添加ScrollRect组件。
在Hierarchy面板中选中ScrollRect对象,将Content对象拖拽到ScrollRect的Content属性中。
将示例代码添加到ScrollRectExample脚本中,并将ScrollRect对象拖拽到scrollRect属性中。
运行游戏,可以看到滚动视图会停止滚动。
6. 注意事项
ScrollRect组件需要配合其他UI组件(如Mask)一起使用,以限制内容的显示范围。
在使用ScrollRect组件时,需要注意Content的大小和滚动范围的设置,以确保内容能够正确地显示和滚动。
7. 参考资料
Unity官方文档 - ScrollRect
本文作者:
Blank
本文链接:
版权声明:本博客所有文章除特别声明外,均采用
BY-NC-SA
许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角
【
推荐
】
一下。您的鼓励是博主的最大动力!
来源:
https://www.cnblogs.com/alianblank/archive/2023/09/06/17683385.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
上一篇:
基于ASP.NET ZERO,开发SaaS版供应链管理系统
下一篇:
[WPF]使用HLSL实现百叶窗动效
发表于 2023-9-6 21:25:02
举报
回复
使用道具
分享
返回列表
发新帖
本版积分规则
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
快速回复
快速回复
返回顶部
返回顶部
返回列表
返回列表