如何在 Flutter 获得 AppBar 高度

我怎样才能得到一个高度的 AppBar在扑动？
我正在使用 MarialApp Widget (‘ package: flutter/ateral.dart’)。 < br > < br > 我有我的上下文的高度，并希望扣除的高度应用程序栏。

final double height = MediaQuery.of(context).size.height;
95513 次浏览
小开

使用首选尺寸

//defined as
Size preferredSize

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

脚手架使用这个大小来设置应用程序栏的高度。

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

 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

小开
最佳答案

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

首先声明您将在 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;
小开

你可以使用以下方法获得 AppBar 的高度: 

double height = appBar.preferredSize.height;

确保声明了 AppBar 小部件。

小开

常规工具栏高度有一个常数: kToolbarHeight

小开

你可以用这个:

var height = AppBar().preferredSize.height;

这种方法非常简单易行

小开

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

不需要存储 AppBar实例，也不需要创建一个虚拟实例来获取高度。此外，AppBar.preferredSize总是返回相同的 56.0值，这是材料设计的标准，这个值在某些情况下并不总是可用(例如，它缺少状态栏的高度)。

因为 AppBar肯定是和 Scaffold一起使用的，恕我直言，获得真正的 AppBar高度(设备顶部和 Scaffold机身顶部之间的距离)的更聪明的方法是使用:

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

这样，计算出的高度将包括(独立于平台) :

  • 状态栏高度
  • 应用程序栏的高度
  • 底部应用程序栏小部件的高度(例如 TabBar)

希望这个能帮上忙！

小开

你可以用这个:

  @override
final Size preferredSize; // default is 56.0


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

在 AppBar 里看就行了

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

保持身高:

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

我希望这个解决方案也能对你有所帮助。谢谢你提出这个问题。

小开

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

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

However, this will work only in mobile devices, other devices don't have status bar

小开

应用程序高度增加。 使用 PreferredSize 并设置高度

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

在 Widget 构建中，您需要获取标准 AppBar 的高度和宽度，然后使用这些值声明 Size 对象，然后将高度和宽度作为参数输入。

对于一个我称为 MyAppBar ()的自定义 AppBar，您可以这样做

Widget build(BuildContext context) {
//get the height and width of a standard appBar to use with custom Appbar


var appBarWidth = MediaQuery.of(context).size.width;
var appBarHeight = AppBar().preferredSize.height;


return Scaffold(
appBar: PreferredSize(
preferredSize: Size(appBarWidth, appBarHeight),
child: MyAppBar(),
),
小开

使用 AppBar 的首选大小来获得 AppBar 的高度。

var appBarHeight = AppBar().preferredSize.height;
小开

AppBar 高度的值为56.0，但是

你可以用代码

double height = AppBar().preferredSize.height;

提交答案