Flutter技术问题：Scaffold内的Column未避开顶部状态栏怎么办？

下面给你几种可行的解决方法：

方法一：添加空AppBar #

Scaffold配合AppBar使用时，会自动给body添加顶部内边距避开状态栏，哪怕是个透明的空AppBar也能生效：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 0, // 可选：去掉AppBar阴影
      backgroundColor: Colors.transparent, // 可选：设置透明背景
    ),
    body: Column(
      children: <Widget>[
        Container(
          height: 50,
          width: 50,
          color: Colors.blueAccent,
        ),
      ],
    ),
  );
}

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

如果不想用AppBar，可以通过MediaQuery获取状态栏高度，给body顶部加内边距：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Column(
        children: <Widget>[
          Container(
            height: 50,
            width: 50,
            color: Colors.blueAccent,
          ),
        ],
      ),
    ),
  );
}

方法三：使用SafeArea组件 #

SafeArea会自动识别系统预留的状态栏、底部导航栏区域，让子组件避开这些区域：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: <Widget>[
          Container(
            height: 50,
            width: 50,
            color: Colors.blueAccent,
          ),
        ],
      ),
    ),
  );
}

原来的Scaffold没生效是因为：单纯的Scaffold body默认是从屏幕最顶端开始布局的，只有配合AppBar、手动加padding或者用SafeArea时，才会自动避开状态栏。

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