如何在Flutter中获取AppBar的高度？

Question

我怎么能得到一个高度的 应用条 在Flutter中？我正在使用MarialApp Widget（'package:fluttermaterial.dart'）。我有我的上下文的高度，并想扣除Appbar的高度。

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

Answer 1

我认为这不是一个理想的方法，但它将工作。

首先 宣称 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 2

你可以用这个方法。

var height = AppBar().preferredSize.height;

这种方式是非常样本和简单的

Answer 3

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

Answer 4

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

由于一个 AppBar 肯定是用的 Scaffold，IMHO，更聪明的方式，以获得真正的 AppBar 高度（设备顶部和顶部之间的距离）。Scaffold 身体）是要使用的。

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

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

• 状态栏高度
• 应用栏高度
• 底部应用栏部件高度（如有）（如TabBar）。

希望能帮到你

Answer 5

你可以通过使用AppBar的高度。

double height = appBar.preferredSize.height;

确保你已经声明了AppBar widget。

Answer 6

AppBar有一个固定的高度56。

你应该创建你自己的Appbar，实现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中观看

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

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

使用首选尺寸

//defined as
Size preferredSize

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

Scaffold使用这个大小来设置app bar的高度。

它在实现PreferredSizeWidget的app bar类中定义如下

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

例如一个链接...

https:/github.comflutterflutterblobmasterpackagesflutterlibsrcmaterialapp_bar.dart。