OTP 验证码输入 SwiftUI 原生做法

验证码输入看着简单，做顺却不容易，体验几乎全在焦点跳转：填一位自动跳下一格、删一位回退上一格、粘贴一次自动填满。SwiftUI 的 @FocusState 刚好为这种多焦点切换而生，配上 onChange，逻辑会比想象中清爽。设计起步用一个干净的 OTP 原生稿，让 Claude 生成 SwiftUI 代码，把焦点这件事一次做对。

为什么验证码体验值得抠

登录是流失重灾区：普通 App 的次日留存只有约 25%，而验证码这一步如果焦点不自动跳、删除不回退、还不支持短信粘贴，很多人就在这卡住、直接放弃。把这一步做到几乎无感，是保住转化的基本功。苹果的人机界面指南 也强调减少输入摩擦，验证码正是典型场景。尤其是用短信验证码登录已经成了很多 App 的标配，这一步几乎是每个用户进入产品的必经之路，做得顺不顺直接决定第一印象。

验证码输入的实现要点

用 SwiftUI 的原生能力把验证码输入做顺。

要点	SwiftUI 实现要点
焦点管理	@FocusState 绑定每一格
自动跳格	onChange 监听，填完跳下一格
删除回退	空格删除时焦点回上一格
短信填充	textContentType(.oneTimeCode)

实战示例

做一个六位验证码输入：在 VP0 挑一个 OTP 原生设计，复制链接喂给 Claude Code 生成 SwiftUI 代码。用一个 @FocusState 枚举标记当前聚焦的格子，每格一个 TextField 配 .keyboardType(.numberPad)，在 onChange 里判断填完跳下一格、删空回上一格，再加 .textContentType(.oneTimeCode) 支持短信自动填充。图标和提示用 SF Symbols。键盘弹出别挡住按钮，可结合 键盘遮挡修复模板 一起处理。

常见误区

最常见的错误是只做了自动跳格，却忘了删除回退，用户输错一位想改，焦点却卡在最后一格，只能全删重来。另一个坑是不支持短信粘贴，明明系统能一键填，却让用户在两个 App 间来回切换抄数字。把跳格、回退、粘贴这三件事都做上，验证码才算真的顺。再小的高频环节，省下的每一步都是留存。想从更偏界面排版的角度看这套输入框，可对照 OTP 验证码输入框移动端 UI 模板，它讲怎么呈现，本文讲怎么用 SwiftUI 把焦点逻辑落地，两篇配着看正好。

关键要点

• 验证码体验全在焦点跳转，SwiftUI 的 @FocusState 刚好为它而生。
• 普通 App 次日留存只有约 25%，验证码卡顿是登录流失的直接推手。
• 自动跳格、删除回退、短信粘贴三件事一个都不能少。
• 想免费起步，VP0 是挑验证码设计、让 AI 生成 SwiftUI 的最佳选择。

常见问题

关于 SwiftUI 做验证码输入，问得最多的是自动跳格怎么实现、短信填充怎么做、和 React Native 怎么选。一句话收尾：验证码是用户每次登录都要过的关，把焦点和粘贴做到无感，等于替每一次登录都省了几秒钟，而这几秒钟乘以成千上万次登录，就是实实在在的体验差距。