Flutter：如何获取文本行数

Question

如何获取文本行数在Flutter项目中，我们需要确定文本行数是否超过3，然后将显示提示消息。我们如何使用代码来实现它？

Answer 1

更新：这个答案是出于历史目的。请在此处查看我更新的答案以获得更简单的解决方案。

如果您有一个TextPainter对象并且您已经调用了layout，那么您可以通过选择所有内容并调用getBoxesForSelection. 每个框是线的大小。

TextSelection selection = TextSelection(baseOffset: 0, extentOffset: text.length);
List<TextBox> boxes = textPainter.getBoxesForSelection(selection);
int numberOfLines = boxes.length;

下面是一个例子：

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

print(numberOfLines); // 4

不幸的是，如果有双向文本的混合，这将失败：

final text = 'My text line.\nThis ???? makes more boxes.\nAnother line.';

print(numberOfLines); // 6

这可以通过只计算沿着一条边的盒子来解决。如果您注意到上面的数据，则只有四个框的边缘为 0.0。

flutter: TextBox.fromLTRBD(0.0, 0.2, 171.8, 36.0, TextDirection.ltr)
flutter: TextBox.fromLTRBD(0.0, 36.5, 68.4, 72.3, TextDirection.ltr)
flutter: TextBox.fromLTRBD(68.4, 38.2, 111.5, 75.0, TextDirection.rtl)
flutter: TextBox.fromLTRBD(111.5, 36.5, 299.9, 72.3, TextDirection.ltr)
flutter: TextBox.fromLTRBD(0.0, 77.2, 92.2, 113.0, TextDirection.ltr)
flutter: TextBox.fromLTRBD(0.0, 113.2, 179.7, 149.0, TextDirection.ltr)

我希望有一种TextPainter.numberOfLines方法，但我还没有找到。

Answer 2

如果您只想检查文本中包含多少个换行符，则可以执行以下简单操作

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

但是，我想您对视觉上实际显示的行数更感兴趣。在这里，事情变得有些复杂，因为您需要知道可用空间（BoxConstraints）才能计算文本需要多少行。为此，您可以使用LayoutBuilder延迟窗口小部件的构建，并使用a TextPainter进行实际计算：

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

我从auto_size_textpub包中提取了一些代码，这对您来说可能也很有趣：它调整文本大小，使其适合给定的空间。

无论如何，在显示提示时要小心：build每秒可能会多次调用窗口小部件的方法，从而导致同时显示多个提示。

Answer 3

我刚刚得到了这段代码的支持，因此这就是我验证它是否超过最大线的方法

var text="Clita takimata dolor diam magna aliquyam et sed dolores sadipscing. Sed ut 
diam rebum labore sadipscing sit amet, diam labore.";
final span=TextSpan(text:text);
final tp =TextPainter(text:span,maxLines: 3,textDirection: TextDirection.ltr);
tp.layout(maxWidth: MediaQuery.of(context).size.width); // equals the parent screen width
print(tp.didExceedMaxLines);
//false for maxlines 3
//true for maxlines 1

Answer 4

现在很容易找到段落中的行数：

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

笔记

• computeLineMetrics 必须在布局后调用。
• 我有另一个答案，我保留用于历史目的，因为我需要在解释更改时链接到它。

也可以看看

• 颤振线指标