没有AppBar的Flutter布局

  • Z时代
  • 2024-01-10
  • 分类：问答

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

如您所见，我的蓝色容器是从状态栏下面开始的，情况并非如此，因此我不得不手动设置容器的边距，但并不是很好，这是结果：

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

这是我的脚手架代码：

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

This is my header container:

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。

您必须更换您的

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

by

margin: MediaQuery.of(context).padding,

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

以上是 没有AppBar的Flutter布局 的全部内容， 来源链接： utcz.com/qa/417705.html

回到顶部