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. KO之间互相调用

    需求 假设有两个KO,命名为moduleA.KO,moduleB.KO,现在要实现在moduleB.KO中调用moduleA.KO中的函数. 实现 ModuleA实现 源码: #include < ...

  2. vue横向导航条滚动到顶部固定同时瞄点对应内容(copy即用)

    这里监听window 的scroll实现一个页面滚动,导航菜单定位,内容联动的一个简单组件,结合一些案例,按需进行了整合,在此记录一下 效果图如下 具体实现如下 一.先创建一个NavigateTool ...

  3. defcon-quals 2023 crackme.tscript.dso wp

    队友找到的引擎TorqueGameEngines/Torque3D (github.com) 将dso文件放到data/ExampleModule目录下,编辑ExampleModule.tscript ...

  4. Nature 重大发现:癌基因竟不在染色体上?第一作者吴思涵亲身解读!

    编辑|李丽 记者|布德鸟 图片提供|吴思涵 今日凌晨,美国加州大学圣地亚哥分校 Ludwig 癌症研究所的 Paul Mischel 教授领导的研究团队发现, 大量的癌基因并不在染色体上,而是会从染色 ...

  5. Post-Exploitation Basics

    开发后基础知识 https://tryhackme.com/room/postexploit 使用 mimikatz.bloodhound.powerview 和 msfvenom 学习后期开发和维护 ...

  6. C++容器(vector、deque、list、map)

    (1) vector:将元素置于一个动态数组中,可以随机存储元素(也就是用索引直接存取). 数组尾部添加或删除元素非常迅速.但在中部或头部就比较费时. *代码演示:* 取: at在下标越界时会抛出异常 ...

  7. 前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标

    前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 效 ...

  8. Go优雅的错误处理: 支持错误堆栈, 错误码, 错误链的工具库

    地址: https://github.com/morrisxyang/errors 如果觉得有用欢迎 Star 和 PR, 有问题请直接提issue errors 简单的支持错误堆栈, 错误码, 错误 ...

  9. Seal AppManager如何基于Terraform简化基础设施管理

    作者简介 陈灿,数澈软件Seal 后端研发工程师,曾在腾讯负责敏捷研发体系建设以及 DevOps 解决方案的敏捷实践.在敏捷研发和产品效能提升有着丰富的经验,致力于构建一站式研发友好的平台工程解决方案 ...

  10. 使用Hexo搭建个人博客网站

    参考CSDN上的博客.特此感谢wsmrzx.