Multi textfield

readme.md

Create by https://gist.github.com/CaiJingLong/a299d15b92edc2d09a8a06cf6dd5a1b0

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiTextFieldExample(),
    );
  }
}

/// 多个TextField密码校验
class MultiTextFieldExample extends StatefulWidget {
  @override
  _MultiTextFieldExampleState createState() => _MultiTextFieldExampleState();
}

class _MultiTextFieldExampleState extends State<MultiTextFieldExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          MultiTextFieldWidget(
            totalCount: 4,
            perCount: 4,
          ),
        ],
      ),
    );
  }
}

class MultiTextFieldWidget extends StatefulWidget {
  final int totalCount;
  final int perCount;

  const MultiTextFieldWidget({
    Key key,
    this.totalCount = 6,
    this.perCount = 1,
  }) : super(key: key);
  @override
  MultiTextFieldWidgetState createState() => MultiTextFieldWidgetState();
}

class MultiTextFieldWidgetState extends State<MultiTextFieldWidget> {
  final map = <int, _TextFieldValue>{};

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < widget.totalCount; i++) {
      map.putIfAbsent(i, () => _TextFieldValue());
    }
  }

  String getText() {
    final sb = StringBuffer();
    for (var i = 0; i < widget.totalCount; i++) {
      final value = map[i];
      var text = value.controller.text;
      if (text.isNotEmpty) {
        text = text.substring(0, widget.perCount);
      } else {
        text = ' ';
      }
      sb.write(text);
    }
    return sb.toString();
  }

  void clear() {
    for (var i = 0; i < widget.totalCount; i++) {
      final value = map[i];
      value.controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        for (var i = 0; i < widget.totalCount; i++) _buildTextFiled(i),
      ],
    );
  }

  Widget _buildTextFiled(int i) {
    final value = map[i];
    return Expanded(
      child: Row(
        children: <Widget>[
          if (i != 0) Text('-'),
          Expanded(
            child: CupertinoTextField(
              focusNode: value.node,
              controller: value.controller,
              autofocus: i == 0,
              onChanged: (v) {
                final checkLength = widget.perCount;
                if (v.length > checkLength) {
                  value.controller.text = v.substring(0, checkLength);
                  map[i + 1].node.requestFocus();
                  return;
                }
                if (v.length == 0) {
                  map[i - 1].node.requestFocus();
                  return;
                }
                if (v.length != checkLength) {
                  return;
                }
                if (i != widget.totalCount - 1) {
                  if (v.isEmpty) {
                    // 为空则返回上一个
                    map[i - 1].node.requestFocus();
                  } else {
                    map[i + 1].node.requestFocus();
                  }
                } else {
                  // 关闭并校验
                  if (v.isEmpty) {
                    map[i - 1].node.requestFocus();
                    return;
                  }
                  value.node.unfocus();
                  print("最后一个了, 文字为: ${getText()}");
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _TextFieldValue {
  FocusNode node = FocusNode();
  TextEditingController controller = TextEditingController();
}