Flutter无AppBar时如何实现Container置于系统状态栏下方

我明白你的困扰——当不用默认AppBar时，自定义的顶部Container总是会和系统状态栏重叠，没法像AppBar那样自动处于状态栏下方对吧？这是因为默认情况下，Scaffold的body会从屏幕最顶部（包括状态栏区域）开始布局，而AppBar内部已经帮我们处理了这个padding。下面给你两种简单有效的解决方案：

方法一：用SafeArea自动适配 #

SafeArea是Flutter提供的一个非常实用的组件，它会自动帮我们避开系统状态栏、底部导航栏等系统UI区域，让内容显示在安全区内。你只需要把body里的Column用SafeArea包裹起来就行：

body: SafeArea(
  child: Column(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
            color: Colors.indigo,
          )
        ]),
        height: 70.0,
        child: Row(
          children: <Widget>[
            Center(child: Text("TOOLBAR", style: defaultAppBarTextStyle)),
          ],
        ),
      ),
      Expanded(child: _fragments[_currentIndex]),
    ],
  ),
),

这种方法的好处是不用手动计算尺寸，自动适配各种设备（包括刘海屏、挖孔屏等），非常省心。

方法二：手动添加状态栏高度的padding #

如果你想更精确地控制间距，可以通过MediaQuery获取状态栏的高度，然后给自定义Container加上顶部padding：

body: Column(
  children: <Widget>[
    Padding(
      // 获取状态栏高度并设置顶部padding
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Container(
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
            color: Colors.indigo,
          )
        ]),
        height: 70.0,
        child: Row(
          children: <Widget>[
            Center(child: Text("TOOLBAR", style: defaultAppBarTextStyle)),
          ],
        ),
      ),
    ),
    Expanded(child: _fragments[_currentIndex]),
  ],
),

额外优化：让状态栏和自定义Container风格统一 #

如果你希望状态栏的背景色和你的自定义顶部栏颜色一致，可以在页面的initState方法里设置系统UI样式：

import 'package:flutter/services.dart';

// ...

@override
void initState() {
  super.initState();
  // 设置状态栏颜色和图标亮度
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.indigo, // 和你的Container阴影色匹配
    statusBarIconBrightness: Brightness.light, // 浅色图标适配深色状态栏
  ));
}

这样整体视觉效果会更协调，和用AppBar时的体验一致。

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