我怎样才能在输入数字的某些地方用连字符制作文本字段？

Question

我正在制作 UI，其中我必须像这样显示输入文本字段：

我试着把它做成这样，但由于我是 flutter 的新手，所以做不出来。是否有任何类型的小部件可以在 flutter 中满足这一要求，或者您可以指导我如何制作这个小部件。

Answer 1

使用此包 flutter_masked_text，您可以按如下方式执行此操作。当用户输入数字时，这将 auto-format 在所需位置显示带连字符的文本。

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',
      ),
    );
  }
}

Answer 2

你可以试试这个。如果您想在一行中使用多个文本字段。

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,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      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);
                        }
                      },
                    )),
                Text(" - "),
                Container(
                    width: 10,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      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));
  }
}

输出：

我怎样才能在输入数字的某些地方用连字符制作文本字段？

How can i make textfield with hyphen at certain places of input number in flutter

symbols

numbers

textfield

dart

flutter