我需要一个没有 appbar 的布局,所以最明显的方法是在 Scaffold
上省略 appbar
标记,但如果我这样做,内容会放在下面状态栏是这样的:
您可以看到我的蓝色容器从状态栏下方开始,这不应该是这种情况,所以我不得不手动设置容器的边距,这不是很好,这就是结果:
我有这种感觉,设备可能具有高度不同的状态栏,因此将我的上边距设置为固定大小可能无法在其他设备上正确呈现。有没有办法让 flutter 自动将我的内容定位在状态下方,就像它将 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),
),
),
)
);
}
}
最佳答案
用 SafeArea 包裹您的列
body: new SafeArea(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new HeaderLayout(),
],
)
) ,
SafeArea是一个小部件,它通过足够的填充来插入它的子元素,以避免操作系统的入侵。 例如,这将使子级缩进足以避开屏幕顶部的状态栏。
关于没有 AppBar 的 Flutter 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49554317/