我希望能够显示在 TextFormField 中输入的值NumberFormat('###,##0.00', 'en_US')
。
转换没有问题,但我formattedPrice
在 TextFormField 中显示 的值时遇到问题。我还想将 TextFormField 的默认值设置为'0.00'
. 在我下面的示例代码中,TextFormField 将输入限制为只有一个十进制符号/分隔符和两个十进制值。
.00
当输入过程中 TextFormField 值中不存在小数时,我不会显示小数,但我希望在输入值时放置两个小数位格式。
键入时显示的 TextFormField 值 | 输入时显示的 TextFormField 值 |
---|---|
123 | 123.00 |
123.5 | 123.50 |
123.54 | 123.54 |
12,345 | 12,345.00 |
12,345.6 | 12,345.60 |
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _subscriptionFormKey = GlobalKey<FormState>();
final _subscriptionPriceController = TextEditingController();
NumberFormat numFormat = NumberFormat('###,###.00', 'en_US');
NumberFormat numSanitizedFormat = NumberFormat('en_US');
var currency = 'USD';
void _validate() {
if (_subscriptionFormKey.currentState!.validate()) {}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Form(
key: _subscriptionFormKey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
autofocus: true,
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
],
keyboardType: TextInputType.numberWithOptions(decimal: true),
validator: (cost) {
if (cost == null || cost.isEmpty) {
return 'Empty';
}
return null;
},
textInputAction: TextInputAction.next,
/// TODO TextFormField default value
/// I'd like to be to set '0.00' value by default
controller: _subscriptionPriceController,
decoration: InputDecoration(
hintText: 'Price',
prefixText:
NumberFormat.simpleCurrency(name: currency).currencySymbol,
),
onChanged: (price) {
/// TODO Display [formattedPrice] in TextFormField
var formattedPrice = numFormat.format(double.parse(price));
debugPrint('Formatted $formattedPrice');
var numSanitized = numSanitizedFormat.parse(price);
debugPrint('Sanitized: $numSanitized');
_subscriptionPriceController.value = TextEditingValue(
text: price,
selection: TextSelection.collapsed(offset: price.length),
);
},
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _validate,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
由于@Andrej的建议在使用onFieldSubmitted()
代替onChange()
。我已经用包含的修复程序更新了我的代码。我希望这会帮助其他开发人员因类似问题而被阻止。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _subscriptionFormKey = GlobalKey<FormState>();
final _subscriptionPriceController = TextEditingController();
final NumberFormat numFormat = NumberFormat('###,##0.00', 'en_US');
final NumberFormat numSanitizedFormat = NumberFormat('en_US');
var currency = 'USD';
var defaultPrice = '0.00';
void _validate() {
if (_subscriptionFormKey.currentState!.validate()) {}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Form(
key: _subscriptionFormKey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
autofocus: true,
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}')),
],
keyboardType: TextInputType.numberWithOptions(decimal: true),
validator: (cost) {
if (cost == null || cost.isEmpty) {
return 'Empty';
}
return null;
},
textInputAction: TextInputAction.next,
/// Set TextFormField default value
controller: _subscriptionPriceController..text = defaultPrice,
decoration: InputDecoration(
hintText: 'Price',
prefixText:
NumberFormat.simpleCurrency(name: currency).currencySymbol,
),
onTap: () {
var textFieldNum = _subscriptionPriceController.value.text;
var numSanitized = numSanitizedFormat.parse(textFieldNum);
_subscriptionPriceController.value = TextEditingValue(
/// Clear if TextFormField value is 0
text: numSanitized == 0 ? '' : '$numSanitized',
selection:
TextSelection.collapsed(offset: '$numSanitized'.length),
);
},
onFieldSubmitted: (price) {
/// Set value to 0 if TextFormField value is empty
if (price == '') price = '0';
final formattedPrice = numFormat.format(double.parse(price));
debugPrint('Formatted $formattedPrice');
_subscriptionPriceController.value = TextEditingValue(
text: formattedPrice,
selection:
TextSelection.collapsed(offset: formattedPrice.length),
);
},
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _validate,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
如果我理解正确,您希望在输入文本字段时格式化价格。
如果是,只需将此代码添加到您的TextFormField
:
onFieldSubmitted: (price) {
final formattedPrice = numFormat.format(double.parse(price));
debugPrint('Formatted $formattedPrice');
_subscriptionPriceController.value = TextEditingValue(
text: formattedPrice,
selection:
TextSelection.collapsed(offset: formattedPrice.length),
);
},
要将初始值添加到文本字段:
final _subscriptionPriceController = TextEditingController(text: '0.00');
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句