zoukankan      html  css  js  c++  java
  • 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,
    );
  • 相关阅读:
    gpstop error: postmaster.pid file does not exist. is Greenplum instance already stopped
    centos7 安装企业级消息队列 RabbitMQ
    airflow入门demo
    airflow + mysql(CentOS7安装MySQL(完整版))
    Failed building wheel for psycopg2
    centos7 安装 airflow(安装 centos7、python3.6、mysql5.7、airflow)
    linux 和 windows Python pip 安装与使用, 安装包管理器 distribute
    cocos2d学习网址
    CCCallFunc CCCallFuncN CCCallFuncND的区别和使用
    CCAction详解
  • 原文地址:https://www.cnblogs.com/maqingyuan/p/13782839.html
Copyright © 2011-2022 走看看