Flutter 验证码输入框：全方位解析与实践指南

前端

2024-02-09 06:12:41

引言

验证码输入框在现代应用程序中非常常见，它可以帮助用户验证身份、重置密码或进行其他安全操作。在 Flutter 中，虽然有现成的验证码输入框组件，但我们也可以根据自己的需求定制一个更灵活、更符合特定场景要求的验证码输入框。

需求分析

在 Flutter 中实现验证码输入框，我们需要考虑以下需求：

验证码输入框应为自定义小部件。
验证码输入框应支持自动聚焦。
当输入一位验证码时，应自动跳到下一个输入框，并使光标聚焦在该输入框上。
验证码输入框应具有良好的样式和布局，以适应不同设备和屏幕尺寸。

实现步骤

创建自定义小部件

首先，我们需要创建一个自定义小部件来实现验证码输入框。我们可以使用 StatelessWidget 或 StatefulWidget，具体取决于我们是否需要维护状态。这里我们使用 StatelessWidget：

class OTPInput extends StatelessWidget {
  final int numOfFields;
  final Function(String) onChanged;

  const OTPInput({
    Key? key,
    required this.numOfFields,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: List.generate(
        numOfFields,
            (index) => _OTPField(
          onChanged: (value) {
            if (value.length == 1) {
              FocusScope.of(context).nextFocus();
            }

            onChanged(value);
          },
        ),
      ),
    );
  }
}

实现自动聚焦

为了实现自动聚焦，我们可以使用 FocusNode 和 requestFocus() 方法：

class _OTPField extends StatelessWidget {
  final Function(String) onChanged;

  const _OTPField({
    Key? key,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final focusNode = FocusNode();

    return SizedBox(
      width: 40,
      height: 60,
      child: TextField(
        autofocus: true,
        focusNode: focusNode,
        onChanged: (value) => onChanged(value),
        textAlign: TextAlign.center,
        keyboardType: TextInputType.number,
        maxLength: 1,
        decoration: InputDecoration(
          counterText: "",
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

实现光标移动

为了实现光标移动，我们需要使用 FocusScope 和 nextFocus() 方法：

class _OTPField extends StatelessWidget {
  final Function(String) onChanged;

  const _OTPField({
    Key? key,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final focusNode = FocusNode();

    return SizedBox(
      width: 40,
      height: 60,
      child: TextField(
        autofocus: true,
        focusNode: focusNode,
        onChanged: (value) {
          if (value.length == 1) {
            FocusScope.of(context).nextFocus();
          }

          onChanged(value);
        },
        textAlign: TextAlign.center,
        keyboardType: TextInputType.number,
        maxLength: 1,
        decoration: InputDecoration(
          counterText: "",
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}