Question

如何在Flutter中获得 AppBar 的高度？
我正在使用MarialApp小工具（＆＃39;包：flutter / material.dart＆＃39;）。

我有上下文的高度，想要扣除appbar的高度。

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

Answer 1

只需在AppBar中观看

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

Answer 2

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

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

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;

Answer 3

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

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

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

由此，计算出的高度将（独立于平台）包括：

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

希望这会有所帮助！

Answer 4

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

Answer 5

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 6

获取身高：

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

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

Answer 7

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

double height = appBar.preferredSize.height;

确保已声明AppBar小部件。

Answer 8

您可以使用：

var height = AppBar().preferredSize.Height;

这种方式非常简单易行

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

Answer 10

使用优先尺寸

//defined as
Size preferredSize

优先大小是一个大小，其高度是kToolbarHeight和底部小部件首选高度的总和。

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

在app bar类中定义如下实现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

Flutter中的AppBar高度

10 个答案: