Flutter 获取状态栏高度、appBar高度和手机屏幕宽高

最新推荐文章于 2024-03-15 21:59:38 发布

技术的搬运工

最新推荐文章于 2024-03-15 21:59:38 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/IT_Boy_/article/details/106380206

Flutter 专栏收录该内容

16 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Flutter中如何获取状态栏、appBar的高度以及手机屏幕的宽高。通过导入'dart:ui'包，可以获取状态栏高度，同时讨论了安全区域的概念。对于appBar高度，可参照Dart Packages的material/constants.dart。至于屏幕尺寸，可以利用MediaQuery.of(context)来获取不同机型的屏幕信息。

1.获取状态栏高度

1.第一种，注意：这里需要导入 'dart:ui' 包

import 'dart:ui';
MediaQueryData.fromWindow(window).padding.top

2.第二种，

MediaQuery.of(context).padding.top

说到状态栏，就要说个安全区域的概念：所谓安全区域，就是适配现在一些刘海屏之类的非常规显示屏，在flutter中除了根据上面的方法获取到状态栏高度，给页面加对应的状态栏高度padding，还有一个专门的widget用来显示安全区域内容：SafeArea

2.获取appBar高度

位于 Dart Packages/flutter/src/material/constans.dart

///  * [kMinInteractiveDimensionCupertino]
///  * The Material spec on touch targets at <https://material.io/design/usability/accessibility.html#layout-typography>.
const double kMinInteractiveDimension = 48.0;

/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;

/// The height of the bottom navigation