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

enter image description here

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

enter image description here

我有一种感觉,设备可能有高度不同的状态栏,因此将上边距设置为固定大小可能无法在其他设备上正确呈现.有没有办法让Ffltter自动将我的内容定位在状态下方,就像它将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),
          ),
        ),
      )
    );
  }

}

推荐答案

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

你得换掉你的

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

通过

margin: MediaQuery.of(context).padding,

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

Flutter相关问答推荐

飞溅屏幕背景图像不起作用你能帮助我吗

如何解析json中的枚举并忽略 case 敏感性

Flutter -如何从布局填充(对称水平)中排除小部件?

底部导航栏项目在抖动中不更改 colored颜色

功能不起作用的Flutter 块复制

Ffltter:发布版本中的Path NotFoundException

Flutter为什么不;没有ListView.iterable()构造函数?

FutureProvider 不返回数据给 UI

在我使用 flutter_riverpod stateprovider 重新保存代码之前,UI 主题状态不会更新

更改下拉按钮的背景 colored颜色 - flutter

Paypal 支付网关添加带有 magento 2 网络详细信息用户名、密码、签名 Magento 2 的 flutter 应用程序?

setState 方法有时有效,有时无效

当项目较少时收缩列表视图

Flutter/Dart - 从外部类更新状态

Show Snackbar above to showModalBottomSheet Flutter

如何在图像上点或(图像的一部分)在 flutter 中点击?

改变步进器的线条 colored颜色 Flutter

Banner Ad.test 广告单元 ID 是否已过时?

我可以使用 Future 来填充Text() 小部件而不是在 Flutter 中使用 FutureBuilder 吗?

我几乎每次都将 Stateless Widget 与 BLoC 一起使用.我错了吗?