flutter 退格键不能与TextInputFormatter一起正常工作

igetnqfo 于 2023-04-22 发布在 Flutter

关注(0)|答案(3)|浏览(146)

我正在尝试创建自定义InputTextFormatter。格式化程序用空格分隔千个字符，并将点后的字符数量限制为2个字符。
我想将光标移动到TextField值的末尾，但在达到限制（2个字符）后，* 真实的 * 光标似乎会根据我尝试输入其他字符的次数进一步移动。似乎selection不适用于结果TextEditingValue。

复制步骤：

1.在TextField中输入“12.34”。
1.保持以前的值，例如尝试添加“111”。
1.按退格键。什么也没发生。

**预期行为：**按一次退格键必须删除TextField中的最后一个字符。

class MoneyFormatter extends TextInputFormatter {
  MoneyFormatter({this.maxLength = 30, this.decimals = 0});
  final int maxLength;
  final int decimals;

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    print('---------- newValue.selection.extentOffset : ${newValue.selection.extentOffset}');
    String output = newValue.text.formatAsCurrency(decimals: decimals);
    var result = TextEditingValue(
      text: output,
      //this line doesn't have any effect
      selection: TextSelection.collapsed(offset: output.length),
    );
    print('---------- result.selection.extentOffset : ${result.selection.extentOffset}');
    return result;
  }
}

每增加一个字符，result.selection.extentOffset保持不变，但newValue.selection.extentOffset增加1，尽管实际上返回selection: TextSelection.collapsed(offset: output.length)

extension FormatAsCurrency on String {
  String formatAsCurrency({int decimals = 0, String ifNullReturn}) {
    if (this == null) return ifNullReturn;
    if (this.isEmpty) return '';
    String output = this;
    if (output[0] == '.') output = '0' + output;
    var chunks = this.withoutTrailingDots.split('.');
    output = chunks[0].separatedThousands;
    if (decimals == 0 || chunks.length == 1) return output;
    output += '.' + chunks[1].limitLengthTo(decimals).withoutTrailingZeros;
    return output;
  }
}

我知道在www.example.com上还有其他的TextInputFormatterpub.dev比如flutter_multi_formatter，我已经试过了所有的TextInputFormatter，问题还是一样。

flutter

来源：https://stackoverflow.com/questions/64213551/backspace-doesnt-work-correctly-with-textinputformatter

3条答案

按热度按时间

jvidinwx1#

在正则表达式中使用\B：

TextField(
                            controller: tvMobile,
                            keyboardType: TextInputType.number,
                            inputFormatters: <TextInputFormatter>[
                              FilteringTextInputFormatter.allow(
                                  RegExp(r'[0-9,\b]')), // <-- Use \b in your regex here so backspace works.
                            ],
                            maxLength: 10,
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: "Roboto",
                              fontWeight: FontWeight.w300,
                            ),
                            decoration: InputDecoration(
                              labelStyle: TextStyle(
                                color: Colors.white,
                                fontFamily: "Roboto",
                                fontWeight: FontWeight.w300,
                              ),
                              fillColor: Colors.white,
                              enabledBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.yellow),
                              ),
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.yellow),
                              ),
                              hintText: 'Mobile Number',
                              hintStyle: TextStyle(
                                color: Colors.grey,
                                fontFamily: "Roboto",
                                fontWeight: FontWeight.w300,
                              ),
                            ),
                          ),

赞(0）回复(0）举报 2023-04-22

zi8p0yeb2#

当我尝试将格式化程序与键盘类型数字一起使用时，我发现了退格问题。光标倾向于跳过每个退格的字符。如果我使用键盘类型文本，它可以正常工作。

赞(0）回复(0）举报 2023-04-22

kkbh8khc3#

如果你使用的是focusNode，不要使用focusNode到unfocus。相反，你可以用途：