如何在 Flutter 上向 TextField 添加行号?

Question

我正在尝试向 Flutter 上的文本字段添加行号，就像在任何文本编辑器上一样。我有溢出到下一行的文本，所以我想显示行的开始和结束位置。

我想到的第一种方法是将屏幕分成两列，一列用于左侧的行号，另一列用于文本字段的右侧。但是，由于屏幕尺寸差异，我不知道什么时候会溢出一条线。

有没有更正式的方法可以做到这一点？

Answer 1

首先，初始化一个List of TextField和一个currentLine整数变量。文本字段必须包含名为textInputAction和onEditingComplete的属性。因此，每次按 Enter 时，都会认为当前文本字段已完成，创建一个新的文本字段并将其添加到List of TextField并将焦点移动到新的文本字段。行号将来自每个文本字段inputDecoration，值将来自currentLine变量。curentLine++也跑进了onEditingComplete.

Answer 2

看看这篇关于LineMetrics的文章。

如您所见，这为您提供了有关渲染文本行的元数据列表。结合使用行号和hardBreak属性，可以计算要在左侧列中显示的行号。

Answer 3

你可以使用 TextSelection((

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

获取文本中的numberOfLines，计数和显示每一行。