没有AppBar的颤动布局-Java 学习之路

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

enter image description here

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

enter image description here

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

这是我的脚手架代码：

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

这是我的 Headers 容器：

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

}

2 回答

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

你必须更换你的
```
margin: const EdgeInsets.only(top: 30.0),
```
通过
```
margin: MediaQuery.of(context).padding,
```
另一种解决方案是将您的内容包装在 SafeArea 中 . 这基本上做同样的事情 .
回复于 2024-04-19T20:10:29+08:00
7
用SafeArea包裹你的专栏
```
body: new SafeArea(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      )
  ) ,
```
SafeArea是一个小部件，通过足够的填充来保护其子级，以避免操作系统的入侵 . 例如，这将使子项缩进足以避免屏幕顶部的状态栏 .
回复于 2024-04-19T20:10:29+08:00

没有AppBar的颤动布局

2 回答

相关问题