Flutter自定义Widget打开快于键盘关闭导致屏幕溢出问题求解

问题根源 #

chatFocusNode.unfocus()是异步操作，调用后系统需要200-300ms完成键盘收起动画，你同步修改showCustomTab会触发两个视图同时存在的时间窗口，导致溢出报错。

可行解决方案（从易到难） #

方案1：兜底解决溢出报错（成本最低）

将包含输入框、自定义tab的底部父布局用SingleChildScrollView包裹，关闭滚动即可：

SingleChildScrollView(
  physics: const NeverScrollableScrollPhysics(),
  child: // 你的原有底部布局
)

就算两者同时显示，也只会被正常容纳不会触发溢出异常，用户完全无感知。

方案2：固定延迟等待键盘收起

修改点击逻辑，切到自定义tab前先等待键盘收起动画完成：

// 替换你原有的GestureDetector的onTap逻辑
onTap: () {
  menuProvider.closeAll();
  cursorPosition = chatTextEditingController.selection;
  // 处理从键盘切到自定义tab的场景
  if (!showCustomTab && chatFocusNode.hasFocus) {
    chatFocusNode.unfocus();
    // 等待系统键盘收起动画完成
    Future.delayed(const Duration(milliseconds: 300), () {
      if (!mounted) return;
      setState(() {
        showCustomTab = true;
        FocusScope.of(context).requestFocus(unUsed);
      });
    });
  } else {
    // 其他场景保持原有逻辑
    setState(() {
      if (chatFocusNode.hasFocus) {
        chatFocusNode.unfocus();
      }
      showCustomTab = !showCustomTab;
      if (showCustomTab) {
        FocusScope.of(context).requestFocus(unUsed);
      } else {
        FocusScope.of(context).requestFocus(chatFocusNode);
      }
    });
  }
}

方案3：监听键盘状态精准触发（适配所有设备）

通过监听页面尺寸变化判断键盘是否完全收起，实现无兼容问题的时序控制：

1. 让你的State类混入WidgetsBindingObserver，添加监听逻辑：

class _YourPageState extends State<YourPage> with WidgetsBindingObserver {
  // 原有变量
  bool _waitKeyboardDismiss = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    if (_waitKeyboardDismiss && keyboardHeight == 0) {
      _waitKeyboardDismiss = false;
      setState(() {
        showCustomTab = true;
        FocusScope.of(context).requestFocus(unUsed);
      });
    }
  }

2. 修改点击逻辑：

onTap: () {
  menuProvider.closeAll();
  cursorPosition = chatTextEditingController.selection;
  if (!showCustomTab && chatFocusNode.hasFocus) {
    chatFocusNode.unfocus();
    _waitKeyboardDismiss = true;
  } else {
    setState(() {
      if (chatFocusNode.hasFocus) {
        chatFocusNode.unfocus();
      }
      showCustomTab = !showCustomTab;
      if (showCustomTab) {
        FocusScope.of(context).requestFocus(unUsed);
      } else {
        FocusScope.of(context).requestFocus(chatFocusNode);
      }
    });
  }
}

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