Flutter:从 AppBar 中减去状态栏高度

Posted

技术标签:

【中文标题】Flutter:从 AppBar 中减去状态栏高度【英文标题】:Flutter: subtract status bar height from AppBar 【发布时间】:2019-10-17 21:27:41 【问题描述】:

我已将AppBar 向下移动,但现在它的高度太大了。我想知道如何从AppBar 的高度中减去状态栏的高度。这是目前的样子:

以下是设置AppBar 高度的方法:

Flutter: Setting the height of the AppBar

以下是获取状态栏高度的方法:

How or where do I change the system status bar Flutter framework

final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Padding(
      padding: new EdgeInsets.only(top: statusBarHeight),
      child: content
);

我只是不知道如何将这些部分放在一起(我对 Flutter 很陌生,所以请解释清楚答案)

【问题讨论】:

您尝试过 PreferredSize 吗? 感谢 statusBarHeight,我正在寻找它:D .padding.top 得到 0.0 【参考方案1】:

这是你要找的吗?

Widget build(BuildContext context) 
  return SafeArea(
    child: Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: 70,
            alignment: Alignment.center,
            color: Colors.red,
            child: Text(
              "ADVERTISE HERE!",
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24),
            ),
          ),
          AppBar(title: Text("Main page")),
        ],
      ),
    ),
  );

【讨论】:

这是完美的谢谢。我与我的对象在树中的位置不同的事实作斗争,然后结果很奇怪哈哈。【参考方案2】:

现在您可以轻松设置 primary: false 并从 AppBar 的高度中减去状态栏的高度 (Doc)

 AppBar(
     primary: false,
     ...
  ),

【讨论】:

以上是关于Flutter:从 AppBar 中减去状态栏高度的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中获取 AppBar 高度?

Flutter 的一些小技巧

Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航

Flutter-AppBar

Flutter AppBar(顶端栏)

Flutter:不使用AppBar时如何在Android和iOS上更改状态栏文本颜色[重复]