不带AppBar的颤振布局
不带AppBar的颤振布局
提问于 2018-03-29 18:57:25
我需要一个没有appbar的布局，所以最明显的方法就是省略Scaffold上的appbar标记，但如果我这样做了，内容就会像这样放在状态栏下面：
正如你所看到的，我的容器是蓝色的，从状态栏下面开始，这不应该是这样的，所以我不得不手动设置容器的边距，这不是很好，这是结果：
我有一种感觉，设备可能有不同高度的状态栏，因此将顶部边距设置为固定大小可能无法在其他设备上正确呈现。有没有办法让flutter自动将我的内容定位在状态下方，就像它将AppBar很好地定位在状态栏下方一样。
下面是我的scaffold代码：
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),
),
),
)
);
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-29 19:10:17
您可以使用MediaQuery获取操作系统填充。
你就得换掉你的
margin: const EdgeInsets.only(top: 30.0),通过
margin: MediaQuery.of(context).padding,另一种解决方案是将内容包装在SafeArea中。基本上做了同样的事情。
Stack Overflow用户
发布于 2018-09-21 04:18:16
用SafeArea包装您的列
body: new SafeArea(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new HeaderLayout(),
],
)
) ,SafeArea是一个小部件，它通过足够的填充来插入它的子级，以避免操作系统的入侵。例如，这将使子项缩进足够大，以避开屏幕顶部的状态栏。
Stack Overflow用户
发布于 2021-12-29 11:59:27
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49554317
复制相关文章
相似问题
腾讯云开发者
