第四百五十四回

文章目录

  • 1. 问题描述
  • 2. 优化方法
    • 2.1 缩小范围
    • 2.2 替代方法
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"如何获取AppBar的高度"相关的内容,本章回中将介绍关于MediaQuery的优化.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 问题描述

我们在前面章回中介绍获取屏幕参数时使用过MediaQuery类,主要通过它来获取MediaQueryData对象,然后从MediaQueryData对象中获取屏幕相关的参数。比如
常用的屏幕长度和宽度,不过在使用时如果遇到键盘弹出或者隐藏时会引起Scaffold进行重绘(rebuild),而且是多次重绘,这种重绘显然不合理,它会导致不必要的
性能开销,本章回中将介绍如何优化这种不合理的重绘。

2. 优化方法

明白我们遇到的问题后,我们介绍如何去解决这个问题,我们提供了两种解决方法,在接下来的小节中将介绍这两种方法。

2.1 缩小范围

我可以在使用MediaQuery的地方嵌套一个Build组件,这样可以让重绘只发生在Build组件内部,进而不影响页面中其它的组件。这种做法相当是缩小了重绘范围。

2.2 替代方法

我们还可以使用MediaQuery.sizeof()代替原来的方法,不过这种办法有一定的局限性,比如viewInsetOf方法就没有效果。它仍然会进行重绘。我推测它需要计算
键盘高度,因此才去重绘。不过只是推测而已,真实的原因还需要查看源代码后才能明白。

3. 示例代码

 Widget build(BuildContext context) {// double screenWidth = MediaQuery.of(context).size.width;// double screenHeight = MediaQuery.of(context).size.height;///使用下面的方法代替上面的方法,可以减少页面重绘double screenWidth = MediaQuery.sizeOf(context).width;double screenHeight = MediaQuery.sizeOf(context).height;debugPrint("build running");///键盘高度,没有键盘弹出时为0// debugPrint("keyboard 1: ${MediaQuery.of(context).viewInsets.bottom}");///这个方法不会减少页面重绘,可见只对sizeof有效果。// debugPrint("keyboard 1: ${MediaQuery.viewInsetsOf(context).bottom}");///底部安全区域高度,没有时为0// debugPrint("keyboard 2: ${MediaQuery.of(context).viewPadding.bottom}");///没有实际意义// debugPrint("keyboard 3: ${MediaQuery.of(context).viewInsets.top}");///顶部状态栏的高度// debugPrint("keyboard 4: ${MediaQuery.of(context).viewPadding.top}");return Scaffold(appBar: AppBar(title: const Text("Example of Scaffold Overlay"),),body: Stack(children: [Positioned(top: 400,left: 0,///嵌套一层builder就不会引起页面重绘child: Builder(builder: (context) {double y = MediaQuery.of(context).size.height;debugPrint("build running of builder");return Text("check rebuilding value: ${y.toString()}");}),),///键盘自动弹出时会导到MediaQuery进行页面重绘,有两种解决方法:更换接口,嵌套builderconst Positioned(top: 450,left: 0,width: 300,height: 56,child: TextField(),),],),);}

上面的示例代码中大量使用了MediaQuery类,在页面中包含一个输入框,当我们点击输入框时会自动弹出键盘,此时可以看到代码中添加的日志出现在了运行结果中,
这表明页面发生了生绘,具体点讲就是build方法在运行,而且会运行多次,输入完成后,点击键盘上的确认键,键盘会自动隐藏,此时也会发生重绘。我们使用上一小
节介绍的两种优化方法后,再次在输入框中输入内容,此时,页面不会发生重绘。我在这里就不演示具体的运行结果了,建议大家自己动手去实践。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 页面中使用MediaQuery类后,当键盘自动弹出和隐藏时会引起页面重绘;
  • 使用Build组件来缩小重绘范围,这样可以避免页面发生重绘;
  • 使用MediaQuery中的其它方法可以避免重绘,不过不是所有方法都有效果;
    看官们,与"关于MediaQuery的优化"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

11-1.Vue2.x基本列表—v-for

文章目录 Vue2.x基本列表—v-for Vue2.x基本列表—v-for <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>基本列表</title><script type"text/javascript" src"../js/vue.j…

单位优秀信息宣传员告诉你向媒体投稿你不知道的好方法

作为基层社区信息宣传工作队伍中的一员,我刚开始接手单位的信息宣传投稿任务时,真的是一片茫然。没有任何媒体编辑的熟人朋友,我只能硬着头皮,一家家地去联系媒体,沟通投稿的事宜。这个过程真的是既费事又费力,每次投稿都像是在茫茫大海中寻找那一丝被认可的机会。 因为媒体对稿…

腾讯云优惠券种类介绍及领取教程

腾讯云优惠券是腾讯云推出的一种优惠活动&#xff0c;主要包括代金券和折扣券两种形式。这些优惠券在支付订单时可以抵扣或打折&#xff0c;是腾讯云用户享受优惠的重要凭证。以下是关于腾讯云优惠券种类和领取教程的详细介绍。 一、腾讯云优惠券种类介绍 1、代金券&#xff1…

Spring Cloud 集成 Redis 发布订阅

目录 前言步骤引入相关maven依赖添加相关配置 使用方法发布订阅发布一个消息 注意总结 前言 在当今的软件开发领域&#xff0c;分布式系统已经成为一种主流的架构模式&#xff0c;尤其是在处理大规模、高并发、高可用的业务场景时。然而&#xff0c;随着系统复杂性的增加&…

Java反序列化基础-类的动态加载

类加载器&双亲委派 什么是类加载器 类加载器是一个负责加载器类的对象&#xff0c;用于实现类加载的过程中的加载这一步。每个Java类都有一个引用指向加载它的ClassLoader。而数组类是由JVM直接生成的&#xff08;数组类没有对应的二进制字节流&#xff09; 类加载器有哪…

koa-session入门教程

koa-session 是一个用于处理会话管理的中间件&#xff0c;它基于 Koa 框架。在 Web 开发中&#xff0c;会话管理是一种重要的技术&#xff0c;它使得服务器能够跟踪每个用户的状态&#xff0c;从而实现登录、用户认证、购物车等功能。koa-session 提供了一种简单而强大的方法来…

JMeter控制器数据库获取一组数据后遍历输出

目录 1、测试计划中添加Mysql Jar包 2、添加线程组 3、添加 jdbc connection configuration 4、添加JDBC Request&#xff0c;从数据库中获取数据 5.获取数据列表&#xff0c;提取所有goodsName信息 6.通过添加控制器遍历一组数据 6.1 方式一&#xff1a;循环控制器方式 …

TiDB存储引擎TiKV揭秘

目录 一、TiKV 介绍 二、RocksDB 三、TiKV 与 RocksDB 架构 3.1 用户数据保存 3.2 TiKV 中 Region 一、TiKV 介绍 TiKV 是一个分布式事务型的键值数据库&#xff0c;提供了满足 ACID 约束的分布式事务接口&#xff0c;并且通过 Raft 协议保证了多副本数据一致性以及高可用。…

APP看广告变现,实现躺赚!!

想实现躺赚吗&#xff1f;开发一款APP&#xff0c;轻松对接广告联盟&#xff0c;收益丰厚&#xff01; 朋友们&#xff0c;你们是否想过如何让自己的手机变得更有价值&#xff1f;现在&#xff0c;有一款APP能让你轻松实现躺赚&#xff01;只需简单注册企业级营业执照和开通对…

Vue3项目中快速引入ElementUI框架

ElementUI介绍 ElementUI是一个强大的PC端UI组件框架&#xff0c;它不依赖于vue&#xff0c;但是却是当前和vue配合做项目开发的一个比较好的ui框架&#xff0c;其包含了布局&#xff08;layout)&#xff0c;容器&#xff08;container&#xff09;等各类组件&#xff0c;基本上…

算法学习——LeetCode力扣补充篇9(912. 排序数组、21. 合并两个有序链表、33. 搜索旋转排序数组、103. 二叉树的锯齿形层序遍历)

算法学习——LeetCode力扣补充篇9 912. 排序数组 912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1] 输出&#xff1a;[1,2,3,5] 示例 2&…

http调用HttpURLConnection、RestTemplate

目前有一个需求是需要跨服务调用的&#xff0c;通过后端直接访问&#xff0c;直接通过url访问记录一下&#xff0c;后面更简单的去处理。 首先是最古老的方式HttpURLConnection public JSONArray sendAuthorization(){JSONObject jsonObject new JSONObject();jsonObject.put…

基于ubuntu22.04系统安装nvidia A100驱动与NVLink启用

1、官方仓库 针对驱动包下载认准nvidia官网 dpkg -i nvidia-driver-local-repo-ubuntu2204-550.54.15_1.0-1_amd64.deb apt update apt search nvidia-driver-5502、安装 根据步骤1apt search nvidia-driver-550查出版本&#xff1a;此驱动包封在nvidia-driver-local-repo-ub…

Github 2024-04-13 Rust开源项目日报Top10

根据Github Trendings的统计,今日(2024-04-13统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10CUE项目1Go项目1Tauri: 构建小型、快速和安全的桌面应用程序 创建周期:1673 天开发语言:Rust协议类型:Apache License 2.0Star数量…

Qt | 事件第二节

Qt | 事件第一节书接上回 四、事件的接受和忽略 1、事件可以被接受或忽略,被接受的事件不会再传递给其他对象,被忽略的事件会被传递给其他对象处理,或者该事件被丢弃(即没有对象处理该事件) 2、使用 QEvent::accept()函数表示接受一个事件,使用 QEvent::ignore()函数表示…

PandasTA 源码解析(八)

.\pandas-ta\pandas_ta\momentum\__init__.py # 设置文件编码为 UTF-8 # 导入 ao 指标 from .ao import ao # 导入 apo 指标 from .apo import apo # 导入 bias 指标 from .bias import bias # 导入 bop 指标 from .bop import bop # 导入 brar 指标 from .brar import brar #…

快速排序题目SelectK问题

力扣75.颜色分类 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sor…

javascript设计模式----观察者模式

观察者模式:又被称作发布-订阅者模式或消息几支,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合。 观察者模式有3个接口,注册信息接口,发布信息接口,移除信息接口 注册信息接口:判断消息是否存在于消息容器_messages中,如果不存在,那么将该消息类型推入到消…

普发Pfeiffer TPG252 TPG256A SingleGaugeTPG261-262使用说明手侧

普发Pfeiffer TPG252 TPG256A SingleGaugeTPG261-262使用说明手侧

卷积神经网络的结构组成与解释(详细介绍)

文章目录 前言 1、卷积层 2、激活层 3、BN层 4、池化层 5、FC层&#xff08;全连接层&#xff09; 6、损失层 7、Dropout层 8、优化器 9、学习率 10、卷积神经网络的常见结构 前言 卷积神经网络是以卷积层为主的深层网络结构&#xff0c;网络结构包括有卷积层、激活层、BN层、…