升级Flutter后全屏应用键盘下方出现异常白条该如何解决
问题根因
该问题为Flutter 3.10及以上版本Android平台的适配变更导致:全屏模式下,Flutter新版的Insets计算逻辑会将键盘弹出后底部的空白区域识别为系统导航栏的预留占位,最终渲染出你观察到的白色条带。
问题效果示意:
修复方案
- 方案1:单页面适配(无页面抬升需求可选)
给对应页面的Scaffold组件添加resizeToAvoidBottomInset属性,设置为false即可直接消除白条。如果需要保留页面内容随键盘上浮的交互效果,不要使用该方案。
代码示例:Scaffold( resizeToAvoidBottomInset: false, // 原有其他配置保持不变 ) - 方案2:全局适配(保留键盘抬升逻辑)
在根组件MaterialApp外层包裹MediaQuery.removePadding,手动移除底部的系统预留padding,该配置全局生效,不会干扰键盘弹出后的页面抬升逻辑。
代码示例:@override Widget build(BuildContext context) { return MediaQuery.removePadding( context: context, removeBottom: true, child: MaterialApp( // 原有其他配置保持不变 ), ); } - 方案3:原生层适配
若你在Android原生层配置了全屏延伸属性,可在MainActivity的onCreate生命周期中添加如下配置,修正系统UI的占位计算逻辑:override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) window.decorView.systemUiVisibility = ( View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN ) }
内容的提问来源于stack exchange,提问作者Arash
相关产品推荐
相关产品推荐

