Unity UGUI的Scrollbar(滚动条)组件的介绍及使用

一、什么是Scrollbar组件?

Scrollbar组件是Unity中UGUI系统提供的一种UI组件,主要用于在UI界面中提供滚动条功能,使用户可以通过滚动条来查看超出屏幕范围的内容。

二、Scrollbar组件是如何工作的?

Scrollbar组件的工作原理主要是通过改变滚动条的位置来改变关联的内容的显示位置。当用户拖动滚动条时,Scrollbar组件会根据滚动条的位置计算出一个值(范围在0到1之间),然后将这个值传递给关联的内容,由内容根据这个值来改变自己的显示位置。

三、Scrollbar组件的常用属性

Scrollbar组件的常用属性主要有以下几个:

  • Direction:滚动条的方向,可以是从左到右、从右到左、从下到上、从上到下。
  • Value:滚动条的当前值,范围在0到1之间。
  • Size:滚动条滑块的大小,范围在0到1之间,值越大,滑块越大。
  • NumberOfSteps:滚动条的步进值,如果设置为0,则滚动条可以平滑滚动;如果设置为大于0的值,则滚动条会按照步进值来滚动。

四、Scrollbar组件的常用函数

Scrollbar组件的常用函数主要有以下几个:

  • OnValueChanged:当滚动条的值改变时触发的事件。
  • Rebuild:重新构建滚动条。
  • LayoutComplete:当滚动条的布局完成时触发的事件。
  • GraphicUpdateComplete:当滚动条的图形更新完成时触发的事件。

五、Scrollbar组件的使用示例

下面将通过5个示例来介绍如何使用Scrollbar组件。

示例1:创建一个简单的Scrollbar

// 创建一个Scrollbar
Scrollbar scrollbar = new GameObject("Scrollbar").AddComponent<Scrollbar>();
// 设置滚动条的方向
scrollbar.direction = Scrollbar.Direction.LeftToRight;
// 设置滚动条的值
scrollbar.value = 0.5f;
// 设置滚动条滑块的大小
scrollbar.size = 0.1f;

示例2:监听Scrollbar的值改变事件

// 创建一个Scrollbar
Scrollbar scrollbar = new GameObject("Scrollbar").AddComponent<Scrollbar>();
// 添加值改变事件的监听
scrollbar.onValueChanged.AddListener((value) => {
Debug.Log("Scrollbar value changed: " + value);
});

示例3:设置Scrollbar的步进值

// 创建一个Scrollbar
Scrollbar scrollbar = new GameObject("Scrollbar").AddComponent<Scrollbar>();
// 设置滚动条的步进值
scrollbar.numberOfSteps = 10;

示例4:重新构建Scrollbar

// 创建一个Scrollbar
Scrollbar scrollbar = new GameObject("Scrollbar").AddComponent<Scrollbar>();
// 重新构建滚动条
scrollbar.Rebuild(CanvasUpdate.Prelayout);

示例5:监听Scrollbar的布局完成事件和图形更新完成事件

// 创建一个Scrollbar
Scrollbar scrollbar = new GameObject("Scrollbar").AddComponent<Scrollbar>();
// 添加布局完成事件的监听
scrollbar.onValueChanged.AddListener(() => {
Debug.Log("Scrollbar layout complete.");
});
// 添加图形更新完成事件的监听
scrollbar.onValueChanged.AddListener(() => {
Debug.Log("Scrollbar graphic update complete.");
});

六、注意事项

在使用Scrollbar组件时,需要注意以下几点:

  1. Scrollbar组件的值范围是0到1,不要设置超出这个范围的值。
  2. 如果要使Scrollbar可以平滑滚动,需要将步进值设置为0。
  3. 在监听Scrollbar的值改变事件时,需要注意不要在事件处理函数中再次修改Scrollbar的值,否则可能会导致无限循环。

七、参考资料

Unity UGUI的Scrollbar(滚动条)组件的介绍及使用的更多相关文章

  1. Unity UGUI Layout自动排版组件用法介绍

    Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  2. 使用 Vue 开发 scrollbar 滚动条组件

    Vue 应该说是很火的一款前端库了,和 React 一样的高热度,今天就来用它写一个轻量的滚动条组件: 知识储备:要开发滚动条组件,需要知道知识点是如何计算滚动条的大小和位置,还有一个问题是如何监听容 ...

  3. 关于 Unity UGUI 中修改 Mask 组件下 Image 等子节点组件的材质无效的问题

    前几天同事做了一个效果,希望在原本使用了遮罩组件 Mask 的技能图标(让技能图标变成圆形)上在添加一个置灰的功能,但问题来了:因为是动态根据游戏中玩家的条件才动态置灰,以修改 Mask 下子节点 I ...

  4. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  5. Unity UGUI

    超详细的基础教程传送门:(持续更新中) Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/detai ...

  6. 第2篇:用as3.0制作一个滚动条组件

    本实例演示了实现一个滚动条基本功能的制作方法,没有添加改变皮肤,修改滚动条视框大小等功能,有兴趣的朋友可根据自己要求自行添加.使用时只需要通过以下一行代码创建滚动条组件: var myScrollba ...

  7. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  8. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  9. Unity UGUI实现图文混排

    目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...

  10. Unity Jobsystem 详解实体组件系统ECS

    原文摘选自Unity Jobsystem 详解实体组件系统ECS 简介 随着ECS的加入,Unity基本上改变了软件开发方面的大部分方法.ECS的加入预示着OOP方法的结束.随着实体组件系统ECS的到 ...

随机推荐

  1. 警惕看不见的重试机制:为什么使用RPC必须考虑幂等性

    0 文章概述 在RPC场景中因为重试或者没有实现幂等机制而导致的重复数据问题,必须引起大家重视,有可能会造成例如一次购买创建多笔订单,一条通知信息被发送多次等问题,这是技术人员必须面对和解决的问题. ...

  2. js 之二 事件对象

    事件对象 /当事件的响应函数被触发时,浏览器每次都会讲一个事件对象作为实参传递响应函数; 在事件对象中封装了当前事件相关的一切信息,比如:鼠标的,键盘的操作 // 当鼠标在areaDiv中移动时,在s ...

  3. 从 Blast2GO 本地化聊一聊 Linux 下 MySQL 的源码安装

    Blast2GO 是一个基于序列相似性搜索的 GO 注释和功能分析工具,它可以直接统计分析基因功能信息,并可视化 GO 有向非循环图(DAG)上的相关功能特征,分析 BLAST.GO-mapping. ...

  4. 某表格常用api

    这是一个神奇的网站,可作为免费的数据存储平台,已白嫖多年 通过调用接口可以方便的实现增删改查.修改www前缀为vip,还能嫖vip服务器 我常常用来写入程序的日志记录,记录/更新一些关键key 不需要 ...

  5. Linux网络编程(学习笔记)

    文中python代码来自老师的教学代码,感谢我的老师~~ 1. linux网络数据处理过程: 网卡->协议栈->网络 1)应用层输出数据 socket层->协议层->接口层 2 ...

  6. java反射机制原理及应用

    java反射机制 反射机制原理示意图 ​ Class.forName(字节码文件) 类.class 对象.getClass() 用法: 根据配置的properties文件(不仅是properties) ...

  7. python3使用pjsua进行呼叫测试

    环境:CentOS 7.6_x64    Python版本 :3.9.12 pjsip版本:2.13   之前写过一篇CentOS7环境编译python3.9版本pjsua的文章: https://w ...

  8. 8. 自定义映射resultMap

    ‍ 在 Mybatis 中,resultType 和 resultMap 都用于定义查询结果的映射关系.它们的使用场景如下: resultType resultType 用于指定返回结果的数据类型,通 ...

  9. React后台管理系统10 菜单数据的整理、以及其余路径的配置、刷新时默认当前选中样式

    对菜单进行数据整理 import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined, } fr ...

  10. .NET周报 【7月第1期 2023-07-02】

    国内文章 C# 实现 Linux 视频聊天.远程桌面(源码,支持信创国产化环境,银河麒麟,统信UOS) https://www.cnblogs.com/shawshank/p/17420469.htm ...