我如何在扑打中输入数字的某些位置使用连字符制作文本字段

问题描述

我正在制作一个UI，在其中必须显示如下所示的输入文本字段：

我试图使它像这样，但是由于我是新手而无法做出。有没有一种小部件可以满足这一要求，或者您可以指导我如何制作此小部件。

解决方法

您可以尝试一下。如果要连续使用多个文本字段。

Container(
            width: 200,padding: EdgeInsets.all(8),decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),border: Border.all(color: Colors.blue)
            ),child: Row(
              mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
                Container(
                    width: 50,child: TextField(
                      keyboardType: TextInputType.number,focusNode: f1,onChanged: (String newVal) {
                        if (newVal.length == 5) {
                          f1.unfocus();
                          FocusScope.of(context).requestFocus(f2);
                        }
                      },)),Text(" - "),Container(
                    width: 70,focusNode: f2,onChanged: (String newVal) {
                        if (newVal.length == 7) {
                          f2.unfocus();
                          FocusScope.of(context).requestFocus(f3);
                        }
                        if(newVal == ''){
                          f2.unfocus();
                          FocusScope.of(context).requestFocus(f1);
                        }
                      },Container(
                    width: 10,focusNode: f3,onChanged: (String newVal) {
                        if (newVal.length == 1) {
                          f3.unfocus();
                        }
                        if(newVal == ''){
                          f3.unfocus();
                          FocusScope.of(context).requestFocus(f2);
                        }
                      },],),

输出：

但是，如果要在单个TextField中执行此操作，则应执行以下操作：

Container(
            width: 200,child: Center(
              child: TextFormField(
                keyboardType: TextInputType.number,inputFormatters: [
                  WhitelistingTextInputFormatter.digitsOnly,new LengthLimitingTextInputFormatter(13),new NumberFormatter()
                ],//Custom InputFormatter
class NumberFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue,TextEditingValue newValue) {
    var text = newValue.text;

    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }

    var buffer = new StringBuffer();
    for (int i = 0; i < text.length; i++) {
      buffer.write(text[i]);
      var nonZeroIndex = i + 1;
      print(text.length);
      if (nonZeroIndex <= 5) {
        print("non");
        print(nonZeroIndex);
        if (nonZeroIndex % 5 == 0 && nonZeroIndex != text.length) {
          buffer.write('-'); // Add double spaces.
        }
      } else {
        if (nonZeroIndex % 12 == 0 && nonZeroIndex != text.length) {
          buffer.write('-'); // Add double spaces.
        }
      }
    }

    var string = buffer.toString();
    return newValue.copyWith(
        text: string,selection: new TextSelection.collapsed(offset: string.length));
  }
}

输出：

,

使用此软件包flutter_masked_text，您可以按照以下步骤进行操作。当用户键入数字时，这将自动在需要的位置加上连字符的格式。

class _MyWidgetState extends State<MyWidget> {
  MaskedTextController tc = MaskedTextController(mask: '00000-0000000-0');

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: tc,decoration: InputDecoration(
        hintText: 'e.g. 61101-1234524-1',);
  }
}