如何在Flutter中获取AppBar的高度

Question

在Flutter中，如何获取一个AppBar的高度？
我正在使用MarialApp Widget（'package:flutter/material.dart'）。

我已经有了Context的高度并希望减去appbar的高度。

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

- R2T8

---

您可以在Flutter中获取任何“Widget”的高度，而“AppBar”是一个常规的“Widget”。 - creativecreatorormaybenot

@creativecreatorormaybenot，OP问如何获取“AppBar”的高度，而你只是说可以获取“AppBar”的高度。 - CopsOnRoad

Answer 1

我认为这不是一种理想的方式，但它可以起作用。

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

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

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

double height = appBar.preferredSize.height;

你可以使用此高度来减少屏幕高度。

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

- ap14

---

我不太明白如何减小appBar.preferredSize.height。这是否可能？非常感谢。我尝试更改“kToolbarHeight”的值，但由于它是一个const变量而失败了。 - sgon00

如果你觉得这样更简洁，你可以使用 AppBar().preferredSize.height。它会产生与上述代码相同的结果，但会创建 AppBar 的另一个实例。 - nonybrighto

额外知识：通过使用MediaQuery.of(context).padding.top来减去状态栏的高度。 - Avnish Nishad

appBar.preferredSize.height = kToolbarHeight = 56.0，但是我想要获取的确切高度是MediaQuery.of(context).padding.top + kToolbarHeight。 - capu

请记住，如果您在脚手架内部，它可能会覆盖MediaQuery.padding - 因此您将只得到0。而是使用：Scaffold.of（context）.appBarMaxHeight; 感谢@na2axl！ - Mr MT

Answer 2

不需要存储 AppBar 实例，也不需要创建虚拟实例以获取高度。此外，AppBar.preferredSize 总是返回相同的值 56.0，这是 Material Design 的标准值，并且对于某些情况（例如缺少状态栏的高度）可能并不总是可用。

由于 AppBar 肯定与 Scaffold 一起使用，因此，我认为获取实际 AppBar 高度（设备顶部与 Scaffold 主体顶部之间的距离）更聪明的方法是使用：

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

有了这个，计算出的高度将包括以下内容（与平台无关）：

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

希望这可以帮到你！

- na2axl

---

那怎么帮助你获取底部栏的高度呢？我认为我的底部栏和应用栏的高度不同。 - Graham

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

对我来说，这只返回了56，而不是应用栏+状态栏。 - progNewbie

这是唯一可行的解决方案。Scaffold 会覆盖 MediaQuery，你将在任何时候都保持 padding.top == 0。 - Mr MT

请问在将AppBar作为单独的类/小部件构建时，您是如何实现脚手架的？ - petras J

Answer 3

您可以使用这个：

var height = AppBar().preferredSize.height;

这种方式非常简单易行。

- Majid Soltani

---

我喜欢这个答案。谢谢！ - DYS

Answer 4

普通工具栏高度的常量是：kToolbarHeight

- Daniel Illescas

---

它显示为56，但太短了。 - Alireza Akbari

@AlirezaAkbari 因为你还需要减去 MediaQuery.of(context).padding.top，感谢 Avnish Kumar 的建议。 - Abdelrahman Sherif

Answer 5

在AppBar中观看

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

- Hellomik U

Answer 6

获取身体高度：

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

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

- Kamlesh

---

很棒的、聪明的解决方案，用于获取页面高度。谢谢兄弟！ - Alauddin Afif Cassandra

MediaQuery.of(context).padding.top -> 它给出了状态栏的高度， kToolbarHeight -> 它给出了工具栏的高度，谢谢 :) - Balaji

Answer 7

AppBar 的高度固定为 56 像素。

您应该实现 PreferredSizeWidget 并创建自己的 appbar

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);
}

- Sebastian

Answer 8

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

double height = appBar.preferredSize.height;

请确保您已声明AppBar小部件。

- goops17

Answer 9

kToolbarHeight 是默认的应用栏高度

kBottomNavigationBarHeight 是默认的底部导航栏高度

这将完美地居中对齐您的进度指示器

    SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height - (kToolbarHeight + kBottomNavigationBarHeight),
            child: const Center(child: CircularProgressIndicator()));

- Vikas Kandari

Answer 10

AppBer高度增加。 您可以使用PreferredSize并设置高度。

appBar: PreferredSize(
            preferredSize: Size.fromHeight(70),
            child: AppBar(
              child : Text(" ");
            ),
          ),

- Jamirul islam

---

这个答案里有很多代码，请[编辑]以解释它是如何回答问题的。 - General Grievance

Size.fromHeight 在其他三个解决方案中提供。 - Trenton McKinney

此答案已在低质量队列中进行了审核。以下是如何撰写好的答案？的一些指南。仅有代码的答案不被认为是好的答案，并且很可能会因为对学习者社区不够有用而被投票降低或删除。这只是对你来说显而易见。请解释它的作用，以及它与现有答案的不同之处/ 优点。 - Trenton McKinney