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内。这基本上做同样的事情。

没有AppBar的颤动布局

2 个答案: