===================================== The following assertion was thrown building HeroAnimation: No MediaQuery...Scaffold widgets require a MediaQuery widget ancestor....The specific widget that could not find a MediaQuery ancestor was: Scaffold dirty state: ScaffoldState...2 tickers) The ownership chain for the affected widget is: "Scaffold ← HeroAnimation ← [root]" No MediaQuery...ancestor could be found starting from the context that was passed to MediaQuery.of().
； MediaQuery MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中，MediaQuery 继承自 InheritedWidget 是一个单独的 Widget...，但一般通过 MediaQuery.of(context) 来获取相关信息； 当相关信息发生变化，例如屏幕旋转等时，屏幕中 Widget 会重新构建，以保持最新状态；我们可以通过 MediaQuery...MediaQuery() const MediaQuery({ Key key, @required this.data, @required Widget child, })...MediaQuery.removePadding() 删除内边距 factory MediaQuery.removePadding({ Key key, @required BuildContext...(context).textScaleFactor}'); MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: 1.2)
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 MediaQuery 通常情况下，不会直接将MediaQuery...当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内，否则会抛出异常...，MaterialApp和WidgetsApp都引入了MediaQuery，并且随着屏幕的变化而导致重建，比如旋转屏幕、弹出输入框等。...MediaQueryData MediaQueryData是MediaQuery.of获取数据的类型。...使用场景 根据尺寸构建不同的布局 SafeArea控件就是通过MediaQuery.of来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的，比如如下布局： ?
通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在...MediaQuery作用域内，否则会抛出异常，MaterialApp和WidgetsApp都引入了MediaQuery，并且随着屏幕的变化而导致重建，比如旋转屏幕、弹出输入框等。...MediaQueryData MediaQueryData是MediaQuery.of获取数据的类型。...padding、viewPadding和viewInsets的区别如下： <img src="http://img.laomengit.com/<em>mediaquery</em>_2.png" alt="<em>mediaquery</em>...： 布局代码如下
文章目录 一、报错信息 二、解决方案 一、报错信息 ---- 需要使用 MediaQuery 获取当前的 Padding ; import 'package:flutter/material.dart'...; /// 使用 MediaQuery 进行全面屏适配 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget...MyApp widgets require a MediaQuery widget ancestor....The specific widget that could not find a MediaQuery ancestor was: MyApp dirty The ownership chain...context that was passed to MediaQuery.of().
不用怕，在flutter中为我们提供了一个叫做MediaQuery的利器，大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看，它的意思是媒体查询。...我们先来看下MediaQuery到底是什么。...MediaQuery的构造函数 MediaQuery除了最常规的构造函数之外，还有三个构造函数，分别是MediaQuery.removePadding,MediaQuery.removeViewInsets...我们可以看到返回了一个新的MediaQuery，其中data部分使用了MediaQuery.of(context)来获取context最近的MediaQuery，然后调用它的removePadding方法将对应的...MediaQuery的使用 讲完MediaQuery的构造函数，接下来我们看一下MediaQuery常用的使用场景。
Flutter 里大家应该都离不开 MediaQuery ，比如通过 MediaQuery.of(context).size 获取屏幕大小 ，或者通过 MediaQuery.of(context).padding.top...获取状态栏高度，那随便使用 MediaQuery.of(context) 会有什么问题吗？...又和键盘状态有关系，所以：键盘的弹出可能会导致使用 MediaQuery.of(context) 的地方触发 rebuild，举个例子：如下代码所示，我们在 MyHomePage 里使用了 MediaQuery.of...那到这里有人可能就要说了：我们通过 MediaQuery.of(context) 获取到的 MediaQueryData ，不就是对应在 MaterialApp 里的 MediaQuery...到这里可以看到 MediaQuery.of 里的 context 对象很重要：如果页面 MediaQuery.of 用的是 Scaffold 外的 context ，获取到的是顶层的 MediaQueryData
MediaQuery 一般情况下，我们会使用如下方式去获取 widget 的宽高： final size =MediaQuery.of(context).size; final width =size.width...() called with a context that does not contain a MediaQuery....flutter: No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of...当我们在当前小部件中使用了上一个小部件的 context，来使用 MediaQuery.of(context) 获取数据的时候。...我们上述的代码很显然是属于第一种情况，也就是说我们在使用 MediaQuery.of(context) 的地方并没有一个 WidgetsApp or MaterialApp 来提供数据。
minInsets 的参数，也就是可以确定：键盘弹起时的界面 resize 和 mediaQuery.viewInsets.bottom 有关系。...padding: ${MediaQuery.of(context).padding} viewInsets.bottom: ${MediaQuery.of(context).viewInsets.bottom...padding: ${MediaQuery.of(context).padding} viewInsets.bottom: ${MediaQuery.of(context).viewInsets.bottom...image 这里讲了 MediaQuery 和 MediaQueryData 的内容，为什么 MediaQuery 通过嵌套就可以重载？...因为 MediaQuery 是一个 InheritedWidget : 《全面理解State》 。
我们经常通过这样的方式，通过BuildContext,可以拿到Theme和MediaQuery //得到状态栏的高度 var statusBarHeight = MediaQuery.of(context...= null); final MediaQuery query = context.inheritFromWidgetOfExactType(MediaQuery); if (query...MediaQuery.of()....MediaQuery是我们存在在BuildContext中的属性。 其次，可以看到MediaQuery存储在的BuildContext中的位置是在WidgetsApp....模仿MediaQuery。
(context).size.width, // heigth: MediaQuery.of(context).size.height, //...(context).size.width, heigth: MediaQuery.of(context).size.height,...(context).size.width, height: MediaQuery.of(context).size.height, color:...[index]; return Videoplayer( item: item, width: MediaQuery.of...}); } catch (e) { return Container( width: MediaQuery.of(context).size.width,
但是问题发送在 A 界面，这时候键盘已经收起，mediaQuery.viewInsets.bottom 应该更新为 0 ，那为何界面没有产生应有的更新呢？...2、MediaQuery 那么猜测问题可能出现在 MediaQuery 上。...从源码我们得知 MediaQuery 是一个 InheritedWidget，它会往下共享对应的 MediaQueryData，在 MediaQueryData 中保存了各种设备的信息，比如 size...3、Window 那这里首先我们要知道 MediaQuery 的 viewInsets 是怎么被设置的？...data:MediaQuery.of(context) .copyWith(textScaleFactor: 1), child: Page2(), );
3.1.1 MediaQuery 你可以使用MediaQuery来检索屏幕的大小(宽度/高度)和方向(纵向/横向)。...(context).size; Orientation orientation = MediaQuery.of(context).orientation; return Scaffold...width]: ${screenSize.width.toStringAsFixed(2)}\n\n' + '[MediaQuery orientation]: $orientation...请记住:MediaQuery和LayoutBuilder之间的主要区别在于，MediaQuery使用屏幕的完整上下文，而不仅仅是特定小部件的大小。...记住:这与你使用MediaQuery检索的设备方向不同。
backgroundColor: Colors.blue[400]), body: Container( color: Colors.orange[100], width: MediaQuery.of...(context).size.width, height: MediaQuery.of(context).size.height, margin: EdgeInsets.all...onPressed: () {}, color: Colors.red, ), left: MediaQuery.of...(context).size.width / 2 * 0.8, top: MediaQuery.of(context).size.height / 2 * 0.7,
== null) { //如果不设置padding系统则会自己根据手机方向来预设一个sliver，也就是这个sliver导致那个非常丑的间隙 final MediaQueryData mediaQuery...= MediaQuery.of(context, nullOk: true); if (mediaQuery !...= null) { final EdgeInsets mediaQueryHorizontalPadding = mediaQuery.padding.copyWith...mediaQueryVerticalPadding : mediaQueryHorizontalPadding; sliver = MediaQuery(...data: mediaQuery.copyWith( padding: scrollDirection == Axis.vertical ?
、Flutter 全面屏适配 二、全面屏适配的情况 三、全面屏适配方法 四、反面示例 ( 留海遮挡内容 ) 五、Android 中配置最大宽高比 六、使用 SafeArea 进行全面屏适配 七、使用 MediaQuery...全面屏适配方法 : 在 顶部 和 底部 留出足够的 安全区域 ; 方案一 : Flutter 中提供了一个 SafeArea 组件 , 使用该组件 包裹 页面 , 可以实现适配 ; 方案二 : 使用 MediaQuery.of...Text("底部内容"), ], ), ), ), ); } } 适配后的样式 : 七、使用 MediaQuery...进行全面屏适配 ---- import 'package:flutter/material.dart'; /// 使用 MediaQuery 进行全面屏适配 void main() { runApp...override Widget build(BuildContext context) { /// 获取当前的 padding 信息 final EdgeInsets edgeInsets = MediaQuery.of
屏幕宽度： MediaQuery.of(context).size.width 屏幕高度： MediaQuery.of(context).size.height
屏幕适配与 Stack 布局为了使应用适配不同屏幕尺寸，我们可以使用 MediaQuery 和 LayoutBuilder。...以下是实现适配的技巧：使用 MediaQuery 获取屏幕尺寸final screenSize = MediaQuery.of(context).size;通过 MediaQuery，你可以获取屏幕的宽度和高度...通过结合 MediaQuery 和 LayoutBuilder，你可以轻松实现响应式布局，确保你的应用在各种屏幕尺寸上都能表现良好。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
