Flutter：ListView随键盘弹出上移失效，滚动功能异常求助

我需要在Flutter中实现类似Telegram等聊天应用的效果：键盘弹出时ListView同步上移避免被遮挡，且ListView能自然上下滚动。但当前代码中，键盘弹出后ListView完全无法正常滚动，请帮忙排查解决。

原代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Keyboard Adjust Example')),
        body: KeyboardAdjustedView(),
      ),
    );
  }
}

class KeyboardAdjustedView extends StatefulWidget {
  @override
  _KeyboardAdjustedViewState createState() => _KeyboardAdjustedViewState();
}

class _KeyboardAdjustedViewState extends State<KeyboardAdjustedView> {
  final TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
              physics: AlwaysScrollableScrollPhysics(),
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Container(
                    color: index % 2 == 0 ? Colors.green : Colors.red,
                    height: 40,
                    width: 500,
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom,
              left: 8.0,
              right: 8.0,
            ),
            child: TextField(
              controller: _textController,
              decoration: InputDecoration(
                labelText: 'input text',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

问题分析 #

核心问题是手动通过MediaQuery.viewInsets.bottom给输入框添加底部padding，同时未正确利用Scaffold的内置键盘适配机制，导致ListView的布局约束被破坏，滚动功能失效。手动添加的padding会干扰Scaffold自动调整body高度的逻辑，使得ListView的可滚动区域计算错误。

修复方案 #

1. 启用Scaffold的自动键盘适配 #

Scaffold默认的resizeToAvoidBottomInset属性为true，它会自动调整body的大小以避开键盘。显式声明该属性可确保逻辑清晰：

Scaffold(
  resizeToAvoidBottomInset: true, // 显式启用自动适配
  appBar: AppBar(title: const Text('Keyboard Adjust Example')),
  body: KeyboardAdjustedView(),
)

2. 移除手动添加的底部padding #

删除输入框Padding中的bottom: MediaQuery.of(context).viewInsets.bottom，避免布局冲突：

Padding(
  padding: const EdgeInsets.only(left: 8.0, right: 8.0, bottom: 8.0),
  child: TextField(
    controller: _textController,
    decoration: const InputDecoration(
      labelText: 'input text',
    ),
  ),
)

3. 优化ListView的宽度设置 #

将ListView子项的width: 500改为width: double.infinity，确保子项适配屏幕宽度，避免横向溢出。

修复后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: const AppBar(title: Text('Keyboard Adjust Example')),
        resizeToAvoidBottomInset: true,
        body: KeyboardAdjustedView(),
      ),
    );
  }
}

class KeyboardAdjustedView extends StatefulWidget {
  @override
  _KeyboardAdjustedViewState createState() => _KeyboardAdjustedViewState();
}

class _KeyboardAdjustedViewState extends State<KeyboardAdjustedView> {
  final TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
              physics: const AlwaysScrollableScrollPhysics(),
              itemCount: 20,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Container(
                    color: index % 2 == 0 ? Colors.green : Colors.red,
                    height: 40,
                    width: double.infinity,
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
            child: TextField(
              controller: _textController,
              decoration: const InputDecoration(labelText: 'input text'),
            ),
          ),
        ],
      ),
    );
  }
}

额外优化（聊天应用专属） #

如果需要实现聊天应用中“键盘弹出时自动滚动到最新消息”的效果，可以添加ScrollController并监听键盘弹出事件：

// 定义ScrollController
final ScrollController _scrollController = ScrollController();

// 在键盘弹出时滚动到底部
void _scrollToBottom() {
  _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}

// 监听焦点变化，调用滚动方法
@override
void initState() {
  super.initState();
  _textController.addListener(() {
    if (_textController.selection.baseOffset > 0) {
      WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());
    }
  });
}

// 将controller绑定到ListView
ListView.builder(
  controller: _scrollController,
  // ...其他属性
)

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