首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在MatterialApp内部。使用不包含MediaQuery的上下文调用MediaQuery.of()

在MatterialApp内部,使用不包含MediaQuery的上下文调用MediaQuery.of()是无法获取到正确的MediaQuery数据的。MediaQuery是Flutter中用于获取设备屏幕信息和响应式布局的类,它需要在Widget树中的上下文中进行调用。

在MatterialApp内部,可以通过使用Builder Widget来创建一个新的上下文,并在该上下文中调用MediaQuery.of()来获取正确的MediaQuery数据。Builder Widget会创建一个新的上下文,使得我们可以在其中调用MediaQuery.of()方法。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery Example'),
        ),
        body: Builder(
          builder: (BuildContext context) {
            var mediaQuery = MediaQuery.of(context);
            // 在这里可以使用mediaQuery获取设备屏幕信息和响应式布局的数据
            return Container(
              child: Text('MediaQuery Example'),
            );
          },
        ),
      ),
    );
  }
}

在上述示例中,我们在MatterialApp内部使用了Builder Widget,并在其builder函数中创建了一个新的上下文。在这个新的上下文中,我们可以调用MediaQuery.of(context)来获取正确的MediaQuery数据,并在需要的地方使用它。

需要注意的是,MediaQuery.of()方法返回的是最近的包含MediaQuery数据的Widget的上下文,因此在使用Builder Widget时,需要确保它的父级Widget中包含了正确的MediaQuery数据。

推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),它是一款用于移动应用数据分析的产品,可以帮助开发者深入了解用户行为、应用性能等数据,提供数据支持和决策依据。了解更多信息,请访问腾讯云移动应用分析(MTA)产品介绍页面:腾讯云移动应用分析(MTA)

相关搜索:使用不包含MediaQuery的上下文调用MediaQuery.of()使用不包含MediaQuery的上下文(从MaterialApp)调用MediaQuery.of()在使用不包含MediaQuery的上下文调用flutter MediaQuery.of()时出错使用不包含MediaQuery的上下文调用了MediaQuery.of()。(紧急援助)颤动错误:使用不包含MediaQuery的上下文调用了MediaQuery.of()(在不包含MediaQuery的上下文中调用MediaQuery.of()。)错误可以从上下文开始找到使用不包含媒体query.No媒体查询的上下文调用的mediaquery.of()在上下文中调用MediaQuery.of()时,即使在应用程序中未使用MediaQuery,也不会显示MediaQuery错误在iOS模拟器中,用于检查设备大小的Flutter MediaQuery.of(上下文).size.width总是返回相同的错误值Flutter:使用不包含类型为的块的上下文调用的blocprovider.of()使用不包含PhoneAuthenticationBloc类型的块的上下文调用了BlocProvider.of()。颤动函数内部的hvplot调用不显示在Jupyter Notebook中如何修复“使用不包含AutoRouter的上下文请求的AutoRouter操作”在颤动中?在处理手势时引发了以下断言:使用不包含脚手架的上下文调用了Scaffold.of()如何使内部div在水平滚动时居中于包含div的位置?在不包含MainBloc类型的块的上下文中调用BlocProvider.of()使用httparty对内部通信API的POST调用不起作用,因为“查询主体必须包含查询哈希”在不包含WeatherBloc类型的块/Cubit的上下文中调用了BlocProvider.of()在模块内部调用另一个函数:包含箭头的函数捕获“this”的全局值在工厂内部调用函数时,如何使另一个控制器中的$scope值更新?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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.2K20

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

99531
  • 端开发技术——解密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聊天应用程序。...但是,如果您现在移动到一个特定屏幕,然后视图之间切换,那么您将丢失页面的上下文,也就是说您将始终返回到第一个页面,即“聊天”。为了解决这个问题,我使用了多个回调函数来返回所选页面到主页。

    2.3K00

    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方法将对应

    84020

    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.2K21

    如何在flutter中构建响应式布局(第五节)

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

    2.8K10

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

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

    2.5K20

    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.3K10
    领券