在MatterialApp内部。使用不包含MediaQuery的上下文调用MediaQuery.of() - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

又和键盘状态有关系，所以：键盘的弹出可能会导致使用 MediaQuery.of(context) 的地方触发 rebuild，举个例子：如下代码所示，我们在 MyHomePage 里使用了 MediaQuery.of...这就和路由对象的基类 ModalRoute 有关系，因为在它的内部会通过一个 _modalScopeCache 参数把 Widget 缓存起来，正如注释所说：缓存区域不随帧变化，以便得到最小化的构建。...举个简单的例子，如下代码所示：我们定义了一个 LikeScaffold 控件，在控件内通过 widget.body 传递对象在 LikeScaffold 内部我们使用了 MediaQuery.of...所以通过这个最小例子，可以看到虽然 Scaffold 里大量使用 MediaQuery.of(context) ，但是影响范围是约束在 Scaffold 内部。...MediaQuery 和键盘状态的关系MediaQuery.of 使用不同 context 对性能的影响通过 Scaffold 内的 context 获取到的 MediaQueryData

1.5K2 0

【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...16. physicalDepth physicalDepth 为设备物理层级，和尚暂时还未想到对应的应用场景； print('设备物理层级 -> ${MediaQuery.of(context).physicalDepth...currentContext 获取 BuildContext 上下文环境，从而获取对应尺寸； var _itemExpandedKey = GlobalKey(); var _itemTextKey =

1.2K3 1

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

是的

没有找到

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...MainWidget 使用的 MediaQuery.of(context) 得到的 MediaQueryData 是上级往下传递的，里面包含了 top:47 的状态栏高度和 bottom:34 的底部安全区域高度...事实上这得从 MaterialApp 说起，在 MaterialApp 内部的深处嵌套着一个叫 _MediaQueryFromWindow 的 Widget ，它在内部通过 WidgetsBinding.instance.addObserver

2.6K2 0

【错误记录】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响应式布局

extends StatelessWidget { @override Widget build(BuildContext context) { Size screenSize = MediaQuery.of...(context).size; Orientation orientation = MediaQuery.of(context).orientation; return Scaffold...请记住:MediaQuery和LayoutBuilder之间的主要区别在于，MediaQuery使用屏幕的完整上下文，而不仅仅是特定小部件的大小。...与此同时，您还将学习为大屏幕构建布局的另一个重要概念，即分屏视图(一个屏幕上显示多个页面)。响应式布局：在不同大小的屏幕上使用不同的布局。我们将建立一个名叫Flow的聊天应用程序。...但是，如果您现在移动到一个特定的屏幕，然后在视图之间切换，那么您将丢失页面的上下文，也就是说您将始终返回到第一个页面，即“聊天”。为了解决这个问题，我使用了多个回调函数来返回所选页面到主页。

3.2K0 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之GetX集成及使用详解

，大部分情况下不需要手动调用该方法，GetX 内部会自动处理，当不需要时自动移除 Get.delete(); 3.路由管理路由也是 Flutter 项目重要的一环...GetPlatform.isWeb // 相当于.MediaQuery.of(context).size.height,//但不可改变。Get.heightGet.width // 提供当前上下文。...Get.contextOverlay // 注意：以下方法是对上下文的扩展。// 因为在你的UI的任何地方都可以访问上下文，你可以在UI代码的任何地方使用它。...context.mediaQuerySize() /// 类似于 MediaQuery.of(context).padding。...context.isPortrait() ///类似于MediaQuery.of(context).devicePixelRatio。

11.4K4 6

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手撸一个抖音国际版，看看有多炫

intl: ^0.17.0 # Add this line ffi: ^1.1.2 在底部的flutter设置里添加: # The following section is specific..., ); }, ); 然后在需要引用的位置加入: 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 组件 | Builder 构造器与 BuildContext 认知

比如下面通过 MediaQuery.of(context) 可以获取 MediaQueryData 数据，从而拿到屏幕尺寸、设备分辨率等数据信息，这里核心方法 BuildContext 的 dependOnInheritedWidgetOfExactType...，因为MediaQuery 是在 MaterialApp 内部包含的，这时 context 中是找不到的，所以想要使用 MediaQuery，那就必需将 context 下移到 MaterialApp...也就说明使用 Builder 回调的上下文，是可以使用 MediaQuery.of(ctx) 获取到媒体信息的。 ? ? 到这里，你应该对上下文的层级有了一定的认识。...我们所使用的 XXX.of(context)，都是在该上下文之上去寻找某些对象，Theme.of、Scaffold.of、Navigator.of、Provider.of、Bloc.of 都是这样的，如果你的上下文太靠前...---- 在 IconTheme 中的 merge 方法里也使用了 Builder 组件，这是为了在没有上下文的时候拿到上下文，这样就不需要在 merge 方法中传入上下文了，这也是上下文无中生有的使用方式

2.7K2 1

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

使用相同的代码库使您的应用程序适应如此多样的屏幕尺寸和像素密度始终是一个挑战。在 Flutter 中设计响应式布局没有硬性规定。在本文中，我将向您展示一些在设计此类布局时可以遵循的方法。...) { Orientation deviceOrientation = MediaQuery.of(context).orientation; return Scaffold(...扩展性和灵活性在 aColumn或 aRow中特别有用的小部件是Expandedand Flexible。该?扩展插件扩展行，列的孩子，或Flex使孩子充满可用空间，而?...FractionallySizedBox部件有助于大小及其子总的可用空间的一小部分。它在内部Expanded或Flexible小部件中特别有用。...但是现在，如果您移动到特定屏幕然后在视图之间切换，您将丢失页面的上下文；也就是说，您将始终返回第一页，即 Chats。为了解决这个问题，我使用了多个回调函数将所选页面返回到HomePage.

4.1K1 0

Flutter 实现刮刮卡效果

**onThreshold：**此属性用于调用回调。 > **accuracy：**此属性用于确定报告应进行的准确性。较低的精度意味着较高的性能。...内部子属性添加一个**FlatButton。在FlatButton中，我们将添加文本，颜色，形状，填充和onPressed（）方法。...100), opacity: _opacity, child: Container( height: MediaQuery.of...(context).size.height*0.2, width: MediaQuery.of(context).size.width*0.6,...在刮板内部，我们将添加刮板卡的颜色，增加刮板的精度以提高性能，为刮板区域的百分比级别添加阈值，并为刮板在刮擦期间的不同尺寸添加brushSize。

6.6K2 0

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

内部会将 mediaQuery.viewInsets.bottom 参与到 BoxConstraints 的大小计算，也就是键盘弹起时调整了内部的 bottom 位置来迎合键盘。...从源码我们得知 MediaQuery 是一个 InheritedWidget，它会往下共享对应的 MediaQueryData，在 MediaQueryData 中保存了各种设备的信息，比如 size...didUpdateWidget 回调中会调用 _history 里所有路由的 changedExternalState() 方法。...所以这里只需要将 MediaQueryData.fromWindow 换成 MediaQuery.of(context) 就可以解决问题，而当在没有 context 或者需要直接使用 MediaQueryData.fromWindow...data:MediaQuery.of(context) .copyWith(textScaleFactor: 1), child: Page2(), );

1.6K8 0

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

首先如下代码所示，在该例子里当用户点击 FloatingActionButton 的时候，代码里做了一个 2秒的延迟，然后才调用 pop 退出当前页面。...那我在 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

跨端一致性与体验统一：构建面向全场景的 Flutter UI 自适应架构

而 Flutter 以“像素级精确控制”著称，其默认布局模型（如 Row/Column、固定宽高）在单一设备上表现优异，但在异构设备矩阵中极易导致：手机上完美的界面，在手表上文字重叠平板上的双栏布局...一、设备形态建模：超越“屏幕尺寸”的多维感知传统响应式设计仅依赖 MediaQuery.of(context).size，但 OpenHarmony 提供更丰富的设备上下文： 1.1 OpenHarmony...OpenHarmony 官方提供 Harmony Design System，包含：色彩体系（Color Palette）字体层级（Typography Scale）间距系统（Spacing Grid...根据 density 自动选择 SVG 或位图资源所有组件内部调用 HarmonyTheme.of(context) 获取当前设计参数。...好的设计，懂得在不同舞台上，演绎同一灵魂的不同姿态。

1841 0

Flutter完整开发实战详解(八、实用技巧与填坑)

其实大部分时候，这是 Text 内部的 RenderParagraph 在判断 final bool didOverflowWidth = size.width 的内部是一个 WidgetsApp ，而 WidgetsApp 内有一个 MediaQuery，熟悉它的朋友知道我们可以通过 MediaQuery.of(context).size 去获取屏幕大小...参数，其实在上一篇我们已经说过， Container 其实只是对各种布局的封装，内部的 margin 和 padding 其实是通过 Padding 实现的，而 Padding 不支持负数，所以如果你需要用到负数的情况下...你可以直接使用 PageView + TabBar 去实现，然后 tab 切换时使用 _pageController.jumpTo(MediaQuery.of(context).size.width...方法，每次都会被调用。

2.9K2 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制作具有自定义导航栏的渐进式 Web 应用程序

Widget build(BuildContext context) { return Scaffold( body: Container( height: MediaQuery.of...(context).size.height, width: MediaQuery.of(context).size.width, child: Stack(...我们可以假设，这些是按钮，所以我们可以使用 - “InkWell” - 小部件，它具有 Ontap() 函数，它被包裹着 - “材料”小部件，并取消材料小部件的默认颜色我们手动使颜色透明。...，它可以由圆角矩形容器创建，并创建一个包含文本 1、2、3 的列，并用 Row() 将其包裹起来，并添加如下所示的 ProgressIndicator， Dashboard/src/ProjectStatisticsCards.dart...(context).size.height, width: MediaQuery.of(context).size.width * 0.28, child: Column

3.6K0 0

flutter制作具有自定义导航栏的渐进式 Web 应用程序

3.1K2 0

一文读懂 Flutter 核心概念：Widget、State 与 BuildContext

Flutter 作为当下热门的跨平台开发框架，其设计理念以“一切皆为 Widget”为核心，而 State（状态）与 BuildContext（构建上下文）则是支撑 Widget 工作的关键支柱。...BuildContext 就是 Widget 在这棵树上的“位置引用”，它包含了当前 Widget 所处的层级信息，核心作用是“定位”和“访问”树中其他节点的资源。...获取主题/配置：通过 Theme.of(context) 获取全局主题（如颜色、字体），或通过 MediaQuery.of(context) 获取设备屏幕尺寸等信息。...例如： // 获取全局主题颜色 Color primaryColor = Theme.of(context).primaryColor; // 获取屏幕宽度 double screenWidth = MediaQuery.of...常见误区：context 的“作用域”问题 BuildContext 是“局部的”，仅代表当前 Widget 在树中的位置，不能在其对应的 Widget 构建完成前使用（如在 initState 方法中直接调用

1941 0

点击加载更多

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

【Flutter 专题】94 初识 MediaQuery

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

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

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

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

Flutter之GetX集成及使用详解

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

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

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

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

Flutter 实现刮刮卡效果

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

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

跨端一致性与体验统一：构建面向全场景的 Flutter UI 自适应架构

Flutter完整开发实战详解(八、实用技巧与填坑)

Flutter之屏幕适配

flutter制作具有自定义导航栏的渐进式 Web 应用程序

flutter制作具有自定义导航栏的渐进式 Web 应用程序

一文读懂 Flutter 核心概念：Widget、State 与 BuildContext

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐