Unity3d中UGUI组件精简复盘(十二)Scrollbar组件

上一节,我们简单概括了Unity3D编辑器中Slider组件的简要介绍。具体详情链接为:Unity3d中UGUI组件精简复盘(十一)Slider组件

话不多说,我们直接进入正题~ 今天我们简要概括复盘的组件便是Scrollbar组件啦~

是的没错,Slider组件也是继承于Selectable基类的,所以在属性的注解上也会有Selectable基类中的属性。这里就不重复了直接上链接,想要了解Selectable基类通用的属性注解的请自行跳转自Unity3d中UGUI组件精简复盘(八)Selectable基类进行查阅哈,如果有的小伙伴不知道为什么这么说继承于Selectable基类,可到VS环境下定义出Slider类名,选中类名按F12键,即可得知。

Scrollbar组件

滚动条组件,Scrollbar继承于Selectable

属性:

Handle Rect: Hander的Transform

Direction: Left To Right从左到右,Right To Left从右到左,Bottom To Top 从下到上,Top To Bottom 从上到下

Value: 滑动块移动的位置

Size: 滑块的大小

Number Of Step: 滑动几次能滑完全,0、1时可以任意滑动,大于1后就将滑动条分为几个部分,设置数值为多少就分为几步。

OnValueChanged(single): 类似于Button里面的一个Onclick事件绑定。我们可以通过手动设置来进行绑定,当然我们也一样可以通过手写代码控制:

例如:TestScrollbar.cs

using UnityEngine.UI;
public class TestScrollbar : MonoBehaviour {
	void Start () {
        GetComponent<Scrollbar>().onValueChanged.AddListener((value) => Debug.Log(value));
	}
}

联系工作实际:
在实际工作需求中,Scrollbar可以算的上是我们经常使用的组件之一了,因为通常在游戏中,需要涉及到多条内容,多条消息的滚动查看,因此Scrollbar是我们在实际开发工作需求中的常用组件之一。通常我们在工作中的需求中,主程也许会问到一个实际问题,“做一个无限滚动”的背包,实际上简单来说就是Scrollbar的相关的应用了。

博主在博客上又去看到过一些无限滚动背包的内容制作,其根本的原理就是在可见区域内的物体显示出来,其他的物体就设置为false。并且通过滚动大小的计算,来实现物体的顺序调整。

而在工作中,我了解到的是通过一个在插件去实现的无限滚动的效果,应用的范围更广,针对于所有滚动的实现都是通过如此来实现,有兴趣的朋友可以在博客中或者百度中去了解一个无限滚动的原理和实现。

跟Slider有点像,但是不一样。

本节的内容比较简单就不做过多的展示了,建议还是多实操,实操之后便有一个自己的理解了。
如果博客博友对这个章节有更多的内容想要了解的,可以评论哈,等这一个章节结束后,我会根据评论反馈以及自己的能力,将评论中反馈的内容在下一个计划中去制作出对应的内容的哈~在这里插入图片描述
公众号:平平无奇代码猴
也可以搜索:Jackiie_wang 公众号,欢迎大家关注!欢迎催更!留言!

作者:ProMer_Wang

链接:https://blog.csdn.net/qq_43801020/article/details/117611986

本文为ProMer_Wang的原创文章,著作权归作者所有,转载请注明原文出处,欢迎转载!

### Unity ScrollRect 使用方法及常见问题 #### 一、ScrollRect 组件基础 `ScrollRect` 是 UnityUGUI 提供的一个核心组件,主要用于创建可滚动的内容区域。通过设置 `Content` 属性,可以指定需要滚动的对象容器[^2]。 以下是基本的使用流程: 1. 创建一个 Canvas 并在其上添加一个 Panel 或 Image 作为背景。 2. 添加另一个 GameObject(通常是一个矩形对象)并将其命名为 Content。 3. 将 `ScrollRect` 组件附加到父级面板上,并将 Content 对象赋值给其 `Content` 字段。 4. 如果需要水平或垂直滚动条,则可以在场景中创建相应的 `Scrollbar`,并将它们分别绑定到 `HorizontalScrollbar` 和 `VerticalScrollbar` 属性中。 ```csharp using UnityEngine; using UnityEngine.UI; public class BasicScrollRect : MonoBehaviour { public ScrollRect scrollRect; // 引用 ScrollRect 组件 void Start() { if (scrollRect != null) { Debug.Log("ScrollRect 初始化成功"); } } } ``` #### 二、增强功能:左右箭头指示器 默认情况下,`ScrollRect` 不会自动显示内容边界的状态提示。为了改善用户体验,可以通过自定义脚本实现动态显示左右箭头的功能[^1]。 具体实现逻辑如下: - 当用户尝试滚动超出可见范围时,激活对应的箭头图标。 - 需要在编辑器模式下扩展 `EnhancedScrollRectEditor.cs` 脚本来支持可视化调试。 代码片段展示如何检测滚动状态: ```csharp void UpdateArrowsVisibility(Vector2 normalizedPosition) { bool showLeftArrow = normalizedPosition.x < 0f; bool showRightArrow = normalizedPosition.x > 1f; leftArrow.gameObject.SetActive(showLeftArrow); rightArrow.gameObject.SetActive(showRightArrow); // 更新 UI 显示 if (showLeftArrow || showRightArrow) { Debug.LogWarning($"当前方向: 左侧={showLeftArrow}, 右侧={showRightArrow}"); } } ``` #### 三、滚动定位功能 对于某些特定需求,可能希望在滚动过程中让某个子项精确停靠在视口中。这可以通过监听 `onValueChanged` 事件并计算目标位置来完成[^3]。 示例代码展示了如何手动调整滚动偏移量以达到预期效果: ```csharp private void SnapToNearestItem(Vector2 currentPos) { float closestDistance = Mathf.Infinity; int targetIndex = -1; for (int i = 0; i < contentChildCount; ++i) { Transform childTransform = content.transform.GetChild(i); Vector2 itemPosition = childTransform.localPosition; float distance = Vector2.Distance(currentPos, itemPosition); if (distance < closestDistance) { closestDistance = distance; targetIndex = i; } } if (targetIndex >= 0 && targetIndex < contentChildCount) { MoveToTarget(targetIndex); // 移动至最近的目标索引处 } } private void MoveToTarget(int index) { RectTransform targetRectTransform = content.transform.GetChild(index).GetComponent<RectTransform>(); scrollRect.StopMovement(); // 停止惯性移动 scrollRect.normalizedPosition = new Vector2(0f, GetNormalizedYFromChild(targetRectTransform)); } ``` #### 四、基于 ScrollRect 的摇杆实现 除了传统的列表浏览外,还可以利用 `ScrollRect` 构建虚拟摇杆控件。这种设计特别适合移动端操作界面[^4]。 主要思路包括以下几个方面: - 设置合适的限制条件(如约束比例和最大位移距离)。 - 结合输入设备数据实时更新手柄中心坐标。 简化版伪代码如下所示: ```csharp void HandleInput(float deltaX, float deltaY) { Vector2 rawOffset = new Vector2(deltaX * sensitivity, deltaY * sensitivity); stick.position += ClampOffset(rawOffset); // 控制摇杆活动范围 } Vector2 ClampOffset(Vector2 offset) { return Vector2.ClampMagnitude(offset, maxRadius); } ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值