使用不包含MediaQuery的上下文(从MaterialApp)调用MediaQuery.of() - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

文章目录一、报错信息二、解决方案一、报错信息 ---- 需要使用 MediaQuery 获取当前的 Padding ; import 'package:flutter/material.dart'...edgeInsets = MediaQuery.of(context).padding; return MaterialApp( title: 'Flutter Demo',...context that was passed to MediaQuery.of()....二、解决方案 ---- 获取 Padding 信息 , /// 获取当前的 padding 信息 , 报错位置 ; final EdgeInsets edgeInsets = MediaQuery.of...(context).padding; 需要在 MaterialApp 中进行获取 , 这里将上述代码重新进行封装 , 将 MediaQuery 调用的代码 , 封装到 MaterialApp 组件内部

7672 0

【Flutter 专题】94 初识 MediaQuery

； MediaQuery MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中，MediaQuery 继承自 InheritedWidget 是一个单独的 Widget...false, bool removeBottom = false, @required Widget child, }) MediaQueryData MediaQueryData 包含关于媒介的相关信息...9. highContrast highContrast 为用户是否要求前景与背景之间的对比度高，主要用于 iOS 设备； print('前后背景高对比度 -> ${MediaQuery.of(context...15. viewPadding viewPadding 和尚理解为视图内边距，为屏幕被刘海儿屏或异形屏中被系统遮挡部分，从 MediaQuery 边界的边缘计算；此值是保持不变；例如，屏幕底部的软件键盘可能会覆盖并占用需要底部填充的相同区域...currentContext 获取 BuildContext 上下文环境，从而获取对应尺寸； var _itemExpandedKey = GlobalKey(); var _itemTextKey =

1.2K3 1

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

是的

没有找到

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

从 34 变成了 0viewPadding 在键盘弹出前后数据没有发生变化可以看到 MediaQueryData 里的数据是会根据键盘状态发生变化，又因为 MediaQuery 是一个...那到这里有人可能就要说了：我们通过 MediaQuery.of(context) 获取到的 MediaQueryData ，不就是对应在 MaterialApp 里的 MediaQuery...如下图所示，因为嵌套结构的原因，事实上弹出键盘确实会导致 MaterialApp 下的 child 都触发 rebuild ，因为设计上 MediaQuery 就是在 Navigator 上面，所以弹出键盘自然也就触发...到这里可以看到 MediaQuery.of 里的 context 对象很重要：如果页面 MediaQuery.of 用的是 Scaffold 外的 context ，获取到的是顶层的 MediaQueryData...使用不同 context 对性能的影响通过 Scaffold 内的 context 获取到的 MediaQueryData 受到 Scaffold 的影响那么，如果看完本篇你还有什么疑惑

1.5K2 0

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

padding: ${MediaQuery.of(context).padding} viewInsets.bottom: ${MediaQuery.of(context).viewInsets.bottom...padding: ${MediaQuery.of(context).padding} viewInsets.bottom: ${MediaQuery.of(context).viewInsets.bottom...方法里打印出对应的 MediaQuery.of(context).padding 和 MediaQuery.of(context).viewInsets.bottom 的值；如下图所示，在键盘弹起和不弹起时可以看到...MainWidget 使用的 MediaQuery.of(context) 得到的 MediaQueryData 是上级往下传递的，里面包含了 top:47 的状态栏高度和 bottom:34 的底部安全区域高度...事实上这得从 MaterialApp 说起，在 MaterialApp 内部的深处嵌套着一个叫 _MediaQueryFromWindow 的 Widget ，它在内部通过 WidgetsBinding.instance.addObserver

2.6K2 0

Flutter之屏幕适配

(context).size.width, //屏幕宽度 maxHeight: MediaQuery.of(context).size.height, //屏幕高度 ), designSize...that was passed to MediaQuery.of()....因为这个时候还没加载 MaterialApp 无法使用 MediaQuery.of(context ) 获取到屏幕宽高关于上面两种初始化方法，flutter_screenutil 作者推荐使用第二种方式...flutter_screenutil 提供了更简洁的调用方法，使用 Dart 扩展为 num 类型扩展了一系列属性可以方便开发者调用，上面的 api 可以通过扩展属性进行如下转换： ScreenUtil...( ///设置文字大小不随系统设置改变 data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0

2.7K2 0

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

从源码我们得知 MediaQuery 是一个 InheritedWidget，它会往下共享对应的 MediaQueryData，在 MediaQueryData 中保存了各种设备的信息，比如 size...通过分析源码可以知道 MediaQuery 的 MediaQueryData 来源于 WidgetsBinding.instance.window，默认是在 MaterialApp 的 _MediaQueryFromWindow...didUpdateWidget 回调中会调用 _history 里所有路由的 changedExternalState() 方法。...所以这里只需要将 MediaQueryData.fromWindow 换成 MediaQuery.of(context) 就可以解决问题，而当在没有 context 或者需要直接使用 MediaQueryData.fromWindow...data:MediaQuery.of(context) .copyWith(textScaleFactor: 1), child: Page2(), );

1.6K8 0

Flutter 系列之GetX的学习(3) --> 其他实用功能

我们首先需要在main.dart文件里面将MaterialApp 修改为 GetMaterialApp 其次添加属性defaultTransition 表示默认的路由过渡动画效果: 2. app国际化配置...读取数据：box.read(String key) —— 从存储中读取数据。删除数据：box.remove(String key) —— 删除指定的键值对。...， // 但不可变 Get.height Get.width // 获取当前导航器的上下文 Get.context // 获取前景中 snackbar/对话框/底部表单的上下文，可以在代码中的任何地方使用...因为你在 UI 的任何地方都有上下文的访问权限，所以可以在 UI 代码的任何地方使用它 // 如果你需要可变的高度/宽度（如桌面或可以缩放的浏览器窗口），你需要使用上下文 context.width...() /// 类似于 MediaQuery.of(context).viewPadding context.mediaQueryViewPadding() /// 类似于 MediaQuery.of

7251 0

Flutter 组件 | Builder 构造器与 BuildContext 认知

比如下面通过 MediaQuery.of(context) 可以获取 MediaQueryData 数据，从而拿到屏幕尺寸、设备分辨率等数据信息，这里核心方法 BuildContext 的 dependOnInheritedWidgetOfExactType...，因为MediaQuery 是在 MaterialApp 内部包含的，这时 context 中是找不到的，所以想要使用 MediaQuery，那就必需将 context 下移到 MaterialApp...一直往下翻，你会看到有一个持有 MediaQuery 的元素，这就说明当前的 ctx 可以上溯寻到该祖先节点。...也就说明使用 Builder 回调的上下文，是可以使用 MediaQuery.of(ctx) 获取到媒体信息的。 ? ? 到这里，你应该对上下文的层级有了一定的认识。...---- 在 IconTheme 中的 merge 方法里也使用了 Builder 组件，这是为了在没有上下文的时候拿到上下文，这样就不需要在 merge 方法中传入上下文了，这也是上下文无中生有的使用方式

2.7K2 1

Flutter 强大的MediaQuery控件

通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在...MediaQuery作用域内，否则会抛出异常，MaterialApp和WidgetsApp都引入了MediaQuery，并且随着屏幕的变化而导致重建，比如旋转屏幕、弹出输入框等。...MediaQueryData MediaQueryData是MediaQuery.of获取数据的类型。...viewPadding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏，此值独立于padding和viewInsets，它们的值从MediaQuery控件边界的边缘开始测量。..._2" style="zoom:50%;" /> 使用场景根据尺寸构建不同的布局 SafeArea控件就是通过MediaQuery.of来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的，比如如下布局

1.1K0 0

Flutter 强大的MediaQuery控件

1.2K0 0

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

, ); }, ); 然后在需要引用的位置加入: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 调用的位置...(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...width、heigth传入到下一个控件，这样好计算界面呈现的宽度与高度 return Videoplayer( item: item, width: MediaQuery.of

1.4K2 0

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

我们经常通过这样的方式，通过BuildContext,可以拿到Theme和MediaQuery //得到状态栏的高度 var statusBarHeight = MediaQuery.of(context...然后从这个类中，去调用获取状态的方法。(Android开发的同学应该很熟悉的套路，类似Picasso、Glide)。但事实上是这样吗？...MediaQuery.of()....(因为其实MaterialApp返回的也是它) MediaQuery状态保存的原理继承InheritedWidget [image.png] 通过build方法中返回 MaterialApp的_MaterialAppState...从MediaQuery模仿的套路，我们知道，我们需要一个StatefulWidget作为外层的组件，将我们的继承于InheritateWidget的组件build出去 */ class AppStateContainer

1.5K0 0

flutter中的响应式布局

在flutter中，我们可以根据UI设计的效果，通过使用不同的技术、widgets和第三方包，轻松的实现响应式 In this article, we'll focus on one very specific...也就是说，我们需要将菜单和内容作为SplitView的参数，至于菜单和内容具体包含哪些，我们并不关心。...extends StatelessWidget { @override Widget build(BuildContext context) { final screenWidth = MediaQuery.of...我们可以看看官方文档对MediaQuery.of: You can use this function to query the size and orientation of the screen,...并且 breakpoint 和 menuWidth 也是可配置的接下来，我们更新下MaterialApp的home参数： MaterialApp( ...

3.7K1 0

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

我们经常通过这样的方式，通过BuildContext,可以拿到Theme和MediaQuery //得到状态栏的高度 var statusBarHeight = MediaQuery.of(context...然后从这个类中，去调用获取状态的方法。(Android开发的同学应该很熟悉的套路，类似Picasso、Glide)。但事实上是这样吗？...MediaQuery.of()....(因为其实MaterialApp返回的也是它) MediaQuery状态保存的原理继承InheritedWidget ?...从MediaQuery模仿的套路，我们知道，我们需要一个StatefulWidget作为外层的组件，将我们的继承于InheritateWidget的组件build出去 */ class AppStateContainer

3.9K5 1

使用 Flutter 制作一个简单的笑话生成器应用程序

--more--> 对于这个项目，我们将从 RESTful API 获取数据 API的链接：随机笑话对于这个项目，我不会关注应用程序的 UI，我们只会关注如何从 URL 中获取数据，以及如何显示它们...在我们开始之前，您必须将此包添加到您的 pubspec.yaml 文件中依赖项：http：^0.12.2 有关 HTTP 包的更多信息，请访问：HTTP 包 Flutter 源代码： import...@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner...height: 30.0, ), Card( child: Container( width: MediaQuery.of...(context).size.width * 0.85, height: MediaQuery.of(context).size.height * 0.6,

8671 0

Flutter 小技巧之优化你使用的 BuildContext

因为此时通过 of(context); 获取到的 ScaffoldMessenger 是存在 MaterialApp 里，所以就算页面销毁了也不影响 SnackBar 的执行。...那我在 build 里直接调用不行吗？...真正对性能有影响的是 of(context) 的绑定数量和获取到对象之后的自定义逻辑，例如你通过 MediaQuery.of(context).size 获取到屏幕大小之后，通过一系列复杂计算来定位你的控件...@override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; var padding... = MediaQuery.of(context).padding; var width = size.width / 2; var height = size.width / size.height

1.7K0 0

根据控件位置弹出对话框

，不写itemCount就是无限循环的，然后这些按钮就是我们的点击事件按钮，负责弹出对话框的； new ListView.builder(itemBuilder: button) 然后按钮我们来给事件...Popup类，Popup类接收一个上下文context，用来获取点击的控件的位置， OnItem就是我们的自定义类型声明回调，传了个String类型的值回去给上级接收，这个String类型的值就是赞或评论...width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height,...class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp...width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height,

2.5K3 0

Toast最正确的打开方式（没有之一）

，使用MaterialApp或者WidgetsApp中Navigator对象创建的Overlay. navigator使用overlay来管理可见的路由。...also: /// /// * [OverlayEntry]. /// * [OverlayState]. /// * [WidgetsApp]. /// * [MaterialApp]....下面是一个简单的Toast。Global.context是我自己定义的全局对象，在页面创建的时候保存了BuildContext, 这样在一些地方可以方便调用。...return Container( color: Colors.transparent, margin: EdgeInsets.only( top: MediaQuery.of...2)).then((value) { // 移除层可以通过调用OverlayEntry的remove方法。

3.2K3 0

Flutter之GetX集成及使用详解

GetPlatform.isWeb // 相当于.MediaQuery.of(context).size.height,//但不可改变。Get.heightGet.width // 提供当前上下文。...Get.contextOverlay // 注意：以下方法是对上下文的扩展。// 因为在你的UI的任何地方都可以访问上下文，你可以在UI代码的任何地方使用它。...context.mediaQuerySize() /// 类似于 MediaQuery.of(context).padding。...context.mediaQueryPadding() /// 类似于 MediaQuery.of(context).viewPadding。...context.isPortrait() ///类似于MediaQuery.of(context).devicePixelRatio。

11.4K4 5

Flutter 全栈式——页面框架

对于没有相关基础的人，在正式学习App的UI之前，建议先了解Material Design相关的知识关于Material Design设计风格的资料 MaterialApp MaterialApp代表使用...Material设计风格的应用，里面包含了其所需要的基本控件。...一个完整的Flutter项目是由这个主组件开始的。 MaterialApp属性详解属性类型简述 home Widget 主页。...navigatorObservers List 导航的监听器列表 builder TransitionBuilder 构建Widget前调用，一般做字体大小，方向...context, Widget child) { return MediaQuery( data: MediaQuery.of(context).copyWith(

3.9K3 0

点击加载更多

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

【Flutter 专题】94 初识 MediaQuery

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

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

Flutter之屏幕适配

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

Flutter 系列之GetX的学习(3) --> 其他实用功能

Flutter 组件 | Builder 构造器与 BuildContext 认知

Flutter 强大的MediaQuery控件

Flutter 强大的MediaQuery控件

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

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

flutter中的响应式布局

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

使用 Flutter 制作一个简单的笑话生成器应用程序

Flutter 小技巧之优化你使用的 BuildContext

根据控件位置弹出对话框

Toast最正确的打开方式（没有之一）

Flutter之GetX集成及使用详解

Flutter 全栈式——页面框架

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐