如何在 Flutter 中获取 AppBar 高度？

Posted 2023-02-23

【中文标题】如何在 Flutter 中获取 AppBar 高度？

【英文标题】：How to get AppBar height in Flutter?

【发布时间】：2018-10-09 02:22:07

【问题描述】：

如何在 Flutter 中获取 AppBar 的高度？ 我正在使用 MarialApp 小部件（'package:flutter/material.dart'）。 我有我的 Context 的高度，想减去 appbar 的高度。

final double height = MediaQuery.of(context).size.height;

【问题讨论】：

你可以在 Flutter 中获取任何Widget 的高度，AppBar 是一个普通的Widget。

@creativecreatorormaybenot OP 询问如何获得AppBar 的高度，而您刚刚说可以获得AppBar 的高度。

【参考方案1】：

我认为这不是一个理想的方法，但它会起作用。

首先声明您将在Scaffold 中使用的AppBar 小部件。

Widget demoPage() 
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );

现在您可以使用appBar 的preferredSized 获取高度：

double height = appBar.preferredSize.height;

您可以使用此高度来降低屏幕高度。

final double height = MediaQuery.of(context).size.height;

【讨论】：

我真的不明白如何减少 appBar.preferredSize.height。那可能吗？多谢。我尝试更改 kToolbarHeight 的值，但由于它是 const var 而失败。

如果你觉得它更整洁，你可以简单地使用AppBar().preferredSize.height。它将产生与上述相同的结果，但将创建 AppBar 的另一个实例

额外知识：- 使用MediaQuery.of(context).padding.top 扣除状态栏高度

appBar.preferredSize.height = kToolbarHeight = 56.0 但MediaQuery.of(context).padding.top + kToolbarHeight 正是我想要得到的。

请记住，如果你在脚手架内，它可能会覆盖 MediaQuery.padding - 所以你只会得到 0。而不是使用： Scaffold.of(context).appBarMaxHeight;学分去@na2axl！

【参考方案2】：

你可以用这个：

var height = AppBar().preferredSize.height;

这种方式非常简单

【参考方案3】：

无需存储AppBar 实例，或创建一个虚拟实例来获取高度。此外，AppBar.preferredSize 将始终返回与 56.0 相同的值，这是 Material Design 的标准，并且该值在某些情况下并不总是可用（例如缺少状态栏的高度）。

由于AppBar 肯定与Scaffold 一起使用，恕我直言，获得真实AppBar 高度（设备顶部与Scaffold 主体顶部之间的距离）的更智能方法是使用：

double height = Scaffold.of(context).appBarMaxHeight;

这样，计算的高度将包括（独立于平台）：

状态栏高度 应用栏高度 底部应用栏小部件高度（如果有）（例如 TabBar）

希望这会有所帮助！

【讨论】：

这如何帮助您获得底部栏的高度？我不认为我的底部栏和应用栏高度相同。

嗨@Graham，“底部应用栏小部件”是指放置在AppBar底部的小部件（具有Appbar.bottom属性），例如TabBar。我不是指放置在 Scaffold 底部的 BottomAppBar 小部件。

对我来说这只是返回 56 这不是 appbar+statusbar。

这个解决方案很完美

老兄，你刚刚救了我的命！ Scaffold 覆盖了 MediaQuerry->padding，所以我总是会错过状态栏的高度。非常感谢！

【参考方案4】：

正常工具栏高度有一个常数：kToolbarHeight

【讨论】：

说是56，太短了

@AlirezaAkbari 因为您还需要扣除 MediaQuery.of(context).padding.top 感谢 Avnish Kumar

【参考方案5】：

在 AppBar 中观看

MediaQuery.of(context).padding.top + kToolbarHeight

【参考方案6】：

获取身高：

MediaQuery.of(context).size.height - (MediaQuery.of(context).padding.top + kToolbarHeight)

我希望，这个解决方案也能帮助你。感谢您提出这个问题。

【讨论】：

获得身高的超棒的智能解决方案。谢谢兄弟！

【参考方案7】：

AppBar 的高度固定为 56。

您应该创建自己的应用栏来实现 PreferredSizeWidget

class TestAppBar extends StatelessWidget implements PreferredSizeWidget 
  @override
  Widget build(BuildContext context) 
    return AppBar(
      title: Text('TEST'),
      centerTitle: true,
    );
  

  @override
  Size get preferredSize => Size.fromHeight(34);

【参考方案8】：

您可以使用以下方法获取 AppBar 的高度：

double height = appBar.preferredSize.height;

确保您已声明 AppBar 小部件。

【参考方案9】：

你可以用这个：

  @override
  final Size preferredSize; // default is 56.0

  WidgetAppBar(@required this.appBarTitle, @required this.appBarColor, Key key) : preferredSize = Size.fromHeight(40), super(key: key);

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review

【参考方案10】：

这将给出应用栏或状态栏的高度

var height = MediaQuery.of(context).padding.top;

但是，这仅适用于移动设备，其他设备没有状态栏

【参考方案11】：

使用首选尺寸

//defined as
Size preferredSize

首选尺寸是高度为 kToolbarHeight 和底部小部件首选高度之和的尺寸。

Scaffold 使用此尺寸来设置其应用栏的高度。

在实现 PreferredSizeWidget 的应用栏类中定义如下

 preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0))

例如一个链接...

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart