SuperAPI AI 工具集

shadcn_ui-input-otp

前端与建站

查看项目

更新于 10-16 07:01

技能介绍

用途 该技能用于在 Flutter 项目中构建一次性密码(OTP)输入组件,来源于 Shadcn UI 的 Input OTP 能力。组件具备无障碍访问特性,并支持复制粘贴。

主要能力

  • ShadInputOTP:根组件,承载整体 OTP 输入逻辑。
  • ShadInputOTPGroup 与 ShadInputOTPSlot:通过 children 构建分组布局,每个 Slot 代表一个输入位,分组之间可插入分隔符(例如 Icon(LucideIcons.dot))。
  • maxLength:设置 OTP 的最大长度。
  • onChanged:回调返回完整的 OTP 字符串。
  • keyboardType:指定键盘类型,例如 TextInputType.number。
  • inputFormatters:限制输入格式,例如 FilteringTextInputFormatter.digitsOnly 实现仅允许数字。包内还提供 UpperCaseTextInputFormatter 与 LowerCaseTextInputFormatter。
  • ShadInputOTPFormField:表单字段封装,支持 id、maxLength、label、description、validator 等参数,适合与表单校验结合使用。

使用方式 基础用法中,将 ShadInputOTP 的 maxLength 设为 6,在其 children 中放置两个 ShadInputOTPGroup,每组包含三个 ShadInputOTPSlot,并用 Icon(size: 24, LucideIcons.dot) 作为分隔符。

限制为数字输入时,将 maxLength 设为 4,keyboardType 设为 TextInputType.number,并在 inputFormatters 中传入 FilteringTextInputFormatter.digitsOnly,children 中放置一个包含四个 ShadInputOTPSlot 的 ShadInputOTPGroup。

表单场景使用 ShadInputOTPFormField,指定 id、maxLength、label、description 和 validator。例如 validator 中判断 v.contains(' '),若包含空格则返回 'Fill the whole OTP code',否则返回 null。

适用场景 适用于需要输入一次性密码或验证码的界面,例如登录验证、双因素认证、短信/邮箱验证码输入等。

限制 本次资料未提供收费、价格、平台支持范围、性能表现等具体信息,暂未提供。