U
Unity
星辰学院
首页
课程表
章节导览
第 1 课
返回主站
首页
/
第 10 章 · UI 界面系统
/
第 152 课
LESSON 152 · UI 界面系统
InputField 输入框
InputField 已掌握。下一课学 Toggle 开关。
⏱ 约 13 分钟
📊 难度:
入门
🗂 第 10 章 · UI 界面系统
📍 第 152 / 300 课
课程进度
152 / 300
🎯
本节学习目标
掌握 InputField 创建
掌握读取输入
掌握输入事件
🚀
课程导读
玩家登录、改名、填答案都要输入框。本课实现文字输入交互。
◆
InputField 组件
创建与配置。
Hierarchy 右键 → UI → Input Field - TextMeshPro(推荐)。
结构:InputField(根)→ Text Area → Placeholder(提示文字)+ Text(实际文字)。
【Placeholder】提示“请输入…”的灰字;【Text】玩家输入后显示的黑字。
【组件属性】
Content Type:内容类型(Standard 普通、Integer Number 整数、Password 密码等)。
Character Limit:最大字符数(0=不限)。
Line Type:Single Line(单行)/ Multi Line(多行)。
【读取】tmpInput.text 返回当前输入内容(string)。
【设置】tmpInput.text = "默认文字";
【交互】interactable=false 禁用;readOnly 只读。
【注意】TMP 的输入框组件是 TMP_InputField,别与旧版 InputField 混用。
💡
读取输入 = .text;转数字 = int.Parse/.TryParse(第 49 课)。
◆
实战:登录输入
读取并处理输入。
创建 InputField(用户名)+ InputField(密码,Content Type=Password)。
创建按钮“登录”。
创建脚本 LoginManager:
public TMP_InputField nameInput; public TMP_InputField pwdInput;
public void OnLogin() {
string name = nameInput.text;
string pwd = pwdInput.text;
if (string.IsNullOrEmpty(name)) { Debug.Log("请输入用户名"); return; }
Debug.Log($"登录:{name} / {pwd}");
}
把按钮 On Click 绑定 OnLogin。
【数字输入】int.Parse(inputField.text) 前先 TryParse 判空判非法(第 49 课)。
【回车提交】用 TMP_InputField.onSubmit.AddListener(OnSubmit);或 onEndEdit 失焦时触发。
【焦点】EventSystem 里 SetSelectedGameObject(inputField.gameObject) 让输入框自动聚焦。
【注意】输入时游戏按键可能被触发(第 112 课冲突),用 EventSystem.current.currentSelectedGameObject 判断焦点。
【验证】输入名字点登录,Console 打印。
✅
登录/注册界面 = InputField ×2 + Button + 读取校验。标准三件套。
⚠
常见错误与排查
⛔
错误:
输入框无法输入?
原因:
EventSystem 缺失、或输入框被禁用、或焦点没在输入框
解决:
确认 EventSystem 存在;点击输入框后再输入;检查 interactable。
★
动手练习
课后小任务(做出来才算真的学会)
创建用户名+密码两个输入框
读取输入并打印
用 TryParse 安全转换数字输入
✓
本节小结
InputField 已掌握。下一课学 Toggle 开关。
标记为已完成
完成打卡后,主站会实时更新你的学习进度 🎯
← 上一课
Slider 滑动条
下一课 →
Toggle 开关
↑