web-dev-qa-db-fra.com

Puis-je formater un nombre avant qu'il ne soit rendu dans <Texte>

Je rend un <Text> nœud dans l'application Flutter quelque chose comme:

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

_summary est récupéré via une API distante et bookCount est l'un des champs JSON renvoyés. Il est normalement supérieur à 1 000.

Si j'affiche le nombre de livres comme ça, c'est un simple 1234. Je voudrais le faire apparaître comme 1,234.

Actuellement, je dois modifier manuellement ce champ à l'aide d'un formateur, mais c'est lourd.

Je cherche quelque chose comme:

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

grammaire, où myNumberFormat est une fonction.

Dans ma programmation précédente en PHP et Twig, cela peut être fait avec un filtre.

J'apprécie beaucoup votre contribution.

Mise à jour

@ raju-bitter

Cette solution est ce que je sais et est absolument correcte. Ce que je recherche, c'est un "filtre" en ligne.

Avec cette solution, quelques choses que je n'aime pas, la plupart étant que, je dois diviser ma seule ligne de texte en plusieurs segments: We have {XXX} books, accumulating to {YYY} pages, and {ZZZ} Word counts. Cette phrase sera divisée en 7 parties au moins afin que chaque section de texte numérique puisse être formatée via un formatter puis enveloppée dans un <Text>.

J'essaie de voir s'il existe des moyens plus simples de le faire.

dartflutter
14
TaylorR

Il existe un package Dart pour la mise en forme des nombres, le Dart intl package . Pour utiliser le package, ajoutez la ligne suivante aux dépendances Dart: pubspec.yaml fichier:

  intl: ">=0.14.0"

Voici à quoi ressemblent mes dépendances avec la ligne:

dependencies:
  flutter:
    sdk: flutter

  intl: ">=0.14.0"

Cliquez sur les packages obtiennent dans IntelliJ, ou exécutez flutter packages get depuis la ligne de commande.

Assurez-vous que votre classe importe le package intl:

import 'package:intl/intl.Dart';

Dans votre code, vous pouvez utiliser la classe NumberFormat pour effectuer la mise en forme:

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

Exemple de widget complet avec état:

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));
  }
}
31
raju-bitter

Dans la boucle, vous pouvez essayer:

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

Format avec opération:

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

Avec point décimal:

Text('\$${cart.totalAmount.toStringAsFixed(2)}'), //2.34
0
Avijit Nagare