Flutter中如何隐藏安卓模拟器底部返回、主页按键栏避免遮挡UI？

算力阿峰

2026-10-6

Flutter安卓端系统按键栏遮挡UI解决方案

场景示例

方案1：适配系统按键栏（推荐，符合安卓交互规范）

无需隐藏系统按键栏，只需让UI内容自动避开系统栏区域即可：

最简单的方式是在页面根布局外包裹SafeArea组件，它会自动识别系统状态栏、底部按键栏的占位高度，给内容添加对应边距：

import 'package:flutter/material.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 包裹原有页面内容即可
    body: SafeArea(
      child: 你的原有页面Widget,
    ),
  );
}

如需自定义边距，也可以手动获取底部系统栏高度，给底部控件添加对应padding：

// 获取底部系统按键栏高度
final bottomPadding = MediaQuery.of(context).padding.bottom;

方案2：隐藏/自动隐藏系统按键栏（全屏场景适用）

如果需要全屏显示内容，可以通过SystemChrome类控制系统UI的显示状态：

首先导入services依赖：

import 'package:flutter/services.dart';

在页面的生命周期方法中配置UI模式：

@override
void initState() {
  super.initState();
  // 模式1：沉浸式粘性模式，隐藏顶部状态栏+底部按键栏，用户边缘滑动时临时调出，几秒后自动隐藏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

  // 模式2：仅隐藏底部按键栏，保留顶部状态栏
  // SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);
}

@override
void dispose() {
  // 页面销毁时恢复系统UI默认显示，避免影响其他页面
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.edgeToEdge,
    overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom],
  );
  super.dispose();
}