Question

我在Flutter app中渲染<Text>节点，如：

We have total ${_summary['bookCount']} books.

通过远程API检索

_summary，bookCount是返回的JSON字段之一。通常超过1,000。

如果我显示这样的书数，那就是普通的1234。我想将其显示为1,234。

目前，我必须使用某些格式化程序手动修改该字段，但这很麻烦。

我正在寻找类似的东西：

We have total ${myNumberFormat(_summary['bookCount'])} books.

语法，其中 myNumberFormat 是一个函数。

在我之前的PHP和Twig编程中，可以使用过滤器完成。

非常感谢您的意见。

更新

@拉朱苦味

这个解决方案是我所知道的，绝对正确。我正在寻找的是内联＆＃34;过滤器＆＃34;。

通过这个解决方案，我不喜欢的一些事情，其中最重要的是，我必须将我的一行文本分成几个部分： We have {XXX} books, accumulating to {YYY} pages, and {ZZZ} word counts. 此句子至少会被分为7个部分，以便每个数字文本部分可以通过formatter格式化，然后包裹在周围的<Text>中。

我试图看看是否有更简单明了的方法。

Answer 1

有一个用于格式化数字的Dart包，Dart intl package。要使用该包，请将以下行添加到Dart依赖项：pubspec.yaml文件：

  intl: ">=0.14.0"

以下是我的依赖项与行的相似之处：

dependencies:
  flutter:
    sdk: flutter

  intl: ">=0.14.0"

在IntelliJ中单击 packages get ，或从命令行运行flutter packages get。

确保您的班级导入intl包：

import 'package:intl/intl.dart';

在您的代码中，您可以使用NumberFormat类进行格式化：

  final formatter = new NumberFormat("#,###");
  new Text(formatter.format(1234)), // formatted number will be: 1,234

完整的有状态小部件示例：

class NumberFormatExample extends StatefulWidget {
  @override
  _NumberFormatExampleState createState() => new _NumberFormatExampleState();
}

class _NumberFormatExampleState extends State<NumberFormatExample> {
  final formatter = new NumberFormat("#,###");
  int theValue = 1234;

  @override
  Widget build(BuildContext context) {
    return new Text(formatter.format(theValue));
  }
}

Answer 2

以上答案的更新：

首先将intl包添加到pubspec.yaml之后的flutter sdk文件中（如下所示）：

    dependencies:
      flutter:
        sdk: flutter
      intl: ^0.16.0

如果您使用flutter_localizations，则intl必须在此之上。

现在您可以使用NumberFormat类。

一些例子：

print(NumberFormat.currency().format(123456)); // USD123,456.00

print(NumberFormat.currency(locale: 'eu').format(123456)); // 123.456,00 EUR

print(NumberFormat.currency(name: 'EURO').format(123456)); // EURO123,456.00

print(NumberFormat.currency(locale: 'eu', symbol: '?').format(123456)); // 123.456,00 ?

print(NumberFormat.currency(locale: 'eu', decimalDigits: 3).format(123456)); // 123.456,000 EUR

print(NumberFormat.currency(locale: 'eu', customPattern: '\u00a4 #,##.#').format(123456)); // EUR 12.34.56,00

参考与更多信息：https://www.woolha.com/tutorials/dart-formatting-currency-with-numberformat#supported-locales
NumberFormat类Dart API：https://api.flutter.dev/flutter/intl/NumberFormat-class.html

Answer 3

在for循环中，您可以尝试：

PKPushRegistry

操作格式：

Text('Index ${i}'), //Index 0

带小数点：

Text('Total: \$${price * quantity}'),  //$20

Answer 4

有一个 Flutter 包，它允许您使用预定义的模式格式化文本输入。首先将以下行添加到 Dart 依赖项：pubspec.yaml 文件：

    pattern_formatter: ^1.0.2```
then import it in your dart code
    import 'package:pattern_formatter/pattern_formatter.dart';

Example: Thousand group
    TextField(
      keyboardType: TextInputType.number,
      inputFormatters: [
      ThousandsFormatter()
    ],
   )

Decimal Number
    TextField(
     keyboardType: TextInputType.number,
     inputFormatters: [
     ThousandsFormatter(allowFraction: true)
  ],
 )

Card number grouping 

    TextField(
      keyboardType: TextInputType.number,
      inputFormatters: [
      CreditCardFormatter(),
    ],
   )

Date format

    TextField(
      keyboardType: TextInputType.number,
      inputFormatters: [
      DateInputFormatter(),
  ],
)

Answer 5

使用 intl 包，

double number = 1234;
String output = NumberFormat.decimalPattern().format(number); // 1,234

我可以在<text>中呈现之前格式化数字

5 个答案: