Unity-UI 输入框功能

一、最终实现效果

点击【打开弹窗】按钮弹出登录面板，包含账号输入框、密码输入框、登录按钮；
底部提示文本默认隐藏；
账号密码匹配：提示文本激活、绿色文字 login success；
账号密码错误：提示文本激活、红色文字 login fail；
可复用原有弹窗管理器，低耦合拓展登录逻辑。

标注：弹窗内 InputField 账号、InputField 密码、登录 Button、默认关闭的提示 Text

二、Hierarchy 层级结构

cs 复制代码

Canvas
├─ OpenBtn
└─ PopWindow（默认取消激活）
   ├─ Background（全屏遮罩）
   └─ Panel（弹窗底板）
      ├─ TitleText 弹窗标题
      ├─ Input_Account 账号输入框（UI→Input Field）
      ├─ Input_Pwd 密码输入框（UI→Input Field，勾选Password类型）
      ├─ Btn_Login 登录按钮
      ├─ Text_Tip 提示文字（默认取消Active，字体默认透明/隐藏）
      └─ CloseBtn 关闭弹窗按钮

标注：Text_Tip 物体左上角取消勾选，初始隐藏状态

2.1 输入框关键设置

账号输入框 Input_Account 直接默认设置即可，Placeholder 填写：请输入账号
密码输入框 Input_Pwd

勾选 Input Field 组件下 Password（内容圆点隐藏）
Placeholder 填写：请输入密码

2.2 提示文本 Text_Tip 设置

字体大小调大，居中放置在登录按钮下方；
Inspector 取消 GameObject 激活（默认不显示）；
脚本动态修改文字颜色与内容。

三、完整升级脚本 PopWindowManager.cs

直接替换原有脚本，注释清晰可直接看懂逻辑

cs 复制代码

using UnityEngine;
using UnityEngine.UI;
using TMPro; // 必须引入TMP命名空间

public class PopWindowManager : MonoBehaviour
{
    [Header("弹窗本体")]
    public GameObject popWindowObj;

    [Header("TMP登录组件拖拽赋值")]
    public TMP_InputField inputAccount;    // TMP账号输入框
    public TMP_InputField inputPwd;       // TMP密码输入框
    public TMP_Text textTip;              // TMP提示文字

    // 预设正确账号密码
    private readonly string correctAccount = "admin";
    private readonly string correctPwd = "123456";

    void Start()
    {
        // 初始化隐藏弹窗、隐藏提示文本
        popWindowObj.SetActive(false);
        textTip.gameObject.SetActive(false);
    }

    #region 弹窗开关方法
    /// <summary>打开登录弹窗</summary>
    public void OpenPopWindow()
    {
        popWindowObj.SetActive(true);
        // 打开弹窗清空输入框内容，隐藏上次登录提示
        inputAccount.text = "";
        inputPwd.text = "";
        textTip.gameObject.SetActive(false);
    }

    /// <summary>关闭弹窗</summary>
    public void ClosePopWindow()
    {
        popWindowObj.SetActive(false);
    }
    #endregion

    /// <summary>登录校验（绑定给TMP登录按钮OnClick）</summary>
    public void LoginCheck()
    {
        // 去除首尾空格获取输入内容
        string account = inputAccount.text.Trim();
        string pwd = inputPwd.text.Trim();

        if (account == correctAccount && pwd == correctPwd)
        {
            // 登录成功：绿色文字
            textTip.text = "login success";
            textTip.color = Color.green;
        }
        else
        {
            // 登录失败：红色文字
            textTip.text = "login fail";
            textTip.color = Color.red;
        }
        // 激活提示文本显示结果
        textTip.gameObject.SetActive(true);
    }
}

获取输入框内容的关键代码

cs 复制代码

        // 去除首尾空格获取输入内容
        string account = inputAccount.text.Trim();
        string pwd = inputPwd.text.Trim();

四、按钮 OnClick 事件绑定步骤

4.1 登录按钮绑定 LoginCheck 方法

选中层级内 Btn_Login 登录按钮；
On Click 区域点+号，拖拽挂载脚本的 Canvas 物体到对象槽；
下拉菜单选择：PopWindowManager → LoginCheck()；

4.2 原有按钮绑定不变（上个博客）

打开弹窗按钮：绑定OpenPopWindow()
关闭弹窗按钮：绑定ClosePopWindow()

⚠️ 关键避坑

LoginCheck 必须是 public void 无参数，否则下拉菜单看不到；
Unity 控制台不能有脚本红色报错，否则无法反射方法；
必须拖拽挂载了脚本的 GameObject，不能只拖 cs 脚本文件。

五、测试操作流程

运行 Unity Game 窗口；
点击【打开弹窗】弹出登录面板；
测试 1：账号admin、密码123456 → 下方绿色login success；
测试 2：任意错误账号密码 → 下方红色login fail；
关闭弹窗再次打开，输入框自动清空、提示自动隐藏。