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

使用不包含MediaQuery的上下文(从MaterialApp)调用MediaQuery.of()

在使用不包含MediaQuery的上下文(从MaterialApp)调用MediaQuery.of()时,会出现错误。因为MediaQuery.of()方法需要在Widget树中找到最近的包含MediaQuery的上下文,以便获取屏幕尺寸、方向和其他媒体查询信息。

解决这个问题的方法是在需要使用MediaQuery.of()的地方,确保上下文中包含了MediaQuery。一种常见的做法是将需要使用MediaQuery的部分封装在一个Widget中,并将该Widget放置在MaterialApp的下方,以确保它在Widget树中的位置。

以下是一个示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MediaQueryExample(),
    );
  }
}

class MediaQueryExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQuery Example'),
      ),
      body: Center(
        child: Container(
          child: Text(
            'Screen Width: ${MediaQuery.of(context).size.width}',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

在上面的示例中,我们创建了一个名为MediaQueryExample的Widget,并将其放置在MaterialApp的下方。在MediaQueryExample的build方法中,我们使用MediaQuery.of(context)来获取屏幕宽度,并将其显示在Text Widget中。

这样,我们就能够在不包含MediaQuery的上下文中正确地使用MediaQuery.of()方法了。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

MediaQuery 一般情况下,我们会使用如下方式去获取 widget 宽高: final size =MediaQuery.of(context).size; final width =size.width...错误异常中我们可以大概了解到有两种情况会导致上述异常: 当没有 WidgetsApp or MaterialApp 时候,我们使用 MediaQuery.of(context) 来获取数据。...当我们在当前小部件中使用了上一个小部件 context,来使用 MediaQuery.of(context) 获取数据时候。...我们上述代码很显然是属于第一种情况,也就是说我们在使用 MediaQuery.of(context) 地方并没有一个 WidgetsApp or MaterialApp 来提供数据。...解决方法就是将 MediaQuery.of(context) 挪到 MaterialApp 内,如下: import 'package:flutter/material.dart'; class GetWidgetWidthAndHeiget

3.2K20
  • 【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 =

    99531

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

    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

    2K20

    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来实现,平板和手机(或者横屏和竖屏)布局可能是不一样,比如如下布局

    91200

    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来实现,平板和手机(或者横屏和竖屏)布局可能是不一样,比如如下布局

    78200

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