iOS设备键盘弹出时Snackbar显示异常问题求助

问题根源 #

iOS系统的键盘视图调整逻辑和Android存在差异，默认情况下SnackBar不会自动避开弹出的键盘，导致出现被遮挡或显示位置偏移的问题。

具体解决方案 #

1. 设置浮动SnackBar并适配键盘高度

给SnackBar添加浮动行为，同时通过MediaQuery获取当前键盘高度，设置底部边距让SnackBar自动避开键盘区域：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text(loginResponse.message),
    behavior: SnackBarBehavior.floating,
    margin: EdgeInsets.only(
      bottom: MediaQuery.of(context).viewInsets.bottom,
      left: 16,
      right: 16,
      top: 8,
    ),
  ),
);

说明：MediaQuery.of(context).viewInsets.bottom会实时获取当前键盘的高度，设置margin后，SnackBar会固定显示在键盘上方，不会被遮挡。

2. 确认Scaffold的视图调整属性

检查当前页面的Scaffold组件，确保resizeToAvoidBottomInset未被设置为false（默认值为true），这个属性控制页面是否随键盘上移：

Scaffold(
  resizeToAvoidBottomInset: true,
  // 页面其他内容
)

如果该属性被设为false，页面不会随键盘上移，SnackBar的位置自然会被键盘影响。

3. 延迟显示SnackBar（可选）

如果是键盘弹出后立即触发SnackBar显示，可能出现位置计算偏差，可延迟几百毫秒再显示：

Future.delayed(const Duration(milliseconds: 300), () {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('An error occurred: $e')),
  );
});

适配后的代码示例 #

以你的登录方法为例，修改后的错误提示部分如下：

} else {
  final errorData = jsonDecode(response.body);
  final errorMessage = errorData['message'] ?? '登录失败';
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(errorMessage),
      behavior: SnackBarBehavior.floating,
      margin: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
        left: 16,
        right: 16,
      ),
    ),
  );
}

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