Flutter中如何等待键盘完全弹出后再执行滚动操作？

核心原因 #

键盘弹出自带150~300ms的过渡动画，焦点获取、键盘可见状态变更的回调都会在动画启动时触发，此时页面底部尚未完成偏移，滚动逻辑基于未被键盘顶起的页面计算位置，就会出现偏移错误。

推荐解决方案（无需第三方库） #

通过监听页面底部viewInsets的变化，等键盘完全弹出、布局稳定后再执行滚动，适配所有设备的键盘动画时长。

前提配置 #

确保包裹列表的Scaffold开启resizeToAvoidBottomInset配置（默认即为true，若手动修改过需改回），保证页面会被键盘顶起重新布局。

完整代码实现 #

// 点击回复按钮的回调
void onTapReply(int targetCommentIndex, FocusNode replyInputFocus) async {
  // 1. 唤起键盘
  replyInputFocus.requestFocus();

  // 2. 等待键盘动画结束、布局稳定
  double? preBottomInset;
  int stableFrameCount = 0;
  int totalWaitMs = 0;
  const maxWaitMs = 500; // 最大等待时长，避免极端情况卡住
  const frameInterval = Duration(milliseconds: 16); // 约等于1帧的时长

  while (stableFrameCount < 2 && totalWaitMs < maxWaitMs) {
    await Future.delayed(frameInterval);
    totalWaitMs += frameInterval.inMilliseconds;
    final currentBottomInset = MediaQueryData.fromView(
      WidgetsBinding.instance.platformDispatcher.views.first
    ).viewInsets.bottom;

    // 连续2帧底部inset不变且大于0，说明键盘完全弹出、布局稳定
    if (currentBottomInset == preBottomInset && currentBottomInset > 0) {
      stableFrameCount++;
    } else {
      stableFrameCount = 0;
      preBottomInset = currentBottomInset;
    }
  }

  // 3. 执行滚动逻辑
  await yourScrollController.scrollToIndex(
    targetCommentIndex,
    preferPosition: AutoScrollPosition.middle, // 按需调整滚动到目标区域的位置
    duration: const Duration(milliseconds: 300),
  );
}

替代方案（基于flutter_keyboard_visibility库调整） #

之前使用该库无效果是因为回调触发在动画启动阶段，只需在收到键盘显示回调后增加对应延迟即可：

// 全局存储待滚动的评论下标，避免重复触发
int? pendingScrollIndex;

// 键盘状态变更回调
void onKeyboardVisibilityChanged(bool isVisible) {
  if (isVisible && pendingScrollIndex != null) {
    // 延迟300ms等待键盘动画结束
    Future.delayed(const Duration(milliseconds: 300), () {
      yourScrollController.scrollToIndex(pendingScrollIndex!);
      pendingScrollIndex = null;
    });
  }
}

// 点击回复按钮的逻辑
void onTapReply(int targetCommentIndex, FocusNode replyInputFocus) {
  pendingScrollIndex = targetCommentIndex;
  replyInputFocus.requestFocus();
}

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