Unity中带Spinner控件的文本输入框实现方案咨询

这种控件是输入框+右侧上下箭头按钮的组合，支持手动输入数值，也能通过点击/按住箭头快速增减数值，常用于调整数字类参数（比如数值阈值、配置参数等），以下是基于UGUI的无插件实现方案：

一、基础实现步骤 #

1. 搭建UI结构 #

• 创建空物体作为容器，命名为SpinnerInput
• 在容器下添加InputField组件，调整宽度，留出右侧按钮的空间
• 在容器下添加两个Button组件，分别命名为Btn_Up和Btn_Down，放在输入框右侧上下排列（可给容器加Horizontal Layout Group，按钮加Vertical Layout Group，让布局自动对齐）
• 给按钮设置上下箭头图标（可用Unity内置的UI Sprite，或自行制作简单图标）

2. 编写核心逻辑脚本 #

创建SpinnerInput.cs脚本，挂载到SpinnerInput容器上：

using UnityEngine;
using UnityEngine.UI;

public class SpinnerInput : MonoBehaviour
{
    [SerializeField] private InputField inputField;
    [SerializeField] private Button btnUp;
    [SerializeField] private Button btnDown;
    [SerializeField] private float step = 1f; // 每次增减的步长
    [SerializeField] private float minValue = 0f; // 数值下限
    [SerializeField] private float maxValue = 100f; // 数值上限
    [SerializeField] private bool isInteger = false; // 是否只允许整数

    private float currentValue;
    private bool isHoldingUp;
    private bool isHoldingDown;
    private float holdDelay = 0.5f; // 按住后开始连续增减的延迟
    private float holdTimer;
    private float repeatInterval = 0.1f; // 连续增减的间隔
    private float repeatTimer;

    private void Awake()
    {
        // 绑定基础点击事件
        btnUp.onClick.AddListener(OnUpClick);
        btnDown.onClick.AddListener(OnDownClick);
        inputField.onEndEdit.AddListener(OnInputEndEdit);

        // 初始化数值
        if (float.TryParse(inputField.text, out currentValue))
        {
            ClampValue();
            UpdateInputText();
        }
        else
        {
            currentValue = minValue;
            UpdateInputText();
        }
    }

    private void Update()
    {
        // 处理按住按钮连续增减的逻辑
        if (isHoldingUp)
        {
            holdTimer += Time.deltaTime;
            if (holdTimer >= holdDelay)
            {
                repeatTimer += Time.deltaTime;
                if (repeatTimer >= repeatInterval)
                {
                    OnUpClick();
                    repeatTimer = 0f;
                }
            }
        }
        else if (isHoldingDown)
        {
            holdTimer += Time.deltaTime;
            if (holdTimer >= holdDelay)
            {
                repeatTimer += Time.deltaTime;
                if (repeatTimer >= repeatInterval)
                {
                    OnDownClick();
                    repeatTimer = 0f;
                }
            }
        }
    }

    public void OnUpClick()
    {
        currentValue += step;
        ClampValue();
        UpdateInputText();
    }

    public void OnDownClick()
    {
        currentValue -= step;
        ClampValue();
        UpdateInputText();
    }

    private void OnInputEndEdit(string input)
    {
        if (float.TryParse(input, out float value))
        {
            currentValue = value;
            ClampValue();
        }
        UpdateInputText();
    }

    private void ClampValue()
    {
        currentValue = Mathf.Clamp(currentValue, minValue, maxValue);
        if (isInteger) currentValue = Mathf.RoundToInt(currentValue);
    }

    private void UpdateInputText()
    {
        inputField.text = isInteger ? currentValue.ToString("F0") : currentValue.ToString("F2");
    }

    // 以下是按住按钮的事件，需通过EventTrigger绑定
    public void OnUpButtonDown()
    {
        isHoldingUp = true;
        holdTimer = 0f;
        repeatTimer = 0f;
    }

    public void OnUpButtonUp()
    {
        isHoldingUp = false;
    }

    public void OnDownButtonDown()
    {
        isHoldingDown = true;
        holdTimer = 0f;
        repeatTimer = 0f;
    }

    public void OnDownButtonUp()
    {
        isHoldingDown = false;
    }
}

3. 配置脚本与事件 #

• 在Inspector面板给SpinnerInput脚本赋值对应的InputField、Btn_Up、Btn_Down
• 给两个按钮添加EventTrigger组件：
  • 给Btn_Up绑定Pointer Down事件到OnUpButtonDown，Pointer Up和Pointer Exit事件到OnUpButtonUp
  • 给Btn_Down绑定Pointer Down事件到OnDownButtonDown，Pointer Up和Pointer Exit事件到OnDownButtonUp
• 根据需求调整step、minValue、maxValue、isInteger等参数

4. 样式优化 #

• 调整输入框和按钮的大小、间距，让整体布局紧凑协调
• 给按钮设置hover、pressed状态的样式，提升交互反馈
• 给输入框设置验证类型为Integer Number或Decimal Number，避免输入非数字内容

二、进阶优化方向 #

• 增加数值变化回调：定义UnityEvent<float>，让外部逻辑能监听数值变更
• 快速增减功能：按住Shift键时，步长自动翻倍，提升操作效率
• 自定义格式：支持传入自定义格式字符串，控制数值显示样式
• 分辨率适配：使用Layout Group和Content Size Fitter确保控件在不同屏幕下正常显示

内容的提问来源于stack exchange，提问作者user3009098