没有AppBar的Flutter布局

问题描述

我需要一个没有应用栏的布局，所以最明显的方法是在Scaffold上省略appbar标记，但是如果我这样做，则内容将位于状态栏下方，如下所示:

I need a layout without an appbar, so the most obvious approach is to just leave out the appbar tag on the Scaffold but if I do that the content goes underneath the status bar like this:

您可以看到我的蓝色容器正好从状态栏下方开始，所以情况并非如此，因此我不得不手动设置容器的余量，这不是很好，这就是结果:

As you can see my container which is colored in blue starts right from underneath the status bar which shouldn't be the case, so I had to manually set the margin of the container which is not so nice, this is the results:

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

I have this feeling that devices might have status bars with varying heights so setting my top margin to fixed size might not render properly on other devices. Is there a way for flutter to position my content automatically below the status like it positions the AppBar nicely below the status bar.

这是我的脚手架代码:

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),
          ),
        ),
      )
    );
  }

}

推荐答案

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

You can get the OS padding with MediaQuery.

您必须替换

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

通过

margin: MediaQuery.of(context).padding,

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

Another solution is to wrap your content inside a SafeArea. Which basically does the same thing.

这篇关于没有AppBar的Flutter布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！