Flutter聊天界面TextField被键盘遮挡无法上移问题求助

问题根源 #

• 错误配置了已废弃的resizeToAvoidBottomPadding属性，干扰Scaffold自动适配键盘逻辑
• 消息区域使用硬编码高度计算，键盘弹出后屏幕可用高度变化时，布局不会自动适配
• 整个页面嵌套在SingleChildScrollView中，不符合聊天页「顶部导航固定、中间消息滚动、底部输入框固定」的常规布局逻辑

可行修改方案 #

步骤1：移除Scaffold错误配置 #

删除Scaffold下的这两行配置，resizeToAvoidBottomInset默认值就是true，不需要额外声明，已废弃的resizeToAvoidBottomPadding会干扰正常适配：

// 删除这两行
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,

步骤2：调整页面布局结构 #

重构页面层级，不要把整个页面放在SingleChildScrollView中，改为导航栏固定、中间消息区可滚动、底部输入框固定的结构，用Expanded自动适配剩余高度，不需要硬算容器高度：

@override
Widget build(BuildContext context) {
  print("usuario "+widget.usuario.username);
  print("otor usuario "+widget.otroUsuario.username);

  return Scaffold(
    // 不用加resize相关配置，默认即可
    body: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 顶部导航栏：固定高度60，保持原有代码不变
        Container(
          width: MediaQuery.of(context).size.width,
          height: 60.0,
          color: AppColors.blancoMovMap,
          child: Row(
            children: [
              GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    height: 30,
                    width: 30,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: AppColors.rojoMovMap,
                    ),
                    child: Icon(
                      Icons.arrow_back_rounded,
                      color: Colors.white,
                    ),
                    alignment: Alignment.center,
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Navigator.of(context).pushNamedAndRemoveUntil(
                      '/muro', (Route<dynamic> route) => false);
                },
                child: Container(
                  height: 30,
                  width: 30,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColors.rojoMovMap,
                  ),
                  child: Icon(
                    Icons.home,
                    color: Colors.white,
                  ),
                  alignment: Alignment.center,
                ),
              ),
              SizedBox(
                width: 5,
              ),
              CircleAvatar(
                radius: 25,
                backgroundImage: NetworkImage(
                    widget.otroUsuario.profile_image),
              ),
              SizedBox(
                width: 5,
              ),
              Text("${widget.otroUsuario.username}",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
            ],
          ),
        ),
        // 中间消息区域：用Expanded占满导航和输入框之外的所有空间，内部支持滚动
        Expanded(
          child: SingleChildScrollView(
            reverse: true,
            child: Container(
              color: Colors.amber,
              child: Text("hola"),
              // 后续消息列表直接放在这里即可
            ),
          ),
        ),
        // 底部输入框：固定高度50，保持原有代码不变
        Container(
          color: Colors.green,
          height: 50,
          child: TextField(
            decoration: InputDecoration(
              hintText: "Escribe tu mensaje...",
              hintStyle: TextStyle(color: Colors.black,fontSize: 16)
            ),
          ),
        )
      ],
    ),
  );
}

额外适配建议 #

如果需要在键盘弹出时自动把消息列表滚到最底部，可以给TextField添加onTap回调，点击时触发滚动：

// 先在State中定义滚动控制器
final ScrollController _scrollController = ScrollController();

// 给SingleChildScrollView绑定控制器
SingleChildScrollView(
  controller: _scrollController,
  reverse: true,
  // 其余配置不变
)

// 给TextField添加点击回调
TextField(
  onTap: () {
    // 延迟100ms等键盘完全弹出后滚动到底部
    Future.delayed(const Duration(milliseconds: 100), () {
      _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
    });
  },
  // 其余原有配置不变
)

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