加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

没有AppBar的颤动布局

发布时间:2020-12-14 14:48:17 所属栏目:百科 来源:网络整理
导读:我需要一个没有appbar的布局,所以最明显的方法就是在Scaffold上省略appbar标签,但如果我这样做,内容会在状态栏下面,如下所示: 正如你所看到的那样,我的容器是蓝色的,从状态栏的下方开始,不应该是这种情况,所以我不得不手动设置容器的边缘,这不是很好,这是结
我需要一个没有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(),],),);

这是我的标题容器:

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中.这基本上做同样的事情.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读