mediaquery_找不到MediaQuery祖先？_MediaQuery插入返回零 - 腾讯云开发者社区

===================================== 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().

4424 0

Flutter 强大的MediaQuery控件

注意：无特殊说明，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来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的，比如如下布局： ?

5442 0

您找到你想要的搜索结果了吗？

是的

没有找到

【Flutter 专题】94 初识 MediaQuery

； 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)

9413 1

Flutter 强大的MediaQuery控件

通常情况下，不会直接将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>...：布局代码如下

8690 0

Flutter 强大的MediaQuery控件

7300 0

【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

文章目录一、报错信息二、解决方案一、报错信息 ---- 需要使用 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().

4772 0

flutter系列之:查询设备信息的利器:MediaQuery

不用怕，在flutter中为我们提供了一个叫做MediaQuery的利器，大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看，它的意思是媒体查询。...我们先来看下MediaQuery到底是什么。...MediaQuery的构造函数 MediaQuery除了最常规的构造函数之外，还有三个构造函数，分别是MediaQuery.removePadding,MediaQuery.removeViewInsets...我们可以看到返回了一个新的MediaQuery，其中data部分使用了MediaQuery.of(context)来获取context最近的MediaQuery，然后调用它的removePadding方法将对应的...MediaQuery的使用讲完MediaQuery的构造函数，接下来我们看一下MediaQuery常用的使用场景。

6002 0

Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

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

9392 0

Flutter中获取屏幕及Widget的宽高示例代码

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 来提供数据。

3K2 0

Flutter 中键盘弹起时，Scaffold 发生了什么变化

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》。

1.5K2 0

抖音的强大对手来了，用Flutter手撸一个抖音国际版，看看有多炫

(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,

1K2 0

Flutter入门三部曲(3) - 数据传递状态管理

我们经常通过这样的方式，通过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。

3.7K5 1

端开发技术——解密Flutter响应式布局

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检索的设备方向不同。

2.2K0 0

Flutter入门三部曲(3) - 数据传递状态管理

1.2K0 0

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

但是问题发送在 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(), );

1.2K8 0

Flutter Positioned 组件

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,

6852 0

常用组件--Drawer常用组件--Drawer

== 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 ?

8956 0

Flutter实现用视频背景的登录页的示例代码

Center让视频放大以后居中显示，缩放比为_controller.value.aspectRatio /MediaQuery.of(context).size.aspectRatio，用视频的宽高比除以设备的宽高比...StackFit.expand, children: <Widget [ Transform.scale( scale: _controller.value.aspectRatio / MediaQuery.of...controller), ) : Text("正在初始化"), ), ), ), Positioned( width: MediaQuery.of...(color: Colors.white, fontSize: 13.0), ) ], ), ), Positioned( width: MediaQuery.of

1.2K2 0

Flutter之屏幕适配

(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

1.8K2 0

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

、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

3.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

【错误记录】Flutter 界面报错 ( No MediaQuery widget ancestor found. | Scaffold widgets require a MediaQuery )

Flutter 强大的MediaQuery控件

【Flutter 专题】94 初识 MediaQuery

Flutter 强大的MediaQuery控件

Flutter 强大的MediaQuery控件

【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

flutter系列之:查询设备信息的利器:MediaQuery

Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

Flutter中获取屏幕及Widget的宽高示例代码

Flutter 中键盘弹起时，Scaffold 发生了什么变化

抖音的强大对手来了，用Flutter手撸一个抖音国际版，看看有多炫

Flutter入门三部曲(3) - 数据传递状态管理

端开发技术——解密Flutter响应式布局

Flutter入门三部曲(3) - 数据传递状态管理

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

Flutter Positioned 组件

常用组件--Drawer常用组件--Drawer

Flutter实现用视频背景的登录页的示例代码

Flutter之屏幕适配

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐