Flutter TextField每行背景容器与行数不匹配问题求助

核心问题原因 #

1. computeLineMetrics 调用时机过早，TextField未完成布局就获取行信息，导致行数不准确
2. 背景容器的行高与TextField实际行高不一致，引发错位
3. 状态更新不及时，内容变化后未重新计算行信息

具体解决方案 #

1. 正确获取行信息

使用GlobalKey绑定TextField，在布局完成后（或内容变化时）调用computeLineMetrics，确保获取到准确的行数据：

final textFieldKey = GlobalKey<EditableTextState>();
List<LineMetrics> lineMetrics = [];
double lineHeight = 0;

void updateLineMetrics() {
  final renderEditable = textFieldKey.currentState?.renderEditable;
  if (renderEditable != null) {
    lineMetrics = renderEditable.computeLineMetrics();
    lineHeight = lineMetrics.isNotEmpty ? lineMetrics.first.height : 0;
    setState(() {});
  }
}

@override
void initState() {
  super.initState();
  // 布局完成后首次获取行信息
  WidgetsBinding.instance.addPostFrameCallback((_) => updateLineMetrics());
}

2. 用Stack对齐背景与TextField

放弃单独使用ListView，改用Stack将背景容器列表与TextField叠加，确保位置完全对齐：

Stack(
  children: [
    // 行背景列表
    ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: lineMetrics.length,
      itemExtent: lineHeight,
      itemBuilder: (context, index) {
        return Container(
          margin: const EdgeInsets.symmetric(vertical: 2),
          color: Colors.grey[200],
        );
      },
    ),
    // TextField
    TextField(
      key: textFieldKey,
      onChanged: (_) => updateLineMetrics(),
      maxLines: null,
      decoration: const InputDecoration(
        border: InputBorder.none,
        contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 8),
      ),
    ),
  ],
)

3. 关键细节调整

• 保证TextField的contentPadding与背景容器的margin/padding一致，避免错位
• 若TextField需要滚动，给背景ListView和TextField绑定同一个ScrollController，实现同步滚动
• 不要在build方法中直接调用computeLineMetrics，避免频繁触发无效计算

内容的提问来源于stack exchange，提问作者Mohammad Hosseini