如何检测Flutter TextField中UI渲染产生的文本换行？

问题背景 #

我有一个简单的Flutter TextField组件，当文本宽度接近屏幕最大宽度时会自动换行，对应的代码如下：

TextEditingController textController = TextEditingController();
TextField(
  controller: textController,
  textInputAction: TextInputAction.done,
  maxLines: null,
  expands: true,
  maxLength: 200,
)

遇到的问题：如何检测textController.text中由UI渲染产生的换行？例如句子“The universe is the greatest mystery known to the human race”在UI中会因宽度限制在“the”和“human”之间换行，但直接输出textController.text找不到\n，该如何通过代码实现检测？

解决方案 #

UI渲染的换行由文本布局规则决定，和文本内容本身无关，无法直接从textController中获取。要检测这类换行，需通过文本布局计算实现，具体步骤如下：

1. 给TextField绑定GlobalKey #

通过GlobalKey可以获取到TextField对应的渲染对象，从而拿到文本布局信息：

final GlobalKey _textFieldKey = GlobalKey();

// 在TextField组件中设置key
TextField(
  key: _textFieldKey,
  controller: textController,
  textInputAction: TextInputAction.done,
  maxLines: null,
  expands: true,
  maxLength: 200,
)

2. 编写检测UI换行的方法 #

通过渲染对象的textLayout属性，遍历每一行的文本范围，即可确定UI换行的位置：

void detectUILineBreaks() {
  final renderObject = _textFieldKey.currentContext?.findRenderObject();
  if (renderObject is RenderEditable) {
    final textLayout = renderObject.textLayout;
    // 遍历所有行，获取每行的文本偏移范围
    for (int i = 0; i < textLayout.lineCount; i++) {
      final line = textLayout.getLineAt(i);
      final startOffset = line.start;
      final endOffset = line.end;
      String lineContent = textController.text.substring(startOffset, endOffset);
      print('第${i+1}行内容：$lineContent');
      
      // 非最后一行的endOffset位置即为UI换行分界点
      if (i != textLayout.lineCount - 1) {
        print('UI换行位置：偏移量$endOffset，前后字符分别为 "${textController.text[endOffset-1]}" 和 "${textController.text[endOffset]}"');
      }
    }
  }
}

注意事项 #

• 必须在Widget完成渲染后调用该方法，比如在initState中通过WidgetsBinding.instance.addPostFrameCallback触发，或者在用户点击按钮等事件中调用，否则无法获取到有效的渲染对象。
• 如果需要在文本实时变化时检测换行，可以给textController添加监听，但建议添加防抖逻辑，避免频繁计算影响性能。

内容的提问来源于stack exchange，提问作者Mohammed Hamdan