TrionesDev Antd Flutter

Appearance

VerificationCodeInput 验证码输入框 ​

验证码输入框是一个专门用于输入验证码的组件，通常用于手机或邮箱验证场景。

何时使用 ​

  • 用户注册或登录时需要输入短信验证码
  • 重要操作前需要进行身份验证
  • 需要防止机器人操作的场景

代码演示 ​

import 'package:flutter/material.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

import '../demo_block.dart';

class VerificationCodeInputPage extends StatefulWidget {
  const VerificationCodeInputPage({super.key});

  @override
  State<StatefulWidget> createState() => _VerificationCodeInputPageState();
}

class _VerificationCodeInputPageState extends State<VerificationCodeInputPage> {
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
      appBar: AntAppBar(title: const Text('VerificationCodeInput 验证码输入框')),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            DemoBlock(title: "基本使用", child: AntVerificationCodeInput()),
          ],
        ),
      ),
    );
  }
}

API ​

AntVerificationCodeInput 组件参数 ​

属性说明类型默认值
style样式StateStyle?null
size大小AntSizeAntSize.middle
height高度double?null
placeholder占位符String?null
type输入框类型AntInputType?AntInputType.text
prefix前缀Widget?null
value值String?null
defaultValue默认值String?null
onChange值改变回调ValueChanged<String>?null
decoration输入框样式BoxDecoration?null
sendText发送按钮文本String?"获取验证码"
resendText重新发送按钮文本String?"重新发送"
intervalSeconds验证码发送间隔(秒)int?60
onBlur失去焦点回调ValueGetter<void>?null
onFocus获得焦点回调ValueGetter<void>?null
onSend发送验证码回调AsyncValueGetter<bool>?null

组件特性 ​

  1. 集成倒计时功能，防止用户频繁发送验证码
  2. 支持自定义发送按钮文本和重新发送按钮文本
  3. 基于AntInput组件构建，继承了其所有功能
  4. 支持异步发送回调，可根据发送结果控制倒计时启动
  5. 倒计时期间按钮不可点击，显示剩余秒数

使用说明 ​

  • 点击发送按钮触发onSend回调（如果提供）
  • 如果onSend回调返回true或者未提供，则启动倒计时
  • 倒计时期间按钮显示剩余秒数，倒计时结束后显示重新发送文本
  • 组件继承自AntInput，支持所有AntInput的属性和功能