Flutter笔记:Flutter的WidgetsBinding.instance的window属性

Flutter笔记
Flutter的WidgetsBinding.instance的window属性

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134128693



1. 关于 WidgetsBinding

很多初学者是不会接触和用到 WidgetsBinding.instance的,本文介绍的知识点是 WidgetsBinding.instance 的一个小部分。因此,先对 WidgetsBinding.instance 进行大概的介绍。

WidgetsBinding.instance 是Flutter中的一个核心类的实例,用于管理应用程序的事件循环和处理各种事件,例如布局、绘制、手势和系统事件。它是 WidgetsBinding 类的一个单例实例,通过它可以访问应用程序的根 WidgetsBinding 对象。

WidgetsBinding 类是 Flutter 框架的一部分,它包含了以下常用的功能和应用:

  1. 事件循环管理WidgetsBinding负责管理Flutter应用程序的事件循环,它处理了各种事件的分发和调度。这包括构建(build)事件、布局(layout)事件、绘制(paint)事件等。

  2. 处理系统事件WidgetsBinding 可以处理系统级事件,例如按键事件、触摸事件、指针事件等。它允许应用程序响应用户的输入和交互。

  3. 定时器和帧回调WidgetsBinding允许你注册定时器和帧回调,以便在未来的时间点执行代码或在下一帧绘制前执行代码。

  4. 状态管理WidgetsBinding 管理应用程序的生命周期状态,包括inactivepausedresumeddetached状态。这有助于应用程序在不同状态下进行适当的处理。

  5. 媒体和屏幕分辨率信息WidgetsBinding 提供了访问媒体查询(MediaQuery)和屏幕信息的方法,以便根据屏幕属性调整UI。

  6. 错误处理WidgetsBinding 还处理了Flutter应用程序中的异常和错误,允许你注册全局错误处理程序。

  7. 根`BuildContextWidgetsBinding 提供了根 BuildContext,可以用于构建全局部件。

WidgetsBinding 是整个 Flutter 应用程序事件和生命周期管理的关键。开发者可以通过 WidgetsBinding.instance 来访问它,并注册事件回调,以便在应用程序的各个生命周期阶段执行自定义操作。例如,你可以使用 WidgetsBinding 来注册全局的错误处理程序,管理应用程序的生命周期状态,或执行定时任务。

2. window 属性概述

WidgetsBinding.instance.window是一个全局单例对象,它提供了许多用于获取和控制Flutter应用程序窗口的属性。这些属性主要用于以下方面:

  1. 物理尺寸Physical Size);
  2. 设备像素比Device Pixel Ratio);
  3. 平台亮度Platform Brightness);
  4. 语言环境Locale);
  5. 可访问性特性Accessibility Features);
  6. 文本缩放因子Text Scale Factor);

3. 物理尺寸(Physical Size)

window.physicalSize属性返回一个Size对象,表示窗口的物理尺寸,单位是设备独立像素。

Size size = WidgetsBinding.instance.window.physicalSize;

这个尺寸是实际像素数量,不受设备像素比例影响。

Size size = WidgetsBinding.instance.window.physicalSize;<div id="3-1"></div>## <a href="#3-1"><font color="#037781">3.1 全屏显示</font>如果你需要在应用中创建一个全屏的元素或者背景,你可以使用window.physicalSize来获取屏幕的尺寸,然后设置元素或者背景的尺寸。例如:```dart
Container(width: window.physicalSize.width,height: window.physicalSize.height,color: Colors.red,
)

3.2 与 MediaQuery 对比

需要指出 MediaQuerywindow.physicalSize 都可以用来获取设备的尺寸信息,但它们的使用场景和方式有所不同。

MediaQuery

MediaQuery 是Flutter的一个 组件,它可以用来获取设备的媒体查询信息,如屏幕尺寸、设备像素比、文本缩放因子等。 MediaQuery 考虑了更多的因素,如设备方向、系统UI(如状态栏和导航栏)等。在大多数情况下,你应该使用 MediaQuery 来获取设备的尺寸信息。

例如,你可以使用 MediaQuery 来获取屏幕的宽度,并根据宽度来调整布局:

double screenWidth = MediaQuery.of(context).size.width;Container(width: screenWidth / 2,height: 100,color: Colors.red,
)

window.physicalSize

window.physicalSize 是一个全局单例对象,它提供了设备的物理尺寸信息。这个尺寸是设备独立的,不受设备像素比的影响。然而,window.physicalSize 没有考虑设备方向和系统UI,所以它提供的尺寸信息可能不准确。

结论

  • window.physicalSize 提供的是设备的物理尺寸,这是一个固定的值,不会因为设备的方向或者系统UI的变化而改变。因此, window.physicalSize 在一些需要获取设备固定尺寸的场景中可能会有用。例如,如果你正在开发一个游戏或者图形密集型的应用,你可能需要直接操作设备的物理像素。在这种情况下, window.physicalSize 可以提供你需要的尺寸信息。

  • 另一个可能的使用场景是在处理设备方向变化时。当设备的方向改变时,MediaQuery 的尺寸信息也会改变,但 window.physicalSize 不会。因此,如果你需要在设备方向改变时保持一致的尺寸信息,你可以使用 window.physicalSize

  • 然而,这些场景在大多数应用中都比较少见。
    因此在大多数情况下,应该避免直接使用 window.physicalSize,而是使用 MediaQuery 和 Flutter 的布局系统来创建自适应的布局。

4. 设备像素比(Device Pixel Ratio)

window.devicePixelRatio 属性返回的是设备的像素比例,这个比例是物理像素和逻辑像素之间的比例。在高分辨率设备上,这个比例通常大于1。

double ratio = WidgetsBinding.instance.window.devicePixelRatio;

这个属性可以用于在需要精确控制像素级别的渲染或者需要处理设备像素密度差异的场景中。

4.1 处理高分辨率图像

如果你的应用需要显示高分辨率的图像,你可以使用window.devicePixelRatio 来确定需要加载的图像的分辨率。例如,如果设备的像素比例是2.0,你可以加载2x的图像以获得最佳的显示效果。

★例如,假设你有一张图像它有两个版本:一个是 1x的版本,一个是 2x的版本。你可以使用 window.devicePixelRatio 来确定应该加载哪个版本的图像。代码实现就像下面这样写:

/// 获取设备的像素比率,以确定屏幕的像素密度。
double devicePixelRatio = WidgetsBinding.instance.window.devicePixelRatio;if (devicePixelRatio >= 2.0) {// 如果像素比率大于等于2.0,加载图像的2x版本Image.asset('images/my_image@2x.png');
} else {// 如果像素比率小于2.0,加载图像的1x版本Image.asset('images/my_image.png');
}

上面的代码中,我们首先获取设备的像素比例。然后,如果像素比例大于或等于2.0,我们加载2x版本的图像;否则,我们加载1x版本的图像。

这样,我们可以确保在高分辨率的设备上显示高分辨率的图像,而在低分辨率的设备上显示低分辨率的图像,从而获得最佳的显示效果。

4.2 自定义绘制

在使用 CustomPaint 进行自定义绘制时,你可能需要使用 window.devicePixelRatio 来确保你的绘制在所有设备上看起来都一样。比如可以使用 window.devicePixelRatio 来调整线条的宽度或者圆角的半径。

假设你正在绘制一个有圆角的矩形,你希望圆角的半径在所有设备上看起来都一样。你可以使用 window.devicePixelRatio 来调整圆角的半径。

/// 自定义绘制器类,用于绘制一个红色的圆角矩形。
class MyPainter extends CustomPainter {void paint(Canvas canvas, Size size) {// 计算设备像素比,以确保在不同设备上获得一致的渲染效果。double devicePixelRatio = WidgetsBinding.instance.window.devicePixelRatio;double radius = 10 * devicePixelRatio;// 创建一个 Paint 对象,用于定义绘制属性。var paint = Paint()..color = Colors.red // 设置绘制颜色为红色。..style = PaintingStyle.fill; // 设置绘制样式为填充。// 创建一个覆盖整个画布尺寸的矩形。var rect = Rect.fromLTWH(0, 0, size.width, size.height);var rrect = RRect.fromRectAndRadius(rect, Radius.circular(radius));// 使用定义的 Paint 对象在画布上绘制一个圆角矩形。canvas.drawRRect(rrect, paint);}bool shouldRepaint(CustomPainter oldDelegate) {// 我们不需要重绘,因为绘制是静态的。return false;}
}

然后这样使用:

CustomPaint(painter: MyPainter(),
)

5. 平台亮度(Platform Brightness)

5.1 描述

window.platformBrightness 属性返回当前平台的亮度模式,这个模式通常由用户在设备的设置中选择。这个属性可以用来判断当前是否使用 暗黑模式

5.2 案例

下面的例子展示了如何使用 window.platformBrightness 来判断当前是否使用暗黑模式,并根据此来设置应用的主题:

// main.dart/// 获取当前设备窗口的亮度模式,用于确定应用程序的主题模式。
Brightness brightness = WidgetsBinding.instance.window.platformBrightness;ThemeData theme;
if (brightness == Brightness.dark) {// 如果亮度模式为暗模式,使用暗色主题theme = ThemeData.dark();
} else {// 如果亮度模式为亮模式,使用亮色主题theme = ThemeData.light();
}MaterialApp(theme: theme, // 将主题应用于应用程序home: MyHomePage(), // 设置应用程序的主页为 MyHomePage
);

这段代码我们首先获取当前平台的亮度模式:

  • 如果亮度模式是Brightness.dark,我们使用暗黑主题;
  • 否则,我们使用明亮主题。

通过这样,我们可以确保我们的应用的主题与用户在设备设置中选择的亮度模式一致。

6.语言环境(Locale)

6.1 描述

window.locales 属性返回一个包含当前设备所有语言环境的列表。第一个语言环境是当前设备的主要语言环境。

6.2 案例

下面用一个小例子展示如何使用 window.locales 来获取当前设备的主要语言环境,并根据此来设置应用的本地化设置:

/// 获取应用程序窗口支持的所有语言区域信息。
List<Locale> locales = WidgetsBinding.instance.window.locales;/// 从支持的语言区域列表中选择主要的语言区域。
Locale primaryLocale = locales.first;MaterialApp(locale: primaryLocale, // 设置应用程序的主要语言区域localizationsDelegates: [// 添加您的本地化代理(localizations delegates)在这里],supportedLocales: [// 添加您支持的语言区域列表在这里],home: MyHomePage(), // 设置应用程序的主页为 MyHomePage
);

这段代码中,我们首先获取当前设备的所有语言环境,然后取出第一个语言环境作为主要语言环境。然后,我们在MaterialApp中设置locale属性为主要语言环境。

这样,我们可以确保我们的应用的本地化设置与用户在设备设置中选择的语言环境一致。

需要指出的是,在实际开发中,可能需要根据语言环境来调整更多的文本和布局。你还需要提供本地化委托 (localizationsDelegates )和支持的语言环境列表(supportedLocales),以便Flutter可以正确地加载和显示本地化的文本。就像这样:

import 'package:flutter_localizations/flutter_localizations.dart';const MaterialApp(localizationsDelegates: <LocalizationsDelegate<Object>>[// ... 应用程序特定的本地化代理(localizations delegates)在这里GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: <Locale>[Locale('en', 'US'), // 英语Locale('he', 'IL'), // 希伯来语// ... 应用程序支持的其他语言区域],// ...
)

7.可访问性特性(Accessibility Features)

7.1 描述

window.accessibilityFeatures 属性返回一个表示当前设备的可访问性特性的位掩码。这个位掩码可以用来判断当前设备是否启用了某些可访问性特性,如屏幕阅读器、大字体等。

7.2 案例

下面的例子展示如何使用 window.accessibilityFeatures 来判断当前设备是否启用了屏幕阅读器:

/// 获取窗口的辅助功能特性,用于检查设备是否启用了辅助功能。
AccessibilityFeatures accessibilityFeatures = WidgetsBinding.instance.window.accessibilityFeatures;if (accessibilityFeatures.accessibleNavigation) {// 设备启用了屏幕阅读器print('屏幕阅读器已启用');
} else {// 设备未启用屏幕阅读器print('屏幕阅读器未启用');
}

这段代码中,我们首先获取当前设备的可访问性特性。然后,我们检查 accessibleNavigation 是否启用。如果启用,我们打印 Screen reader enabled否则,我们打印Screen reader disabled
这样,我们可以根据用户的可访问性设置来调整我们的应用的行为。例如,如果用户启用了屏幕阅读器,我们可能需要提供更多的文本描述,或者调整我们的布局和导航。

需要指出的是,在实际开发中可能需要处理更多的可访问性特性,如大字体、高对比度等。你还需要确保你的应用遵循可访问性最佳实践,以便所有用户都可以轻松地使用应用。

7.文本缩放因子(Text Scale Factor)

8.1 描述

window.textScaleFactor属性返回用户设置的文本缩放因子。这个因子用于计算字体的实际显示大小。

double scale = WidgetsBinding.instance.window.textScaleFactor;

8.2 案例

下面的例子展示如何使用 window.textScaleFactor 来获取文本缩放因子,并根据此来设置文本的大小:

double textScaleFactor = WidgetsBinding.instance.window.textScaleFactor;Text('Hello, world!',style: TextStyle(fontSize: 20 * textScaleFactor),
);

这段代码中,我们首先获取用户设置的文本缩放因子。然后,我们将文本缩放因子乘以我们想要的字体大小(在这个例子中是20),得到实际的字体大小。然后,我们使用这个字体大小来创建一个 Text 组件。这样,我们可以确保我们的文本的大小与用户在设备设置中选择的文本大小一致。

需要指出的是,FlutterText 组件默认已经考虑了文本缩放因子,所以你通常不需要手动获取和使用window.textScaleFactor。上面的示例主要是为了演示window.textScaleFactor 的用法。——在实际开发中,你应该让 Flutter 自动处理文本缩放,以确保最佳的可访问性和用户体验。

8.API 迁移信息

注:当前Flutter积极更新,成文时版本为3.13,虽然仍违背删除。但是从 Flutter 3.7.0-32.0.pre 版本之后,window 属性已标记为弃用。通过 View.of(context) 从上下文中查找当前 FlutterView,或者直接咨询 PlatformDispatcher。 以为即将到来的 多窗口支持 做准备

例如之前的:

Size size = WidgetsBinding.instance.window.physicalSize;

目前可以改用:

double width = View.of(context).display.size.width;

这将会在我的另外一期博客专门介绍。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/127650.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享一下微信小程序里怎么开店

如何在微信小程序中成功开店&#xff1a;从选品到运营的全方位指南 一、引言 随着微信小程序的日益普及&#xff0c;越来越多的人开始尝试在微信小程序中开设自己的店铺。微信小程序具有便捷、易用、即用即走等特点&#xff0c;使得开店门槛大大降低。本文将详细介绍如何在微…

【计算系统】5分钟了解超算,高性能计算,并行计算,分布式计算,网格计算,集群计算以及云计算的区别

5分钟了解超算&#xff0c;高性能计算&#xff0c;并行计算&#xff0c;分布式计算&#xff0c;网格计算&#xff0c;集群计算以及云计算的区别 1. 超算2. 高性能计算3. 并行计算4. 分布式计算5. 网格计算6. 集群计算7. 云计算小结相关资料 1. 超算 超级计算机&#xff08;Sup…

分享88个工作总结PPT,总有一款适合您

分享88个工作总结PPT&#xff0c;总有一款适合您 88个工作总结PPT下载链接&#xff1a;https://pan.baidu.com/s/1y08X9RMdIOCncbs28aMgDw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 蓝色水彩风年终总结PPT模板 清新水彩简…

深度学习之基于YoloV5火灾烟雾报警系统(GUI界面)

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、火灾烟雾报警系统四. 总结 一项目简介 YoloV5 是深度学习中用于目标检测的一种算法&#xff0c;可以对输入的图像进行识别&#xff0c;标识出…

Leangoo领歌免费敏捷工具私有部署

​​​​​​​Leangoo领歌​​​​​​​是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c…

SpringCloud Gateway 网关的请求体body的读取和修改

SpringCloud Gateway 网关的请求体body的读取和修改 getway需要多次对body 进行操作&#xff0c;需要对body 进行缓存 缓存body 动态多次获取 新建顶层filter&#xff0c;对body 进行缓存 import lombok.extern.slf4j.Slf4j; import org.springframework.cloud.gateway.filt…

windows server 2016-IIS静态服务器-设置详细过程

文章目录 1.打开仪表盘新建角色2.iis功能模块3.启动服务器4.优点 1.打开仪表盘新建角色 2.iis功能模块 能选上的尽量选上&#xff0c;除非知道自己用不上。 然后确认&#xff0c;下一步&#xff0c;安装。 3.启动服务器 搜索IIS&#xff0c;启动IIS管理器。 启动网站。 右…

HHDBCS扩展数据库类型

为应对市面上的数据库种类繁多的问题&#xff0c;HHDBCS设置了扩展数据库功能。 在登陆界面点击“工具”&#xff0c;选择“扩展数据库类型”&#xff1b; 注&#xff1a;HHDBCS支持已kingbase&#xff0c;本文仅用来举例。 填入名称、所需数据库的信息&#xff0c;上传驱动…

【tensorboard打开失败】No dashboards are active for the current data set.

这里我再跟视频学的时候&#xff0c;找了很多的指令&#xff0c;说是对应版本不一样&#xff0c;但是发现用了很多指令都可以弹出来跳转的url&#xff0c;那应该就不是输入指令的问题 直到我想把logs里面的文件删掉重新跑的时候&#xff0c;我突然注意到这里有中文字符&#xf…

Android Icon 添加水印 Python脚本

源代码 # -*- coding: utf-8 -*- from PIL import Image 图片合成def mergePictureLXJ():commonIcon Image.open("icon.png")markIcon Image.open("领现金.png")markLayer Image.new(RGBA, commonIcon.size, (0, 0, 0, 0))markLayer.paste(markIcon, (0…

StoneDB-8.0-V2.1.0 企业版正式发布!免费公测中!

很高兴告诉大家&#xff0c;我们StoneDB-8.0-V2.1.0企业版正式发布了&#xff01;经过一个月的开发&#xff0c;我们的研发团队用极高的效率对2.0新架构版本查漏补缺&#xff0c;完善了最新架构的代码&#xff0c;并对性能、稳定性做出了优化&#xff0c;同时也修复了一些用户们…

C语言到底算高级程序语言还是低级程序语言?

C语言到底算高级程序语言还是低级程序语言&#xff1f; 高级语言 这里的高级都是相对于汇编语言来说的&#xff0c;是指脱离了计算机的硬件系统&#xff0c;可以按照人的思维逻辑进 行编程的语言 低级语言-般都依赖硬件, 基本换个硬件就得重写&#xff0c;很多人说C语言是低…

pytorch笔记 GRUCELL

1 介绍 GRU的一个单元 2 基本使用方法 torch.nn.GRUCell(input_size, hidden_size, biasTrue, deviceNone, dtypeNone) 输入&#xff1a;&#xff08;batch&#xff0c;input_size&#xff09; 输出和隐藏层&#xff1a;&#xff08;batch&#xff0c;hidden_size&#xf…

React18新特性?

文章目录 前言Automatic BatchingTransitionsSuspenseNew Hooks后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;react.js &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。…

基于深度学习的人脸专注度检测计算系统 - opencv python cnn 计算机竞赛

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的人脸专注度…

怎样去除视频中的杂音,保留人声部分?

怎样去除视频中的杂音&#xff0c;保留人声部分&#xff1f;这个简单嘛&#xff01;两种办法可以搞定&#xff1a;一是进行音频降噪&#xff0c;把无用的杂音消除掉&#xff1b;二是提取人声&#xff0c;将要保留的人声片段提取出来。 这就将两种实用的办公都分享出来&#xf…

HashMap源码分析——Java全栈知识(8)

jdk1.7和jdk1.8的HashMap的原理有一点出入我们就分开讲解&#xff1a; 1、JDK1.7中的HashMap JDK1.7中的HashMap是通过数组加链表的方式存储数据。他的底层维护了一个Entry数组&#xff0c;通过哈希函数的计算出来哈希值&#xff0c;将待填数据根据计算出来的哈希值填入到对应…

何恺明:在cuhk解答科研问题

文章目录 1. 大模型的未来:数据效益是个问题2. 未来三年研究重点:视觉自监督学习3. 选择课题的标准:好奇心和热情4. AI将成为几乎所有事情的基础工具5. 用疑问解答AI模型可解释性问题AcknowledgementReference何恺明最近在香港中文大学参加一个讲座过程中所述: 1. 大模型的…

循环神经网络(RNN)与长短期记忆网络(LSTM)

前言&#xff1a; 通过前面的学习&#xff0c;我们以BP神经网络为基础&#xff0c;认识到了损失函数&#xff0c;激活函数&#xff0c;以及梯度下降法的原理&#xff1b;而后学习了卷积神经网络&#xff0c;知道图像识别是如何实现的。今天这篇文章&#xff0c;讲述的就是计算机…

【数据结构】树形结构所有路径复原为链表

目录 1. 树形结构可视化 2. 树形结构转为链表 此目标是要还原树形结构的所有路径。树形结构是一种常见的数据结构&#xff0c;它表示元素之间层次关系。在树形结构中&#xff0c;每个节点可能拥有一个或多个子节点&#xff0c;形成了一个分层的结构。为了还原树形结构的路径&…