Flutter：存在ListView滚动时如何禁用可扩展TextField的内部滚动

1. 基础自动扩展TextField配置 #

首先配置TextField基础属性，让它可以跟随内容自动撑开高度，从根源避免内部滚动：

TextField(
  minLines: 1, // 自定义初始最小展示行数
  maxLines: null, // 不限制最大行数，高度随文本内容自动扩展
  decoration: const InputDecoration(
    border: InputBorder.none,
    hintText: "请输入内容"
  ),
  // 不要设置physics为NeverScrollableScrollPhysics，会导致长按拖动光标失效
)

按上述配置后，只要不给TextField套固定高度的父容器，它的高度会完全匹配文本内容，本身不会生成滚动区域，自然不会触发内部滚动事件。

2. 父ListView配置 #

父ListView直接绑定统一的scrollController即可，无需额外特殊处理：

final ScrollController _scrollController = ScrollController();

@override
Widget build(BuildContext context) {
  return ListView(
    controller: _scrollController,
    children: [
      // 其他列表项组件
      // ...
      // 可扩展TextField，外层不要加固定高度约束
      TextField(
        minLines: 1,
        maxLines: null,
      ),
      // 其他列表项组件
      // ...
    ],
  );
}

3. 限高场景兼容方案 #

如果需要限制TextField最大展示高度（比如最多展示5行，超过后整体页面滚动），同时保留光标拖动、文本选中能力，可按如下方案实现：

GestureDetector(
  // 拦截垂直滚动手势，透传给父ListView的滚动控制器
  onVerticalDragUpdate: (details) {
    _scrollController.jumpTo(_scrollController.offset - details.delta.dy);
  },
  child: TextField(
    minLines: 1,
    maxLines: 5, // 自定义最大展示行数，超过后高度不再增长
    onTap: () {
      // 可选：点击输入框时自动滚动到输入框完全可见区域
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _scrollController.position.ensureVisible(
          context.findRenderObject()!,
          alignment: 0.5,
          duration: const Duration(milliseconds: 200),
        );
      });
    },
  ),
)

该方案不会干扰TextField原生的光标拖动、文本选中交互逻辑，完全匹配Instagram发帖页的输入框交互效果。

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