Flutter中如何解决键盘遮挡ListView内底部TextField的问题？

以下是几种实用的解决方案，适配你使用ScreenUtils的场景：

方案1：确保Scaffold开启布局自动调整 #

默认情况下Scaffold的resizeToAvoidBottomInset为true，但明确设置可以避免因ScreenUtils配置导致的异常，确保键盘弹出时自动调整页面布局：

Scaffold(
  resizeToAvoidBottomInset: true, // 强制开启键盘适配
  body: ListView(
    physics: const BouncingScrollPhysics(),
    children: [
      // 你的10个TextField组件
    ],
  ),
)

方案2：用ScrollController+FocusNode实现精准滚动 #

通过监听TextField的聚焦状态，自动滚动到当前输入框位置，彻底解决遮挡问题：

1. 在页面State类中定义控制器和焦点节点：

class _FormFieldState extends State<FormField> {
  final ScrollController _scrollController = ScrollController();
  late List<FocusNode> _focusNodes;

  @override
  void initState() {
    super.initState();
    // 初始化10个焦点节点，对应每个TextField
    _focusNodes = List.generate(10, (_) => FocusNode());
    // 给每个焦点节点添加聚焦监听
    for (int i = 0; i < _focusNodes.length; i++) {
      _focusNodes[i].addListener(() {
        if (_focusNodes[i].hasFocus) {
          // 延迟滚动，确保键盘完全弹出
          Future.delayed(const Duration(milliseconds: 300), () {
            _scrollController.animateTo(
              // 按每个TextField高度计算偏移，示例为60.0，可根据实际调整
              i * 60.0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeOut,
            );
          });
        }
      });
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    // 释放所有焦点节点
    for (var node in _focusNodes) node.dispose();
    super.dispose();
  }

2. 绑定到ListView和TextField：

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: true,
    body: ListView(
      controller: _scrollController, // 绑定滚动控制器
      physics: const BouncingScrollPhysics(),
      children: List.generate(10, (index) {
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
          child: TextField(
            focusNode: _focusNodes[index], // 绑定对应焦点节点
            decoration: InputDecoration(
              hintText: "字段 ${index + 1}",
              border: const OutlineInputBorder(),
            ),
          ),
        );
      }),
    ),
  );
}

方案3：添加动态底部padding #

通过MediaQuery获取键盘高度，给ListView添加动态底部内边距，确保输入框不被遮挡：

Scaffold(
  body: Padding(
    // 随键盘弹出自动调整底部padding
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    child: ListView(
      physics: const BouncingScrollPhysics(),
      children: [
        // 你的TextField组件
      ],
    ),
  ),
)

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