`
iaiai
  • 浏览: 2180228 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flutter 获取屏幕宽度高度 通知栏高度等屏幕信息

 
阅读更多
##MediaQuery

MediaQuery.of(context) 包含了一些屏幕的属性:

size : 一个包含宽度和高度的对象,单位是dp
print(MediaQuery.of(context).size);     //输出: Size(411.4, 683.4) 

devicePixelRatio : 返回设备的像素密度
print(MediaQuery.of(context).devicePixelRatio);  //2.625

textScaleFactor : 每个逻辑像素的字体像素数。 默认为1.0
获取上边距和下边距的值。(主要用于刘海屏)
final double topPadding = MediaQuery.of(context).padding.top;
final double bottomPadding = MediaQuery.of(context).padding.bottom;

需要注意的是:
上边距在 iPhoneX 上的值是 44, 在其他设备上的值是 20, 是包含了电池条的高度的。
下边距在iPhoneX 上的值是34,在其他设备上的值是 0。

dart:ui中的window对象

使用前需要在文件头部导入包:
import ‘dart:ui’;

使用:window.physicalSize 返回一个包含屏幕宽高的对象,单位是px.
print(window.physicalSize);   //Size(1080.0, 1794.0)

然后我们看一下Window的常用属性和方法 :
  • defaultRouteName → String 启动应用程序时嵌入器请求的路由或路径。
  • devicePixelRatio → double 每个逻辑像素的设备像素数。 例如,Nexus 6的设备像素比为3.5。
  • textScaleFactor → double 系统设置的文本比例。默认1.0
  • toString() → String 返回此对象的字符串表示形式。
  • physicalSize → Size 返回一个包含屏幕宽高的对象,单位是dp

点击查看Window的更多介绍
分享到:
评论

相关推荐

    flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息

    flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息

    Flutter 通知栏通知 - android 版

    通过这种方式,Flutter应用可以充分利用Android的通知系统,为用户提供即时的信息提示。在实际应用中,你可能需要根据具体需求定制通知的样式、行为和交互,例如设置通知类别、添加自定义意图、使用远程通知图标等。...

    Flutter中获取屏幕及Widget的宽高示例代码

    我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们有两种方法来获取 widget 的宽高。 MediaQuery 一般情况下,我们会使用如下方式去获取 widget 的宽高: final ...

    Flutter旋转屏幕,Flutter旋转屏幕

    总结,Flutter通过`OrientationBuilder`、`MediaQuery`和`WidgetsBindingObserver`等工具提供了灵活的屏幕旋转处理机制。开发者可以根据项目需求选择合适的策略来管理屏幕旋转,确保应用在不同设备方向下都能提供...

    Flutter中屏幕适配,尺寸设置.pdf

    Flutter 中提供了多种屏幕适配机制,包括使用 window 属性来获取屏幕的物理尺寸、使用 dart:ui 库来获取屏幕的宽度和高度等。 二、Flutter 中的屏幕适配机制 Flutter 中提供了多种屏幕适配机制,包括: * 使用 ...

    Flutter AppBar 工具栏、导航栏

    在Flutter框架中,AppBar是一个非常重要的组件,它用于构建应用程序顶部的导航栏,通常显示应用的标题、返回按钮以及其他的操作选项。这篇文章将深入探讨如何使用AppBar,包括其基本用法、与TabBar的结合、如何移除...

    Flutter 不同终端适配方案

    Flutter 提供了多种屏幕适配方案,例如使用 MediaQuery、LayoutBuilder、FittedBox 等Widget 来实现屏幕适配。然而,这些方法都有其局限性,例如 MediaQuery 只能获取当前屏幕的宽高,而 LayoutBuilder 和 ...

    Flutter 透明状态栏及字体颜色的设置方法

    本文详细介绍了 Flutter 透明状态栏及字体颜色的设置方法,包括使用 `SystemUiOverlayStyle` 对象、`AppBar` 组件和 `AnnotatedRegion` 组件等方式。这些方法可以根据实际情况选择使用,以满足不同场景下的需求。

    获取键盘高度

    总结,动态获取键盘高度在iOS应用开发中是一个常见的需求,通过监听键盘的通知并解析其中的信息,我们可以准确地得知键盘的高度变化,进而优化用户体验。在Objective-C中,这一过程主要通过`NSNotificationCenter`和...

    获取标题栏高度的资源

    在网页开发中,如果需要获取浏览器的标题栏高度,可以通过JavaScript的`window.screen.availTop`属性获取屏幕可用区域的顶部距离,这包括了标题栏的高度。不过,这个值可能因浏览器和操作系统而异,因此在实际应用...

    Flutter 滚动悬浮导航栏TabBar

    本文将深入探讨如何在Flutter中实现滚动悬浮的导航栏,即TabBar,结合SliverAppBar、PageView和NestedScrollView等组件,为用户提供流畅的滚动体验。 一、Flutter TabBar基础 TabBar是Flutter中的一个核心组件,它...

    Flutter学习笔记仿闲鱼底部导航栏带有中间凸起图标

    在Flutter中,底部导航栏是`BottomNavigationBar`组件,用于在屏幕底部显示一组选项,让用户可以在多个视图之间轻松切换。每个选项通常对应一个页面或状态,用户可以通过点击底部栏中的图标或文字进行切换。 为了...

    Flutter入门与实战:屏幕适配和字体大小

    在Flutter中,我们可以利用`MediaQuery`类获取设备的屏幕信息,包括屏幕宽度、高度、像素密度等。`MediaQuery.of(context)`方法用于获取当前构建上下文(context)的相关设备信息。例如,可以获取到屏幕宽度: ```...

    Flutter中的动画曲线导航栏

    在Flutter开发中,动画曲线导航栏(Curved Navigation Bar)是一种独特且吸引用户的界面元素,它为用户在应用中切换页面时提供了流畅的过渡效果。本文将深入探讨如何在Flutter中实现这种富有动态美感的导航栏,以及...

    Flutter上的App初始启用屏幕示例

    2. 动态启动屏幕:如果需要添加动画效果,可以利用`AnimatedBuilder`、`FadeTransition`或`AnimatedCrossFade`等动画组件。例如,创建一个渐变进入的图片动画: ```dart import 'package:flutter/animation.dart'; ...

    flutter_bluetooth.zip_flutter 蓝牙 ios_flutter_bluetooth_flutter获取

    flutter 蓝牙,通过蓝牙协议和单片机进行数据交互,控制智能硬件

    flutter使用webrtc技术实现共享桌面,视频

    这通常涉及获取用户的权限,然后开始录制屏幕。 4. **视频流的发送和接收**: 使用`RTCPeerConnection`的`addStream`方法将本地视频流或桌面共享流添加到连接中,然后通过`createOffer`和`setLocalDescription`...

    Flutter 控制屏幕旋转的实现

    2,强制屏幕横屏,不随着屏幕去调整 第一种方式这里就不做说明了。代码做适配就可以。 下面说一下第二种实现方式 Flutter 自带方式 flutter 为我们提供了方法来控制系统的横竖屏显示 SystemChrome....

    Flutter入门与实战:标签切换栏

    在本文中,我们将深入探讨Flutter框架中的标签切换栏(Tab Bar)的实现和应用,这对于初学者和有经验的开发者来说都是一个非常实用的功能。Flutter是Google开发的开源UI工具包,它允许开发者构建高性能、高保真度的...

Global site tag (gtag.js) - Google Analytics