为什么在调整浏览器窗口大小时多次调用WidgetsBinding

在调整浏览器窗口大小时多次调用WidgetsBinding是因为Flutter框架的特性和机制。WidgetsBinding是Flutter框架中的一个关键类，它负责处理Flutter应用程序的生命周期和事件分发。

当我们调整浏览器窗口大小时，浏览器会触发resize事件。而在Flutter中，WidgetsBinding会监听这个resize事件，并在窗口大小发生变化时进行相应的处理。

多次调用WidgetsBinding的原因是因为窗口大小调整可能会引起Flutter应用程序中的布局和UI元素的重新渲染。当窗口大小发生变化时，Flutter框架会重新计算布局，并触发Widget树的重建和重绘。这样可以确保应用程序的UI能够适应新的窗口大小。

调整浏览器窗口大小多次调用WidgetsBinding的好处是可以实时响应窗口大小的变化，保证应用程序的UI始终与窗口大小保持一致。这对于提供良好的用户体验非常重要，特别是在响应式设计和移动设备上使用Flutter应用程序时。

在Flutter中，可以使用MediaQuery来获取当前窗口的大小信息，以便根据窗口大小进行布局和UI适配。另外，Flutter还提供了一些用于响应窗口大小变化的组件和工具，如LayoutBuilder和OrientationBuilder等。

对于调整浏览器窗口大小多次调用WidgetsBinding的应用场景，可以包括但不限于：

响应式设计：当窗口大小变化时，根据不同的屏幕尺寸和方向，自动调整布局和UI元素的大小和位置。
媒体查询：根据窗口大小选择不同的媒体资源，如图片、视频等，以提供更好的视觉效果和性能。
动态布局：根据窗口大小动态调整布局，以适应不同的屏幕尺寸和方向。
响应式动画：根据窗口大小变化创建动画效果，以提供更流畅的用户体验。

腾讯云相关产品和产品介绍链接地址：

腾讯云计算服务：https://cloud.tencent.com/product/cvm
腾讯云云原生服务：https://cloud.tencent.com/product/tke
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/css
腾讯云音视频服务：https://cloud.tencent.com/product/tiia
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发服务：https://cloud.tencent.com/product/mobdev
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/tgus

相关·内容

Flutter学习之视图体系

给定的widget可以零次或者多次被包含在树中，一个给定的widget可以多次放置在树中，每次将一个widget放入树中，他都会被扩充到一个Element，这就意味着多次并入树中的widget将会多次扩充到对应的...在某些时候，祖先(Element)可能会决定从树中移除该element（或中间祖先），祖先自己通过调用deactivateChild来完成该操作。...[WidgetsBinding] //如果你只想调用这个方法，那么你需要在调用runApp之前绑定并且初始化 static WidgetsBinding ensureInitialized()...接着执行postFrameCallbacks这个队列在每一Frame(一次绘制)结束时只会调用一次，调用后被系统移除。..._layoutWithoutResize();重新调整这些RenderObject。

1.4K3 0

Flutter 的 runApp 与三棵树诞生流程源码分析

runApp 为什么这么神秘？或者说，在你入门 Flutter 后应该经常听到或看到过 Flutter 三棵树核心机制的东西，你有真正的想过他们都是什么吗？如果都没有，那么本文就是一场解密之旅。...Flutter 程序入口我们编写的 Flutter App 一般入口都是在 main 方法，其内部通过调用 runApp 方法将我们自己整个应用的 Widget 添加并运行，所以我们直接去看下 runApp...packages\flutter\lib\src\widgets\binding.dart * 注意：app参数的Widget布局盒子约束constraints会被强制为填充屏幕，这是框架机制，自己想要调整可以用...* 多次重复调用runApp将会从屏幕上移除已添加的app Widget并添加新的上去， * 框架会对新的Widget树与之前的Widget树进行比较，并将任何差异应用于底层渲染树，有点类似于StatefulWidget...(element == null) { //9、在lockState里面代码执行过程中禁止调用setState方法 owner.lockState(() { /

8540 0

Flutter路由管理和页面参数的传递（源码分析）

前言上一篇 Flutter路由管理和页面参数的传递（获取&返回）文章中我们讲述了这么用代码实现 Flutter 中页面参数的传递，这一篇我们用源码分析一下 Navigator 为什么可以进行页面参数传递...initialRoute: WidgetsBinding.instance.window.defaultRouteName !...= null); result = navigator; } /******部分代码省略*****/ /**上面经过多次的操作之后，navigator变为result...color: widget.color, child: result, ); } /******部分代码省略*****/ /**上面经过多次的操作之后...{ throw FlutterError(...); } return true; }()); } return route; } 我们看到是调用了

1.2K1 0

【Flutter 专题】54 图解 Flutter 基本生命周期

和尚使用 Flutter 这么长时间，并没有认真研究过 Flutter 的生命周期，今天和尚分几个场景学习一下 Flutter 的生命周期；和尚借助 WidgetsBinding...进入分屏窗口 didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.paused...屏幕大小调整与 Android 不同，调整屏幕大小不会进行生命周期变化，前提是当前应用已获取焦点，若未获取焦点，则会在调整屏幕大小为全屏时进行获取焦点的生命周期方法；小总结生命周期整体分为三个部分...：初始化 / 状态改变 / 销毁； initState 在整个生命周期中的初始化阶段只会调用一次； didChangeDependencies 当 State 对象依赖发生变动时调用； didUpdateWidget...只有在 debug 或热重载时调用； deactivate 从 Widget Tree 中移除 State 对象时会调用，一般用在 dispose 之前； dispose 用于 Widget 被销毁时

1.3K4 1

Flutter 上的一个 Bug 带你了解键盘与路由的另类知识点

内部会将 mediaQuery.viewInsets.bottom 参与到 BoxConstraints 的大小计算，也就是键盘弹起时调整了内部的 bottom 位置来迎合键盘。...通过分析源码可以知道 MediaQuery 的 MediaQueryData 来源于 WidgetsBinding.instance.window，默认是在 MaterialApp 的 _MediaQueryFromWindow...的 MediaQueryData 是来源于 Window，并且这里还注册了 WidgetsBindingObserver 的 didChangeMetrics 回调，也就是当 window 改变时，调用...MyHomePage(title: 'Flutter Demo Home Page'), ); }, ), ); 5、Navigator 这里不禁就有疑问，为什么...didUpdateWidget 回调中会调用 _history 里所有路由的 changedExternalState() 方法。

1.2K8 0

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

需求场景1 实现需求：如下图，点击左侧的导航，打开对应tab页面，其中tab页面的内容为 iframe，这里希望iframe的高度和宽度，根据浏览器窗口大小变化而变化，同时页面内容过多，或者过宽时，出现...iframe.height = h - offsetTop; // 这里 offsetTop可以替换成一个比较合理的常量值 }); } 说明： window.innerHeight 获取浏览器窗口的高度...-去掉浏览器地址栏，书签栏的可视区域的高度，包括横向滚动条的高度。.../** * 浏览器窗口大小发生变化时，自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时，会发生多次resize事件，导致频繁调用changeFrameHeight() */ $(...当调整浏览器窗口的大小时，发生 resize 事件。

6.5K2 0

Flutter--Flutter中Widget、App的生命周期

1.2.2 生命周期二：initState initState 函数在组件被插入树中时被 Framework 调用（在 createState 之后），此函数只会被调用一次，子类通常会重写此方法，在其中进行初始化操作...1.2.4 生命周期四：build 此方法是我们最熟悉的，在方法中创建各种组件，绘制到屏幕上。 Framework会在多种情况下调用此方法：调用 initState 方法后。...），框架将会调用 build 方法来提供 State 对象适应其在树中的新位置。...为什么要加上如此判断？因为如果当前组件未插入到树中或者已经从树中移除时，调用 setState 会抛出异常，加上 mounted 判断，则表示当前组件在树中。...在iOS上，打电话、响应TouchID请求、进入应用程序切换器或控制中心都处于此状态。在Android上，分屏应用，打电话，弹出系统对话框或其他窗口等。

2.6K3 1

js防抖和节流实现

2.节流(throttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。...就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。应用场景：提交表单、高频监听事件 3....区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。 4....防抖应用场景登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖文本编辑器实时保存，当无任何更改操作一秒后进行保存...节流应用场景 scroll 事件，每隔一秒计算一次位置信息等 浏览器播放事件，每个一秒计算一次进度信息等 input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖) <!

5802 0

医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.throttle(func, , [option

注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。...为什么呢？因为我们在事件和函数执行之间加了一个控制层。记住，我们是无法控制 DOM 事件触发频率的。看下滚动事件的例子：当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒可以轻松触发30次事件。...经我的测试，在智能手机上，慢慢滚动一下，一秒可以触发事件100次之多。这么高的执行频率，你的滚动回调函数压力大吗？...Debounce 实例调整大小的例子调整桌面浏览器窗口大小的时候，会触发很多次 resize 事件。...浏览器标签未激活时，一切都不会执行。尽管所有的现代浏览器都支持 rAF ，IE9，Opera Mini 和老的 Android 还是需要打补丁。

2.4K2 0

Python程序员都会喜欢的6个库,拿走不谢！

没人希望在费劲心思之后，只是做到弹出消息窗口或是快速写入数据库。因此，程序员都会喜欢那些能够快速处理这些问题，同时长远来看也很健壮的解决方案。...为什么需要它：从头开发图形界面应用所需要的功能模块是十分繁琐的，Pyglet提供了大量现成的模块，省去了很多的时间：窗口函数，OpenGL特效，音频与视频回放，键鼠处理以及图片处理。...改用Arrow库的话有四大好处，不管长期还是短期都是很有用的。...第三，它提供了“人性化”的日期/时间信息——也就是，它可以很轻松地告诉你某件事是在“一小时以前”发生的，或是“将在两小时后”发生。第四，它很容易地将日期/时间信息转换为当地时间。...你甚至可以在目标浏览器中手动执行JavaScript代码。如果你想知道某个浏览器在浏览指定网站时的具体情况，那么Splinter将是一个很有用的工具。

7485 0

JavaScript—内置对象

location 对象包含有关当前URL地址栏的信息 screen 对象包含有关客户端显示屏幕信息 history 对象包含用户在浏览器窗口中访问过的URL，也就是历史记录 navigator 对象包含有关浏览器的信息...，会随着浏览器的伸缩而改变 opener 返回对创建此窗口的窗口的对象引用。...，x表示左右，y表示上下 setTimeout() 设置在指定的毫秒数后调用函数或计算表达式。...事件： onresize 此事件会在窗口或框架被调整大小时发生，可以用于当用户试图调整窗口的大小时，显示一个对话框。代码示例： ? 运行结果： ?...关于writeln()方法，这个方法虽然说可以换行，但是它换行的方式是加一个\n并不是加一个，在浏览器中只会把\n解析成空白符，空白符就会解析成空格，所以使用仅仅使用writeln()方法是没有换行效果的

7382 0

什么是BOM

什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。...document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。注意：只要窗口大小发生像素变化，就会触发这个事件。我们经常利用这个事件完成响应式布局。...window.addEventListener('load', function() { var div = document.querySelector('div'); // 注册调整窗口大小事件...该对象包含用户（在浏览器窗口中）访问过的URL。 ? history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

8955 1

BOM

什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 ... 　　把「浏览器」当做一个「对象」来看待  　　BOM 的顶级对象是 window  　　BOM 学习的是浏览器窗口交互的一些对象  　　BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差...顶级对象window window 对象是浏览器的顶级对象，它具有双重角色。 1. 它是 JS 访问浏览器窗口的一个接口。 2. 它是一个全局对象。...() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。...该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

1.3K2 0

Python程序员都会喜欢的6个库

7605 0

Flutter的生命周期

生命周期二：initState 「initState」函数在组件被插入树中时被 Framework 调用（在「createState」之后），此函数只会被调用一次，子类通常会重写此方法，在其中进行初始化操作...），框架将会调用 build 方法来提供 State 对象适应其在树中的新位置。...mounted 「mounted」是 State 对象中的一个属性，此属性表示当前组件是否在树中，在创建「State」之后，调用「initState」之前，Framework 会将「State...❞ 为什么要加上如此判断？因为如果当前组件未插入到树中或者已经从树中移除时，调用「setState」会抛出异常，加上「mounted」判断，则表示当前组件在树中。...在iOS上，打电话、响应TouchID请求、进入应用程序切换器或控制中心都处于此状态。在Android上，分屏应用，打电话，弹出系统对话框或其他窗口等。

1.6K3 0

BOM概述

BOM把浏览器当作一个对象来看待 BOM的顶级对象是window BOM学习的是浏览器窗口交互的一些对象 BOM是浏览器厂商在各自浏览器上定义的，兼容性较差 BOM概述 BOM（Browser Object...Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性（BOM包含DOM） window...对象是浏览器的顶级对象，它具有双重角色：它是JS访问浏览器窗口的一个接口它是一个全局变量，定义在全局作用域的变量，函数都会变成window对象的属性和方法在调用时可以省略window，前面学习的对话框都属于...window.onresize是调整窗口大小加载事件，当触发时调用内部处理函数注意：只要窗口发生像素变化，就会触发该事件我们常常利用这个事件完成响应式布局，window.innerWidth表示当前屏幕宽度...(timeout ID) setTimeout讲解: setTimeout()用来设置一个定时器该定时器在定时器到期后执行调用函数这个调用函数可以直接写函数,可以写函数名两种形式调用延迟的默认毫秒数为

1.1K1 0

你不应该依赖CSS 100vh，这就是原因!

微信搜索【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。...图片 为什么100vh问题会发生在移动设备上？我对这个问题进行了一番调查，发现了其中的原因。简短的答案是，浏览器的工具栏高度没有被考虑在内。...DOCTYPE html> 声明，会使 fill-available 在 Chrome 浏览器上无法正常工作。...('--vh', vh + 'px'); 在 CSS 中： min-height: calc(var(--vh) * 100); 最后一件事是当窗口被调整大小或设备方向改变时，重新计算这个值: function...0.01; document.documentElement.style.setProperty('--vh', vh + 'px'); } // 初始计算 calculateVh(); // 调整大小时重新计算

1.2K4 0

BOM

什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。...顶级对象window window对象是浏览器的顶级对象，它具有双重角色。它是JS访问浏览器窗口的一个接口。它是一个全局对象。...document.addEventListener('DOMContentLoaded', function() { alert(33); }) 调整窗口大小事件...window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。注意：只要窗口大小发生像素变化，就会触发这个事件。我们经常利用这个事件完成响应式布局。...该对象包含用户（在浏览器窗口中）访问过的URL。 ? history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 ?

1.3K1 0

分享一波好用的工具

markdown 因为是基于 electron 编写的，软件体积有些大（一百多 MB），不过挺好用的。...Git git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。...Google Chrome 在 PC 端浏览器中，Chrome 毫无疑问现在是王者。chrome 给开发人员提供了非常方便的调试工具。...下面的快捷方式在一般的编辑当中是通用的（比如 word 文档、txt 文档、甚至是 QQ 信息编写时）：通用快捷键 ctrl + z 撤销上一步操作（可以多次撤销）； ctrl + y 恢复上一次撤销的操作...画图然后点击重新调整大小： ? 重新调整大小选择像素，调整水平或者垂直数值。如果你想让图片保持纵横比，就把中间的复选框选上，这样调整水平数值时，垂直数值就是自动变化。

1.4K2 0

第51天：封装可视区域大小函数client

2、标准模式 document.documentElement.clientWidth 3、怪异模式 document.body.clientWidth 三、window.onresize 改变窗口事件...window.onscroll = function() {} 屏幕滚动事件 window.onresize = function() {} 窗口改变事件 onresize 事件会在窗口或框架被调整大小时发生... 四、函数 function fun() { 语句 } fun 是函数体的意思 fun() 调用函数的意思 function fun() { return...3; } console.log(fun); // 返回函数体 function fun() { retrun 3} console.log(fun()); // 调用函数 3 返回的是结果 fun...window.screen.width 返回的是我们电脑的分辨率跟浏览器没有关系六、封装可视区域大小的函数 1 <!

5274 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云