没有AppBar的颤动布局

Question

我需要一个没有appbar的布局,所以最明显的方法就是省略appbar标签,Scaffold但是如果我这样做,内容会在状态栏下面,如下所示:

正如你所看到的那样,我的容器是蓝色的,从状态栏的下方开始,不应该是这种情况,所以我不得不手动设置容器的边缘,这不是很好,这是结果:

我有这种感觉,设备可能具有不同高度的状态栏,因此将我的上边距设置为固定大小可能无法在其他设备上正确呈现.是否有一种方法可以让我的内容自动定位在状态之下,就好像它位于AppBar状态栏下方.

这是我的脚手架代码:

return new Scaffold(
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      ),
    );

这是我的标题容器:

class HeaderLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.blue,
      margin: const EdgeInsets.only(top: 30.0),
      child: new SizedBox(
        height: 80.0,
        child: new Center(
          child: new Text(
              "Recommended Courses",
              style: new TextStyle(color: Colors.white),
          ),
        ),
      )
    );
  }

}

Answer 1

用SafeArea包裹你的专栏

  body: new SafeArea(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      )
  ) ,

SafeArea是一个小部件,通过足够的填充来保护其子级,以避免操作系统的入侵.例如,这将使子项缩进足以避免屏幕顶部的状态栏.

Answer 2

您可以使用操作系统填充MediaQuery.

你必须更换你的

margin: const EdgeInsets.only(top: 30.0),

通过

margin: MediaQuery.of(context).padding,

另一个解决方案是将您的内容包装在一个SafeArea.这基本上做同样的事情.