web-dev-qa-db-fra.com

Flutter: comment obtenir le nombre de lignes de texte

Comment obtenir le nombre de lignes de texte Dans notre projet Flutter, nous devons déterminer si le nombre de lignes de texte dépasse 3, puis nous afficherons un message d'invite. Comment pouvons-nous utiliser le code pour l'implémenter?

dartflutterflutter-layout
8
Coding24h

Si vous souhaitez simplement vérifier le nombre de sauts de ligne contenus dans le texte, vous pouvez

final numLines = '\n'.allMatches(yourText).length + 1;

Cependant, je suppose que vous êtes plus intéressé par le nombre de lignes qui sont réellement affichées visuellement. Ici, les choses deviennent un peu plus compliquées, car vous devez connaître l'espace disponible (le BoxConstraints) afin de calculer le nombre de lignes dont le texte a besoin. Pour ce faire, vous pouvez utiliser un LayoutBuilder pour retarder la construction du widget et un TextPainter pour effectuer le calcul réel:

return LayoutBuilder(builder: (context, size) {
  final span = TextSpan(text: yourText, style: yourStyle);
  final tp = TextPainter(text: span, maxLines: 3);
  tp.layout(maxWidth: size.maxWidth);

  if (tp.didExceedMaxLines) {
    // The text has more than three lines.
    // TODO: display the Prompt message
    return Container(color: Colors.red);
  } else {
    return Text(yourText, style: yourStyle);
  }
});

J'ai extrait une partie du code du auto_size_text pub package , ce qui pourrait également vous intéresser: il redimensionne son texte pour qu'il tienne dans l'espace donné.

Quoi qu'il en soit, soyez prudent lors de l'affichage de l'invite: la méthode build de votre widget peut être appelée plusieurs fois par seconde, ce qui entraîne l'affichage simultané de plusieurs invites.

10
Marcel

Si vous avez un objet TextPainter et que vous avez déjà appelé layout, vous pouvez obtenir le nombre de lignes à partir de LineMetrics.

List<LineMetrics> lines = textPainter.computeLineMetrics();
int numberOfLines = lines.length;

Voici un exemple:

final text = 'My text line.\nThis line wraps to the next.\nAnother line.';

enter image description here

print(numberOfLines); // 4

En savoir plus sur LineMetricsici .

Remarque: Ceci est une réécriture complète maintenant que LineMetrics est disponible. Voir l'historique des modifications pour l'ancienne réponse.

4
Suragch

Il est maintenant facile de trouver le nombre de lignes dans un paragraphe:

List<ui.LineMetrics> lines = textPainter.computeLineMetrics();
int numberOfLines = lines.length;

Remarques

  • computeLineMetrics doit être appelé après la mise en page.
  • Cette modification est en cours à compter de la dernière branche principale du référentiel Flutter. Je ne sais pas combien de temps il faudra pour entrer dans le canal stable.
  • J'ai eu une autre réponse que je garde à des fins historiques parce que je dois y faire un lien dans une explication du changement.
2
Suragch