(在不包含MediaQuery的上下文中调用MediaQuery.of()。)错误 - 腾讯云开发者社区

文章/答案/技术大牛

发布

【Flutter 专题】94 初识 MediaQuery

false, bool removeBottom = false, @required Widget child, }) MediaQueryData MediaQueryData 包含关于媒介的相关信息...9. highContrast highContrast 为用户是否要求前景与背景之间的对比度高，主要用于 iOS 设备； print('前后背景高对比度 -> ${MediaQuery.of(context...14. systemGestureInsets systemGestureInsets 为手势边距，如 Android Q 之后添加的向左滑动关闭页面等； print('系统手势边距 -> ${MediaQuery.of...currentContext 获取 BuildContext 上下文环境，从而获取对应尺寸； var _itemExpandedKey = GlobalKey(); var _itemTextKey =...案例尝试 ---- 和尚对于部分 MediaQueryData 的应用和理解还不够深入；如有错误请多多指导！

1.2K3 1

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

Flutter响应式布局的设计没有硬性的规则。在本文中，我将向您展示在设计响应式布局时可以遵循的一些方法。...(context).size; Orientation orientation = MediaQuery.of(context).orientation; return Scaffold...请记住:MediaQuery和LayoutBuilder之间的主要区别在于，MediaQuery使用屏幕的完整上下文，而不仅仅是特定小部件的大小。...但是，如果您现在移动到一个特定的屏幕，然后在视图之间切换，那么您将丢失页面的上下文，也就是说您将始终返回到第一个页面，即“聊天”。为了解决这个问题，我使用了多个回调函数来返回所选页面到主页。...由于本文的唯一目的是教您构建响应式布局，所以我不讨论任何状态管理的复杂性。

3.2K0 0

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

是的

没有找到

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

/telsacoin/telsavideo 后端需要的话请留下邮箱本期最大的优化就是国际化，flutter国家化按以下步骤在pubspec.yaml文件加上 flutter: sdk:..., ); }, ); 然后在需要引用的位置加入: 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:...width、heigth传入到下一个控件，这样好计算界面呈现的宽度与高度 return Videoplayer( item: item, width: MediaQuery.of

1.4K2 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...MainWidget 里被使用；分别在这两个 Widget 的build 方法里打印出对应的 MediaQuery.of(context).padding 和 MediaQuery.of(context...).viewInsets.bottom 的值；如下图所示，在键盘弹起和不弹起时可以看到 padding 值是不同的，而 viewInsets.bottom 都为 0。...MainWidget 使用的 MediaQuery.of(context) 得到的 MediaQueryData 是上级往下传递的，里面包含了 top:47 的状态栏高度和 bottom:34 的底部安全区域高度

2.6K2 0

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

// 你可以判断是否在浏览器中运行 // 在 Windows、iOS、OSX、Android 等上 GetPlatform.isWeb // 相当于：MediaQuery.of(context).size.height...， // 但不可变 Get.height Get.width // 获取当前导航器的上下文 Get.context // 获取前景中 snackbar/对话框/底部表单的上下文，可以在代码中的任何地方使用...Get.contextOverlay // 注意：以下方法是上下文的扩展。...因为你在 UI 的任何地方都有上下文的访问权限，所以可以在 UI 代码的任何地方使用它 // 如果你需要可变的高度/宽度（如桌面或可以缩放的浏览器窗口），你需要使用上下文 context.width...() /// 类似于 MediaQuery.of(context).viewPadding context.mediaQueryViewPadding() /// 类似于 MediaQuery.of

7251 0

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

不用怕，在flutter中为我们提供了一个叫做MediaQuery的利器，大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看，它的意思是媒体查询。...在InheritedWidget中可以实现of方法，通过调用BuildContext.dependOnInheritedWidgetOfExactType来从context中获取最临近的InheritedWidget...this.boldText = false, this.navigationMode = NavigationMode.traditional, }) 可以看到，MediaQueryData中包含了很多有用的属性...viewInsets指的是被系统UI所完全遮罩的部分，比如说我们在进行键盘输入的时候，会弹起键盘界面。...我们可以看到返回了一个新的MediaQuery，其中data部分使用了MediaQuery.of(context)来获取context最近的MediaQuery，然后调用它的removePadding方法将对应的

1.1K2 0

flutter 屏幕适配

屏幕适配之屏幕算法既然是算法适配就必然少不了获取屏幕宽高，我们用的就是媒体查询（MediaQuery），下面是封装方法过后的，当然直接使用也是可以的： // 整屏宽度 double winWidth...(BuildContext context) { return MediaQuery.of(context).size.width; } // 整屏高度 double winHeight(BuildContext...context) { return MediaQuery.of(context).size.height; } 案例1：蓝湖设计图有一张轮播图，宽度是 335 高度是 120，左右间隔是10，...分析：左右间隔：设置margin然后左右20个间隔；间隔和高：除最外边左右，内边都为10间隔，并包含上下，高度固定50；对齐方式：对齐方式默认都为向左对齐；组件：推荐Wrap，动态数据，依次撑开...，使用的是小学数学里的常用加减乘除，用了多少就用整个的减多少，很常见也很简单很实用，在企业开发中用到这套就已经能完全适配所有屏幕了，主要是灵活应变。

1.5K1 0

【Flutter 专题】53 图解 BackdropFilter 高斯模糊

withOpacity 方法，一般是在 0.0-1.0 之间，用来设置颜色值的透明度；也可以采用 withAlpha 方法，效果相同，一般是在 0-255 之间；同时还可以采用 withRed / withGreen...(context).size.width * 0.5, height: MediaQuery.of(context).size.width * 0.5, child...icon_hzw01.jpg'))))) ]) ])); } Widget _itemWid(color, blur) { return Container( width: MediaQuery.of...(context).size.width * 0.5, height: MediaQuery.of(context).size.width * 0.5, child: Stack...Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of

1.9K4 1

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 组件 | Builder 构造器与 BuildContext 认知

data; } BuildContext 可以在所有父辈节点中获取特定的对象，在本文中讲到这就差不多了，后面会为 BuildContext 专门写一篇来详细讨论这些接口作用。...，因为MediaQuery 是在 MaterialApp 内部包含的，这时 context 中是找不到的，所以想要使用 MediaQuery，那就必需将 context 下移到 MaterialApp...也就说明使用 Builder 回调的上下文，是可以使用 MediaQuery.of(ctx) 获取到媒体信息的。 ? ? 到这里，你应该对上下文的层级有了一定的认识。...这时有两种方案：1，抽离组件，在下层组件的上下文中触发。 2，使用 Builder 回调下层的上下文。由于这里东西很少，没必要新建个组件，使用 Builder 就很轻轻方便。...---- 在 IconTheme 中的 merge 方法里也使用了 Builder 组件，这是为了在没有上下文的时候拿到上下文，这样就不需要在 merge 方法中传入上下文了，这也是上下文无中生有的使用方式

2.7K2 1

Flutter 旋转轮

在在本文中，我们将探讨 “Flutter 中的旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项的「Spinwheel」演示程序。...在itemBuilder中，我们将导航容器小部件。在小部件内，我们将添加一个边距，即容器的高度。他的子属性，我们将添加一个列小部件。在此小部件中，我们将添加两个文本，分别是问题和答案。..., itemBuilder: (context, index) => Container( margin: EdgeInsets.all(30.0), height: MediaQuery.of...fontWeight: FontWeight.bold),), Center( child: Spinwheel( size: MediaQuery.of..., Center( child: Spinwheel( size: MediaQuery.of

11.7K2 0

Flutter之屏幕适配

注意：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 作者推荐使用第二种方式...flutter_screenutil 提供了更简洁的调用方法，使用 Dart 扩展为 num 类型扩展了一系列属性可以方便开发者调用，上面的 api 可以通过扩展属性进行如下转换： ScreenUtil...( ///设置文字大小不随系统设置改变 data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0

2.7K2 0

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

首先如下代码所示，在该例子里当用户点击 FloatingActionButton 的时候，代码里做了一个 2秒的延迟，然后才调用 pop 退出当前页面。...当然不行，首先如果在 initState 直接调用如 ScaffoldMessenger.of(context).showSnackBar 方法，就会看到以下的错误提示。...那我在 build 里直接调用不行吗？...真正对性能有影响的是 of(context) 的绑定数量和获取到对象之后的自定义逻辑，例如你通过 MediaQuery.of(context).size 获取到屏幕大小之后，通过一系列复杂计算来定位你的控件...@override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; var padding

1.7K0 0

如何在flutter中构建响应式布局（第五节）

使用相同的代码库使您的应用程序适应如此多样的屏幕尺寸和像素密度始终是一个挑战。在 Flutter 中设计响应式布局没有硬性规定。在本文中，我将向您展示一些在设计此类布局时可以遵循的方法。...(context).size; Orientation orientation = MediaQuery.of(context).orientation; return Scaffold...) { Size screenSize = MediaQuery.of(context).size; return Scaffold( body: Row(...) { Orientation deviceOrientation = MediaQuery.of(context).orientation; return Scaffold(...但是现在，如果您移动到特定屏幕然后在视图之间切换，您将丢失页面的上下文；也就是说，您将始终返回第一页，即 Chats。为了解决这个问题，我使用了多个回调函数将所选页面返回到HomePage.

4.1K1 0

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

文章目录一、报错信息二、解决方案一、报错信息 ---- Flutter 应用运行时报如下错误 : Launching lib\main.dart on Pixel 2 in debug mode....ancestor could be found starting from the context that was passed to MediaQuery.of()....debug.dart:219:7) #1 debugCheckHasMediaQuery (package:flutter/src/widgets/debug.dart:234:4) #2 MediaQuery.of...20210329101628636.jpg", width: 300, ), ), ); } } 二、解决方案 ---- 出现上述问题 , 是因为在界面的根组件..., 没有使用 MaterialApp 组件 , 在 main.dart 中的 main 函数中 , 运行的组件的根组件必须是 MaterialApp ; 在 Scaffold 组件的外层包裹一层 MaterialApp

7614 0

根据控件位置弹出对话框

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

2.5K3 0

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

从源码我们得知 MediaQuery 是一个 InheritedWidget，它会往下共享对应的 MediaQueryData，在 MediaQueryData 中保存了各种设备的信息，比如 size...didUpdateWidget 回调中会调用 _history 里所有路由的 changedExternalState() 方法。...：这个 bug 首先是因为不规范使用了 MediaQueryData.fromWindow(WidgetsBinding.instance.window) ，之后又恰好在有键盘的页面打开后触发了 MaterialApp...所以这里只需要将 MediaQueryData.fromWindow 换成 MediaQuery.of(context) 就可以解决问题，而当在没有 context 或者需要直接使用 MediaQueryData.fromWindow...data:MediaQuery.of(context) .copyWith(textScaleFactor: 1), child: Page2(), );

1.6K8 0

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

我们经常通过这样的方式，通过BuildContext,可以拿到Theme和MediaQuery //得到状态栏的高度 var statusBarHeight = MediaQuery.of(context...然后从这个类中，去调用获取状态的方法。(Android开发的同学应该很熟悉的套路，类似Picasso、Glide)。但事实上是这样吗？...MediaQuery.of()....MediaQuery是我们存在在BuildContext中的属性。其次，可以看到MediaQuery存储在的BuildContext中的位置是在WidgetsApp....然后在子树的任何地方，都可以通过这样的方式来进行获取。定义一个AppState 了解了MediaQuery的存放方式，我们可以实现自己的状态管理，这样在子组件中，就可以同步获取到状态值。

1.5K0 0

基于 Flutter 定制一套快速开发框架(一)

图片加载：使用老牌的cached_network_image包来加载和缓存网络图片。它还支持占位符和错误的处理。另外我们也可以考虑一下，如果需要，实现图片预加载和内存管理策略。...class ScreenSize { static bool isSmallScreen(BuildContext context) { return MediaQuery.of(context...).size.width MediaQuery.of(context...).size.width > 1200; } static bool isMediumScreen(BuildContext context) { return MediaQuery.of(context...).size.width >= 600 && MediaQuery.of(context).size.width <= 1200; }}5.

1K2 0

Flutter 实现刮刮卡效果

**onThreshold：**此属性用于调用回调。 > **accuracy：**此属性用于确定报告应进行的准确性。较低的精度意味着较高的性能。...100), opacity: _opacity, child: Container( height: MediaQuery.of...(context).size.height*0.2, width: MediaQuery.of(context).size.width*0.6,...opacity: _opacity, child: Container( height: MediaQuery.of...(context).size.height*0.2, width: MediaQuery.of(context).size.width*0.6,

6.6K2 0

点击加载更多

【Flutter 专题】94 初识 MediaQuery

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

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

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

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

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

flutter 屏幕适配

【Flutter 专题】53 图解 BackdropFilter 高斯模糊

Flutter之GetX集成及使用详解

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

Flutter 旋转轮

Flutter之屏幕适配

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

如何在flutter中构建响应式布局（第五节）

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

根据控件位置弹出对话框

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

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

基于 Flutter 定制一套快速开发框架(一)

Flutter 实现刮刮卡效果

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐