Flutter在Android模拟器/设备中底部控制栏遮挡或消失问题求助

以下几种方案可以让你的红色按钮始终显示在系统导航栏上方：

• 使用SafeArea包裹底部按钮
  这是最简便的适配方式，SafeArea会自动识别系统导航栏、状态栏的安全区域，确保子组件不被遮挡：

  Scaffold(
    body: Column(
      children: [
        // 页面其他内容区域
        const Expanded(child: Center(child: Text("页面内容"))),
        // 用SafeArea包裹底部按钮
        SafeArea(
          bottom: true,
          child: SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
              onPressed: () {},
              child: const Text("操作按钮"),
            ),
          ),
        ),
      ],
    ),
  );
  

• 固定系统导航栏显示状态
  导航栏自动隐藏是导致布局错乱的核心原因之一，通过SystemChrome强制设置导航栏始终可见：

  import 'package:flutter/services.dart';
  import 'package:flutter/widgets.dart';
  
  void main() {
    WidgetsFlutterBinding.ensureInitialized();
    // 设置导航栏始终可见，应用内容延伸至导航栏下方但不被覆盖
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.edgeToEdge,
      overlays: [SystemUiOverlay.bottom],
    );
    runApp(const MyApp());
  }
  

  如果需要同时保留顶部状态栏，可修改overlays为[SystemUiOverlay.top, SystemUiOverlay.bottom]。

• 手动计算导航栏高度添加内边距
  若SafeArea的适配逻辑不符合需求，可通过MediaQuery获取底部导航栏高度，手动给按钮添加padding：

  Scaffold(
    body: Builder(
      builder: (context) {
        // 获取系统底部安全区域高度（即导航栏高度）
        final bottomNavHeight = MediaQuery.of(context).padding.bottom;
        return Column(
          children: [
            const Expanded(child: Text("页面内容")),
            Padding(
              padding: EdgeInsets.only(bottom: bottomNavHeight),
              child: SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                  onPressed: () {},
                  child: const Text("操作按钮"),
                ),
              ),
            ),
          ],
        );
      },
    ),
  );
  

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