Flutter自定义TextInputFormatter实现金额输入框

在Flutter中，你可以通过自定义TextInputFormatter来实现金额输入框。以下是一个简单的例子，它限制用户只能输入数字，并且可以在输入时自动添加逗号分隔符。

import 'package:flutter/services.dart';
 
class MoneyInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 忽略非数字输入
    if (!newValue.text.replaceAll(',', '').runes.every(isDigit)) {
      return oldValue;
    }
 
    // 添加逗号分隔符
    final String newText = newValue.text.replaceAll(RegExp(r'[^0-9]'), '');
    var parts = newText.split(',');
    var integerPart = parts.first;
    var decimalPart = parts.length > 1 ? '.' + parts.last : '';
    var newIntegerPart = '';
 
    for (var i = integerPart.length; i > 0; i--) {
      newIntegerPart = integerPart.substring(0, i) +
          (i - 3 > 0 ? ',' : '') +
          newIntegerPart;
    }
 
    return new TextEditingValue(
      text: newText.isEmpty ? '' : '$newIntegerPart$decimalPart',
      selection: new TextSelection.collapsed(offset: newText.length),
    );
  }
}
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextField(
            inputFormatters: [MoneyInputFormatter()],
          ),
        ),
      ),
    );
  }
}

在这个例子中，MoneyInputFormatter类重写了formatEditUpdate方法，以确保只有数字可以输入，并且在数字之间插入逗号分隔符。当用户尝试输入非数字字符时，输入将被忽略，并且保持旧的输入值。在主函数main中，你可以看到如何在TextField中使用这个自定义的TextInputFormatter。