Flutter - AppBar 上的填充

Posted 2023-02-23

【中文标题】Flutter - AppBar 上的填充

【英文标题】：Flutter - Padding on AppBar

【发布时间】：2020-11-24 17:47:05

【问题描述】：

我正在开发的应用程序必须始终处于全屏模式，但是，还必须始终显示时间/日期以及某个硬件 ID。我们找到了以下方式来呈现所述信息：

但是，正如您在上面看到的，我用红色标记了一个始终位于我的 AppBar 上方的 Padding 小部件，我们希望删除该填充。这样的事情可能吗？

下面是我们正在使用的自定义 AppBar 的代码。

@override
Widget build(BuildContext context) 
return PreferredSize(
  preferredSize: Size.fromHeight(45),
  child: AppBar(
    centerTitle: true,
    title: Column(
      children: <Widget>[
        Text(pageName,
          style: TextStyle(
              fontSize: pageNameFontSize
          ),
        ),
        SizedBox(
          height: 8,
        )
      ],
    ),
    actions: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 6,
          ),
          Row(
            children: <Widget>[
              AppBarClock(
                style: TextStyle(
                    fontSize: 20
                ),
              ),
              SizedBox(
                width: 5,
              )
            ],
          ),
          Row(
            children: <Widget>[
              Text(this.trailText,
                textAlign: TextAlign.right,
              ),
              SizedBox(
                width: 5,
              )
            ],
          ),
        ],
      )
    ],
  ),
);

我们正在使用 SystemChrome.setEnabledSystemUIOverlays([]); 使应用全屏显示。

【参考方案1】：

这是因为AppBar 自动包含SafeArea 每当被视为主要。

只需将其primary 属性设置为false。

AppBar(
   primary: false,
   ...
)