当用户在 Flutter 中输入时，如何格式化 TextField 中的用户输入？

Question

我正在尝试将用户输入的双精度数（可能没有小数点及其后的数字）显示为格式化值，例如

123456789012.1234

为

12345,67,89,012.1234

，不使用西方编号系统，而是使用印度次大陆编号系统，如图所示。最好不要在 crore 后面加逗号。

使用

intl

包，我可以显示格式化的输出，但我还需要格式化用户在文本输入字段中输入的输入。而我却无法开始工作。

最少的代码：

我编写了以下最少的代码来显示我的问题。在这里，当我输入 123 然后 4 时，逗号出现在正确的位置（即 1,234），但是当我连续输入第五位数字（即 5）时，仅显示 0，这是错误的。

我该如何解决这个问题？

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

final _controller = TextEditingController();

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('intl Formatter With Formatted Text Field'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            onChanged: (value) {
              NumberFormat numberFormat = NumberFormat("#,##,##,###.########");
              final formattedValue =
                  numberFormat.format(double.tryParse(value) ?? 0.0);
              _controller.value = TextEditingValue(
                text: formattedValue,
              );
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

当前代码的问题是输入

,

后该值包含逗号 (

1234

)。当输入下一个字符（例如

5

）时，

1,2345

被传递到

double.tryParse

，无法解析该值，因为它包含逗号，并且解析器仅考虑点（

.

）来分隔小数位。

规避此问题的一个选项是在将值传递给

double.tryParse

之前删除所有逗号，如下所示：

value = value.replaceAll(",", "");

这是 dart.dev 示例。