如何在 Flutter 中获取 AppBar 高度？

Question

如何在 Flutter 中获取 AppBar 的高度？
我正在使用 MarialApp 小部件 ('package:flutter/material.dart').

我有 Context 的高度，想扣除 appbar 的高度。

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

Answer 1

使用首选尺寸

//defined as
Size preferredSize

首选尺寸 是一个尺寸，其高度是 kToolbarHeight 和底部小部件的首选高度之和。

脚手架使用此尺寸设置其应用栏的高度。

在实现 PreferredSizeWidget

的应用栏 class 中定义如下

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

a link 例如...

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

Answer 2

我认为这不是理想的方式，但它会奏效。

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

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

现在您可以使用 preferredSized:[=17= 获取 appBar 的高度 ]

double height = appBar.preferredSize.height;

您可以使用此高度从屏幕高度减少。

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

Answer 3

您可以通过以下方式获取AppBar的高度：

double height = appBar.preferredSize.height;

确保您已声明 AppBar 小部件。

Answer 4

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

Answer 5

你可以使用这个：

var height = AppBar().preferredSize.height;

这种方式非常简单易行

Answer 6

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

Answer 7

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

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

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

有了这个，计算出的高度将包括（独立于平台）：

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

希望这会有所帮助！

Answer 8

你可以使用这个：

  @override
  final Size preferredSize; // default is 56.0

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

Answer 9

就在应用栏里看

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

Answer 10

获取身高：

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

希望此解决方案也能对您有所帮助。感谢提问。

Answer 11

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

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

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

如何在 Flutter 中获取 AppBar 高度？

How to get AppBar height in Flutter?

android

appbar

ios

dart

flutter