Flutter教程六格验证码功能开发

在Flutter中实现六格验证码功能时，如何优雅地处理每个输入格的焦点自动跳转？我尝试用TextEditingController监听，但输入完成后无法自动切换到下一格，且删除时光标会错乱。有没有完整的代码示例，既能实现输入验证、键盘类型限制（仅数字），又能保持UI整齐（如带下划线的方形输入框）？另外，如何解决软键盘弹出时输入区域被遮挡的问题？

3 回复

好的！以下是一个简单的六位验证码功能开发思路：

  1. 布局：使用 Row 布局，包含6个 TextField，每个设置最大长度为1。
  2. 焦点管理：每个输入框完成后自动跳转到下一个，最后一位时触发验证逻辑。
  3. 样式优化：统一输入框的宽度、边框和字体大小，增加用户体验。

代码示例：

import 'package:flutter/material.dart';

class SixDigitCode extends StatefulWidget {
  @override
  _SixDigitCodeState createState() => _SixDigitCodeState();
}

class _SixDigitCodeState extends State<SixDigitCode> {
  late List<TextEditingController> controllers;

  @override
  void initState() {
    super.initState();
    controllers = List.generate(6, (_) => TextEditingController());
  }

  @override
  void dispose() {
    for (var controller in controllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(6, (index) {
        return SizedBox(
          width: 40,
          child: TextField(
            maxLength: 1,
            textAlign: TextAlign.center,
            controller: controllers[index],
            decoration: InputDecoration(
              border: OutlineInputBorder(),
            ),
            onChanged: (value) {
              if (value.length == 1 && index < 5) {
                controllers[index + 1].requestFocus();
              }
            },
          ),
        );
      }),
    );
  }
}

这样就实现了基本的六位验证码输入功能。记得在实际项目中添加逻辑处理用户输入的验证码。

更多关于Flutter教程六格验证码功能开发的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现一个六格验证码功能，可以这样做：

  1. 布局：使用Row包裹6个Container作为验证码的格子。
  2. 状态管理：定义一个List存储每个格子的状态（如空或已输入字符）。
  3. 交互：监听用户输入，每次输入填充对应格子，并移动到下一格。
  4. 样式：设置格子的边框、颜色等。

示例代码：

import 'package:flutter/material.dart';

class SixGridCaptcha extends StatefulWidget {
  @override
  _SixGridCaptchaState createState() => _SixGridCaptchaState();
}

class _SixGridCaptchaState extends State<SixGridCaptcha> {
  List<String> captcha = List.filled(6, '');

  void _onTap(int index) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('输入验证码'),
        content: TextField(),
        actions: [TextButton(onPressed: () {}, child: Text('确定'))],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: List.generate(6, (index) {
        return GestureDetector(
          onTap: () => _onTap(index),
          child: Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              color: captcha[index].isNotEmpty ? Colors.blue : null,
            ),
            child: Center(child: Text(captcha[index])),
          ),
        );
      }),
    );
  }
}

这个例子中，点击格子会弹出输入框，输入后更新对应格子内容。

Flutter 六格验证码功能开发

在Flutter中开发六格验证码功能，通常需要实现以下功能：

  1. 显示六个输入框（每格一个字符）
  2. 自动聚焦下一格
  3. 支持删除操作

实现方案

以下是实现六格验证码的完整代码：

import 'package:flutter/material.dart';

class SixDigitCodeInput extends StatefulWidget {
  final Function(String)? onCompleted;
  
  const SixDigitCodeInput({Key? key, this.onCompleted}) : super(key: key);

  @override
  _SixDigitCodeInputState createState() => _SixDigitCodeInputState();
}

class _SixDigitCodeInputState extends State<SixDigitCodeInput> {
  List<TextEditingController> controllers = List.generate(6, (index) => TextEditingController());
  List<FocusNode> focusNodes = List.generate(6, (index) => FocusNode());
  List<String> codes = List.filled(6, '');

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 6; i++) {
      controllers[i].addListener(() {
        if (controllers[i].text.length == 1) {
          codes[i] = controllers[i].text;
          if (i < 5) {
            focusNodes[i].unfocus();
            focusNodes[i + 1].requestFocus();
          } else {
            focusNodes[i].unfocus();
            widget.onCompleted?.call(codes.join());
          }
        } else if (controllers[i].text.isEmpty && i > 0) {
          focusNodes[i].unfocus();
          focusNodes[i - 1].requestFocus();
        }
      });
    }
  }

  @override
  void dispose() {
    for (var controller in controllers) {
      controller.dispose();
    }
    for (var focusNode in focusNodes) {
      focusNode.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: List.generate(6, (index) {
        return SizedBox(
          width: 40,
          height: 50,
          child: TextField(
            controller: controllers[index],
            focusNode: focusNodes[index],
            textAlign: TextAlign.center,
            keyboardType: TextInputType.number,
            maxLength: 1,
            decoration: InputDecoration(
              counterText: '',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
              ),
            ),
            onChanged: (value) {
              if (value.isNotEmpty && index < 5) {
                FocusScope.of(context).requestFocus(focusNodes[index + 1]);
              }
            },
          ),
        );
      }),
    );
  }
}

使用方法

SixDigitCodeInput(
  onCompleted: (code) {
    print('验证码输入完成: $code');
    // 在这里处理验证码验证逻辑
  },
)

功能特点

  1. 自动跳转：输入一个数字后自动跳到下一个输入框
  2. 删除处理：删除字符时会自动跳转到上一个输入框
  3. 完成回调：当6位都输入完成后会触发onCompleted回调
  4. 样式自定义：可以轻松修改TextField的装饰来改变外观

你可以根据需要调整输入框的样式、大小和间距，或者添加验证码错误时的视觉反馈。

回到顶部