开发 | flutter页面布局问题

遇到的问题

在flutter中使用 SafeArea 进行页面布局并且让页面进行全屏展示时会出现当下拉菜单栏时顶部任务栏会出现并挤压页面，导致页面高度变矮，影响页面显示。

  • SafeArea 内部依赖 MediaQuery.of(context).padding 来添加内边距
  • 下拉通知栏时，系统状态栏和底部虚拟导航栏短暂出现，MediaQuery.padding 值发生变化
  • SafeArea 响应这个变化，动态调整 padding，导致页面内容区域忽大忽小
Scaffold(
    resizeToAvoidBottomInset: false,
    body: SafeArea(child: _buildLandscapeView()), // SafeArea
);

解决方案

  • 用 MediaQuery.removePadding 将 top/bottom/left/right 的 padding 全部移除
  • 这样即使系统 UI 短暂出现，页面也不会因为 padding 变化而重新布局
  • 配合 immersiveSticky 模式和 SystemUIChangeCallback 回调，系统栏会以半透明覆盖层形式短暂显示，不影响页面尺寸
Scaffold(
    resizeToAvoidBottomInset: false,
    body: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        removeBottom: true,
        removeLeft: true,
        removeRight: true,
        child: _buildLandscapeView(),
    ),
);