Flutter嵌套ListView下键盘遮挡TextField问题求解（resizeToAvoidBottomInset为false）

问题根因 #

你在Scaffold中设置了resizeToAvoidBottomInset: false后，Flutter原生的键盘弹出自动避让输入框逻辑会被禁用，系统不会主动调整页面布局偏移，同时你页面存在多层嵌套的ListView，默认的滚动联动逻辑失效，最终导致输入框被键盘遮挡。

解决方案 #

你可以通过监听焦点变化和键盘高度，手动控制外层ListView滚动到对应输入框的位置，实现方案如下：

步骤1：给输入框绑定FocusNode，监听焦点状态 #

给表单内每个TextField都绑定独立的FocusNode，用于判断当前聚焦的输入框位置：

// 示例：SignInForm内的TextField配置
final FocusNode _emailFocus = FocusNode();
final FocusNode _pwdFocus = FocusNode();

//  TextField组件配置
TextField(
  focusNode: _emailFocus,
  // 其余属性
)

步骤2：监听键盘高度变化，计算滚动偏移 #

在外层页面（比如SignInPageMobile）中监听键盘高度，当输入框聚焦时，计算需要滚动的偏移量，手动触发外层ListView滚动：

class SignInPageMobile extends StatefulWidget {
  const SignInPageMobile({Key? key}) : super(key: key);

  @override
  State<SignInPageMobile> createState() => _SignInPageMobileState();
}

class _SignInPageMobileState extends State<SignInPageMobile> with WidgetsBindingObserver {
  final ScrollController _outerScrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 获取键盘高度
    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    if (keyboardHeight == 0) {
      // 键盘收起，不需要处理
      return;
    }
    // 获取当前聚焦的FocusNode
    final focusedNode = FocusManager.instance.primaryFocus;
    if (focusedNode == null) return;
    // 获取聚焦输入框的位置
    final renderBox = focusedNode.context?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    // 计算输入框底部距离屏幕底部的位置
    final inputBottomPos = renderBox.localToGlobal(Offset.zero).dy + renderBox.size.height;
    // 计算键盘顶部距离屏幕底部的位置
    final keyboardTopPos = MediaQuery.of(context).size.height - keyboardHeight;
    // 如果输入框底部在键盘顶部下方，就需要滚动
    if (inputBottomPos > keyboardTopPos) {
      final offset = inputBottomPos - keyboardTopPos + 20; // 加20是预留边距
      _outerScrollController.animateTo(
        _outerScrollController.offset + offset,
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _outerScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ListView(
        controller: _outerScrollController, // 绑定滚动控制器
        children: const [
          // 其余组件
          SignInForm(),
        ],
      ),
    );
  }
}

步骤3：复用逻辑到平板/桌面端 #

如果平板和桌面端也有输入框被遮挡的场景，直接把上述滚动监听逻辑复用给对应端的外层ListView即可。

注意事项 #

• 表单内的ListView已经设置了shrinkWrap: true和ClampingScrollPhysics，不会和外层滚动冲突，不需要额外处理内部滚动。
• 该方案不会修改Scaffold原有尺寸，完全兼容flutter_screenutil的适配逻辑。

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