Flutter: How to Get the Number of Text Lines

问题:

How to Get the Number of Text Lines In our Flutter project, we need to determine if the number of lines of text exceeds 3, then we will display a prompt message. How can we use the code to implement it?

回答1:

If you simply want to check for how many newlines the text contains, you can do a simple

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

However, I guess you're more interested in the number of lines that are actually being displayed visually. Here, things get a little more complicated, because you need to know the available space (the BoxConstraints) in order to calculate how many lines the text needs. To do that, you can use a LayoutBuilder to delay the widget building and a TextPainter to do the actual calculation:

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);
  }
});

I extracted some of the code from the auto_size_text pub package, which might also be interesting to you: It sizes its text so it fits in the given space.

Anyhow, be careful when displaying the prompt: Your widget's build method may be called several times per second, resulting in multiple prompts being displayed simultaneously.

回答2:

If you have a TextPainter object and you have already called layout, then you can get the number of lines from the LineMetrics.

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

Here is an example:

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

print(numberOfLines); // 4

Read more about LineMetrics here.

Note: This is a complete rewrite now that LineMetrics is available. See the edit history for the old answer.

回答3:

It is now easy to find the number of lines in a paragraph:

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

Notes

• computeLineMetrics must be called after layout.
• This change is current as of the latest master branch in the Flutter repo. I don't know how long it will take to get into the stable channel.
• I had another answer which I am keeping for historical purposes because I need to link to it in an explanation of the change.