没有 AppBar 的 Flutter 布局

Posted 2023-03-12

【中文标题】没有 AppBar 的 Flutter 布局

【英文标题】：Flutter layout without AppBar

【发布时间】：2018-03-29 10:57:24

【问题描述】：

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

您可以看到我的蓝色容器从状态栏下方开始，这不应该是这种情况，所以我不得不手动设置容器的边距，这不是很好，这就是结果：

我感觉设备可能具有高度不同的状态栏，因此将我的上边距设置为固定大小可能无法在其他设备上正确呈现。有没有办法让颤振自动将我的内容定位在状态下方，就像它将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。效果与：margin: MediaQuery.of(context).padding

【参考方案1】：

用 SafeArea 包裹您的列

  body: new SafeArea(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      )
  ) ,

SafeArea 是一个小部件，它通过足够的填充来插入其子元素，以避免操作系统的入侵。 例如，这将使子级缩进足以避开屏幕顶部的状态栏。

【参考方案2】：

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

你必须更换你的

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

由

margin: MediaQuery.of(context).padding,

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

【讨论】：

谢谢你，我不得不改用填充，它工作。非常感谢

【参考方案3】：

void main() 
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));

【讨论】：

添加对此 sn-p 机制的评论。纯代码 sn-p 鼓励复制粘贴文化。