； 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来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的，比如如下布局： ?
===================================== 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.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在...MediaQuery作用域内，否则会抛出异常，MaterialApp和WidgetsApp都引入了MediaQuery，并且随着屏幕的变化而导致重建，比如旋转屏幕、弹出输入框等。...MediaQueryData MediaQueryData是MediaQuery.of获取数据的类型。...padding、viewPadding和viewInsets的区别如下： mediaquery_2.png" alt="mediaquery...： mediaquery_1.png" alt="mediaquery_1" style="zoom:50%;" /> 布局代码如下
文章目录 一、报错信息 二、解决方案 一、报错信息 ---- 需要使用 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 1.概述 媒体查询（mediaquery）它允许根据设备的不同特性（如屏幕大小、屏幕方向、分辨率、颜色深度等）来动态地调整网页的样式和布局。...2.引入与使用流程 1、导入相关模块 import mediaquery from '@ohos.mediaquery'; 2、通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄...例如监听横屏事件： let listener = mediaquery.matchMediaSync('(orientation: landscape)'); 给条件监听句柄listener绑定回调函数...4.案例 4.1 Stage模型 import mediaquery from '@ohos.mediaquery'; import window from '@ohos.window'; import...from '@ohos.mediaquery'; import featureAbility from '@ohos.ability.featureAbility'; let portraitFunc
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》 。
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检索的设备方向不同。
我们经常通过这样的方式，通过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(), );
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 ?
// 你可以判断是否在浏览器中运行 // 在 Windows、iOS、OSX、Android 等上 GetPlatform.isWeb // 相当于：MediaQuery.of(context).size.height...(context).size context.mediaQuerySize() /// 类似于 MediaQuery.of(context).padding context.mediaQueryPadding...() /// 类似于 MediaQuery.of(context).viewPadding context.mediaQueryViewPadding() /// 类似于 MediaQuery.of...() /// 检查设备是否处于横屏模式 context.isLandscape() /// 检查设备是否处于竖屏模式 context.isPortrait() /// 类似于 MediaQuery.of...(context).devicePixelRatio; context.devicePixelRatio() /// 类似于 MediaQuery.of(context).textScaleFactor
、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
(context).size.width, //屏幕宽度 maxHeight: MediaQuery.of(context).size.height, //屏幕高度 ), designSize...注意：ScreenUtil.init 不能在 MyApp 中进行初始化，会报如下错误 No MediaQuery ancestor could be found starting from the context...that was passed to MediaQuery.of()....因为这个时候还没加载 MaterialApp 无法使用 MediaQuery.of(context ) 获取到屏幕宽高 关于上面两种初始化方法，flutter_screenutil 作者推荐使用第二种方式...( ///设置文字大小不随系统设置改变 data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
即时通信 IM
云直播
云点播
