Flutter无AppBar布局问题：内容被状态栏遮挡的解决方案咨询

我太懂你这个困扰了——直接省略Scaffold的appBar属性时，内容确实会默认顶到屏幕最顶部，连状态栏区域都不放过，手动加margin的方式不仅不优雅，还很容易在不同机型上出适配问题。下面给你两种官方推荐、适配性拉满的解决方案：

方案一：用SafeArea一键搞定（最推荐） #

这是官方为这类场景量身打造的组件，它会自动识别设备的状态栏、底部导航栏等系统预留区域，让你的内容乖乖避开这些区域布局。代码示例超简单：

Scaffold(
  body: SafeArea(
    // top默认就是true，会自动避开顶部状态栏；如果需要避开底部导航栏可以设置bottom: true
    child: Container(
      color: Colors.blue,
      // 这里放你的页面内容
    ),
  ),
);

用这个方法后，你的蓝色Container会自动从状态栏下方开始布局，完全不用手动计算任何高度，所有设备都能完美适配。

方案二：自定义状态栏占位（进阶场景） #

如果你的需求更特殊——比如想给状态栏区域设置自定义背景色，或者要对状态栏区域做额外操作，可以通过MediaQuery获取状态栏高度，然后加一个占位容器：

Scaffold(
  body: Column(
    children: [
      // 占位状态栏高度的容器，可自定义背景色
      Container(
        height: MediaQuery.of(context).padding.top,
        color: Colors.white, // 这里可以设置成你想要的状态栏背景色
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
          // 你的页面内容
        ),
      ),
    ],
  ),
);

这种方式适合需要拆分状态栏和页面主体样式的场景，比如让状态栏背景和页面背景不一样的情况。

额外提一句：如果想调整状态栏的图标颜色、背景色，还可以配合SystemChrome来设置，比如：

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.white, // 状态栏背景色
    statusBarIconBrightness: Brightness.dark, // 状态栏图标设为深色
  ));
  runApp(const MyApp());
}

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