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

Question

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

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

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

Answer 1

首先，初始化一个List of TextField和一个currentLine整数变量。 TextField 必须包含名为textInputAction和onEditingComplete属性。 因此，每次按 Enter 时，都认为当前 TextField 已完成，创建一个新的 TextField 并将其添加到List of TextField ，并将焦点移至新的 TextField。 行号将来自每个 TextField 的inputDecoration ，值将来自currentLine变量。 curentLine++也在onEditingComplete内部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 ，计数并显示每一行。

Answer 4

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

我想到的第一种方法是将屏幕分为两列，一列用于左侧的行号，一列用于文本字段的右行。 但是，由于屏幕大小的差异，我不知道一行何时会溢出。

还有其他更正式的方法吗？