当前位置：首页 > news >正文

【Unity】构建简单实用的年份选择器（简单原理示范）

news 2025/8/30 16:48:04

在许多应用程序和游戏中，年份选择是一个常见的需求。无论是在日历应用程序中查看事件，还是在历史类游戏中选择时间段，年份选择器都是用户体验的重要组成部分，下面实现一个简易的年份选择器。

一、效果预览：

一、效果预览：

二、步骤

2.1 场景准备

2.2 项目准备

2.3 编写脚本

三、总结

二、步骤

2.1 场景准备

1. 创建场景新建Image调整大小为宽360，高300（原理：年份内容显示5个，每个宽100，高60，总共60*5，于是高设置为300）。

2. 为Image添加mask组件（遮挡其他年份）和ScrollRect 组件，使其作为滚动视图的容器，最后调整参数，我这里垂直滚动，于是取消了Horizontal选项。

3. 在Image下创建空物体GameObject（用来存放后面运行生成的年份）。

4.为空物体GameObject添加Grid Layout Group和Content Size Fitter组件，调整参数（这里可以在其下创建几个Image查看效果）。

5. 在Image的ScrollRect 组件中拖入相应物体。

2.2 项目准备

创建Text预制体（用来显示年份），字体等参数可以根据自己需要调整。

2.3 编写脚本

using UnityEngine;
using UnityEngine.UI;public class SlidingAdsorption : MonoBehaviour
{public GameObject yearTextPrefab; // 预设的年份Text对象public ScrollRect scrollRect;public float scaleDifference = 0.5f; // 缩放差异public RectTransform contentRectTrans; // Scroll Rect Content的RectTransformprivate RectTransform[] items;//用来存放生成的年份int yearsCount =40; // 年份总数float viewPortSize;float center;int itemCount;void Start(){// 获取ScrollView的视图大小300;viewPortSize = scrollRect.viewport.rect.height;Debug.Log("ScrollView的视图大小:" + viewPortSize);// 计算ScrollView的中心位置center = scrollRect.transform.position.y;// - viewPortSize / 2;       Debug.Log("ScrollView的中心位置:" + center);for (int i = 0; i < yearsCount; i++){GenerateYearText(1950 + i);}// 获取ScrollView中的所有子对象itemCount = scrollRect.content.childCount;items = new RectTransform[itemCount];for (int i = 0; i < itemCount; i++){items[i] = scrollRect.content.GetChild(i).GetComponent<RectTransform>();//Debug.Log("items[i]: " + i);}}void Update(){foreach (RectTransform item in items){// 计算每个项目的中心位置float itemCenter = item.transform.position.y;// - item.rect.height / 2;//Debug.Log("每个项目的中心位置: " + itemCenter);// 计算每个项目相对于ScrollView中心的偏移量float distanceFromCenter = Mathf.Abs(center - itemCenter);// 根据偏移量计算缩放比例float scale = Mathf.Clamp(1 - distanceFromCenter * scaleDifference / viewPortSize, 0.5f, 1f);//Debug.Log("根据偏移量计算缩放比例: " + scale);// 应用缩放item.localScale = new Vector3(scale, scale, 1f);}// 如果用户停止滑动，则吸附到最近的年份if (scrollRect.velocity.magnitude <= 20.0f){SnapToNearestYear();Debug.Log("不移动了！");}}private void GenerateYearText(int year){GameObject yearText = Instantiate(yearTextPrefab, contentRectTrans);yearText.transform.SetAsFirstSibling();yearText.transform.GetComponent<Text>().text = year.ToString();}void SnapToNearestYear(){RectTransform closestItem = null;foreach (RectTransform item in items){float distance = Mathf.Abs(center - item.position.y);if (distance < 35)// 根据需求调整阈值{closestItem = item;Debug.Log("装入了一个Item");}}// 将最近的年份吸附到ScrollView的中心if (closestItem != null){// 计算需要移动的距离float distanceToMove = center - closestItem.position.y;// 将ScrollView的内容向上或向下移动，使最近的年份对象出现在ScrollView的中心scrollRect.content.anchoredPosition += new Vector2(0f, distanceToMove);}}
}

将脚本挂载在Canvas上，并将相应物体拖入。