Flutter安卓聊天页面唤起键盘时出现异常弹跳问题求助

针对Android Pixel 7实体设备上聊天页面聚焦底部输入框时出现的布局弹跳异常（模拟器及iOS无此问题，推测与系统更新相关），以下是几个针对性修复方案：

方案1：手动控制resizeToAvoidBottomInset属性 #

当前Scaffold的resizeToAvoidBottomInset: true可能与输入法动画时序不匹配，改为通过焦点状态手动控制：

1. 在ChatScreenState中添加状态变量：

bool _isKeyboardVisible = false;

2. 在initState中添加焦点监听：

@override
void initState() {
  super.initState();
  _textController.addListener(() {
    setState(() {
      _isTextFieldEnabled = _textController.text.trim().isNotEmpty;
    });
  });
  // 监听焦点变化控制键盘可见状态
  _focusNode.addListener(() {
    setState(() {
      _isKeyboardVisible = _focusNode.hasFocus;
    });
  });
}

3. 修改Scaffold的对应属性：

return Scaffold(
  resizeToAvoidBottomInset: _isKeyboardVisible,
  // 其他原有代码不变
);

方案2：调整SafeArea与输入框容器的嵌套关系 #

原布局中SafeArea包裹容器的方式可能引发布局计算波动，改为将SafeArea嵌套在容器内部：

修改_buildBottomInputField方法：

Widget _buildBottomInputField() {
  return Container(
    constraints: const BoxConstraints(minHeight: 48),
    width: double.infinity,
    decoration: const BoxDecoration(
      border: Border(
        top: BorderSide(color: Color(0xFFE5E5EA)),
      ),
    ),
    child: SafeArea(
      bottom: true,
      child: Stack(
        children: [
          TextField(
            // 输入框原有代码不变
            focusNode: _focusNode,
            controller: _textController,
            maxLines: null,
            textAlignVertical: TextAlignVertical.top,
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: const EdgeInsets.only(
                right: 42,
                left: 16,
                top: 18,
              ),
              hintText: 'Message',
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: BorderRadius.circular(8.0),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: BorderRadius.circular(8.0),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: IconButton(
              icon: Icon(
                Icons.send,
                color: _isTextFieldEnabled
                    ? const Color(0xFF007AFF)
                    : const Color(0xFFBDBDC2),
              ),
              onPressed: _isTextFieldEnabled ? _sendMessage : null,
            ),
          ),
        ],
      ),
    ),
  );
}

方案3：手动处理键盘弹出时的滚动逻辑 #

由于使用了reverse: true的ListView，系统自动滚动可能引发弹跳，通过监听键盘高度变化手动控制滚动：

1. 添加依赖：flutter_keyboard_visibility: ^5.4.0

2. 在ChatScreenState的initState中添加键盘监听：

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

@override
void initState() {
  super.initState();
  // 原有监听代码不变
  KeyboardVisibilityController().onChange.listen((bool visible) {
    if (visible && _scrollController.hasClients) {
      // 延迟执行，等待键盘动画稳定
      Future.delayed(const Duration(milliseconds: 100), () {
        _scrollController.jumpTo(0.0);
      });
    }
  });
}

3. 修改ListView的物理滚动属性，禁用自动调整：

ListView.separated(
  reverse: true,
  physics: const ClampingScrollPhysics(),
  controller: _scrollController,
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 20),
  separatorBuilder: (_, __) => const SizedBox(height: 12),
  itemCount: _chatList.length,
  itemBuilder: (context, index) {
    return _Bubble(chat: _chatList[index]);
  },
)

方案4：升级Flutter稳定版 #

该问题大概率是Flutter框架与Android最新系统的兼容性问题，升级Flutter到最新稳定版，官方可能已修复此类布局适配异常。

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