Flutter中键盘覆盖TextField，FocusNode异常问题咨询

针对你遇到的resizeToAvoidBottomInset设为false时输入框被键盘遮挡，设为true时出现多余底部间距的问题，给你几个靠谱的解决方法：

方法一：SingleChildScrollView + 动态padding适配 #

把页面内容放在SingleChildScrollView中，通过监听键盘高度动态调整内容底部的padding，同时确保输入框获取焦点时自动滚动到可视区域：

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final FocusNode _inputFocusNode = FocusNode();
  double _keyboardHeight = 0;

  @override
  void initState() {
    super.initState();
    // 监听键盘高度变化
    WidgetsBinding.instance.addObserver(LifecycleEventHandler(
      onMetricsChanged: () {
        final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
        setState(() => _keyboardHeight = bottomInset > 0 ? bottomInset : 0);
      },
    ));
    // 焦点获取时滚动到输入框
    _inputFocusNode.addListener(() {
      if (_inputFocusNode.hasFocus) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          Scrollable.ensureVisible(context, duration: const Duration(milliseconds: 300));
        });
      }
    });
  }

  @override
  void dispose() {
    _inputFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false, // 保持关闭默认适配
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(bottom: _keyboardHeight),
          child: Column(
            children: [
              // 这里放你的页面其他内容
              const SizedBox(height: 600), // 模拟长内容
              TextField(
                focusNode: _inputFocusNode,
                decoration: const InputDecoration(hintText: "底部输入框"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 监听窗口尺寸变化的工具类
class LifecycleEventHandler extends WidgetsBindingObserver {
  final VoidCallback? onMetricsChanged;

  LifecycleEventHandler({this.onMetricsChanged});

  @override
  void didChangeMetrics() => onMetricsChanged?.call();
}

这个方法既避免了默认适配带来的多余间距，又能保证输入框在键盘弹出时自动上移到可视区域。

方法二：动态调整TextField的底部padding #

如果页面内容不需要滚动，可以直接给TextField所在容器加动态padding，根据焦点状态切换padding值：

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final FocusNode _inputFocusNode = FocusNode();
  double _bottomPadding = 0;

  @override
  void initState() {
    super.initState();
    _inputFocusNode.addListener(() {
      setState(() {
        _bottomPadding = _inputFocusNode.hasFocus 
            ? WidgetsBinding.instance.window.viewInsets.bottom 
            : 0;
      });
    });
  }

  @override
  void dispose() {
    _inputFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Column(
        children: [
          const Expanded(child: Center(child: Text("页面主体内容"))),
          Padding(
            padding: EdgeInsets.only(bottom: _bottomPadding),
            child: TextField(
              focusNode: _inputFocusNode,
              decoration: const InputDecoration(hintText: "底部输入框"),
            ),
          ),
        ],
      ),
    );
  }
}

当输入框获取焦点时，自动加上等于键盘高度的底部padding，让输入框上移到键盘上方；失去焦点时恢复原位置。

方法三：排查布局中的多余间距 #

如果resizeToAvoidBottomInset: true时出现大间距，大概率是页面布局本身有多余的设置：

• 检查是否给Scaffold的body加了固定的底部padding
• 确认是否使用了SafeArea，如果是，尝试给SafeArea设置bottom: false，避免和键盘适配逻辑冲突
• 检查是否存在bottomNavigationBar等组件，这类组件会影响默认的键盘适配计算

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