用于输入时间的 Flutter TextField

Question

正如我在标题中所写，我想创建一个特定的 TextField 来输入时间。更深入地说，我希望用户只输入 4 位数字，该字段会自动显示类似 12:23 的内容，因此该字段会自动插入“:”字符。

空的 TextField 将不显示任何内容。当用户输入数字时，TextField 将显示：1 --> 12 --> 12:2 --> 12:23 我试过控制器，但我无法达到我的目的。有人可以帮助我吗？

谢谢，祝你愉快

Answer 1

https://pub.dev/packages/flutter_multi_formatter

自定义格式

TextFormField(
    keyboardType: TextInputType.number,
    inputFormatters: [
        MaskedInputFormatter('##:##'))
    ],
),

Answer 2

试试这个

 TextFormField(
      controller: _controller,
      maxLength: 5,
      onChanged: (value){
        if(_controller.text.length==2){
          _controller.text = _controller.text + ":";
        }
      },
    ),

Answer 3

我解决了使用两个由“:”分隔的容器，所有容器都在一个父容器中。我将小时和分钟保存到两个不同的变量中。

用于输入时间的 Flutter TextField

Flutter TextField for input time

textfield

flutter