Flutter 獲取狀態欄高度、appBar高度 和 手機屏幕寬高

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 bar.
const double kBottomNavigationBarHeight = 56.0;

3.獲取手機屏幕寬高

Material 設計規範中 狀態欄、導航欄、ListTile高度分別爲 24、56、56

MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

我把 MediaQuery.of(context) 的值輸出來了,不同的機型有些值是不同的, 其實  MediaQuery.of(context) 輸出的內容和 MediaQueryData.fromWindow(window) 輸出的內容是一樣的

MediaQueryData(
  size: Size(360.0, 592.0),
  devicePixelRatio: 2.0,
  textScaleFactor: 1.0,
  platformBrightness: Brightness.light,
  padding: EdgeInsets(0.0, 24.0, 0.0, 0.0),
  viewPadding: EdgeInsets(0.0, 24.0, 0.0, 0.0),
  viewInsets: EdgeInsets.zero,
  physicalDepth: 1.7976931348623157e+308,
  alwaysUse24HourFormat: true,
  accessibleNavigation: false,
  disableAnimations: false,
  invertColors: false,
  boldText: false,
);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章