在Flutter中,如何获取一个AppBar的高度?
我正在使用MarialApp Widget('package:flutter/material.dart')。
我已经有了Context的高度并希望减去appbar的高度。
final double height = MediaQuery.of(context).size.height;
在Flutter中,如何获取一个AppBar的高度?
我正在使用MarialApp Widget('package:flutter/material.dart')。
我已经有了Context的高度并希望减去appbar的高度。
final double height = MediaQuery.of(context).size.height;
我认为这不是一种理想的方式,但它可以起作用。
首先,在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().preferredSize.height
。它会产生与上述代码相同的结果,但会创建 AppBar 的另一个实例。 - nonybrightoappBar.preferredSize.height
= kToolbarHeight
= 56.0
,但是我想要获取的确切高度是MediaQuery.of(context).padding.top + kToolbarHeight
。 - capu不需要存储 AppBar
实例,也不需要创建虚拟实例以获取高度。此外,AppBar.preferredSize
总是返回相同的值 56.0
,这是 Material Design 的标准值,并且对于某些情况(例如缺少状态栏的高度)可能并不总是可用。
由于 AppBar
肯定与 Scaffold
一起使用,因此,我认为获取实际 AppBar
高度(设备顶部与 Scaffold
主体顶部之间的距离)更聪明的方法是使用:
double height = Scaffold.of(context).appBarMaxHeight;
有了这个,计算出的高度将包括以下内容(与平台无关):
希望这可以帮到你!
您可以使用这个:
var height = AppBar().preferredSize.height;
这种方式非常简单易行。
普通工具栏高度的常量是:kToolbarHeight
在AppBar中观看
MediaQuery.of(context).padding.top + kToolbarHeight
获取身体高度:
MediaQuery.of(context).size.height - (MediaQuery.of(context).padding.top + kToolbarHeight)
我希望这个解决方案也能帮助到您。感谢您提出这个问题。
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);
}
double height = appBar.preferredSize.height;
请确保您已声明AppBar小部件。
kToolbarHeight
是默认的应用栏高度
kBottomNavigationBarHeight
是默认的底部导航栏高度
这将完美地居中对齐您的进度指示器
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - (kToolbarHeight + kBottomNavigationBarHeight),
child: const Center(child: CircularProgressIndicator()));
AppBer高度增加。 您可以使用PreferredSize并设置高度。
appBar: PreferredSize(
preferredSize: Size.fromHeight(70),
child: AppBar(
child : Text(" ");
),
),