如何在 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上的文本字段添加行號，就像在任何文本編輯器上一樣。 我的文本溢出到下一行，因此我想顯示行的開始和結束位置。

我想到的第一種方法是將屏幕分為兩列，一列用於左側的行號，一列用於文本字段的右行。 但是，由於屏幕大小的差異，我不知道一行何時會溢出。

還有其他更正式的方法嗎？