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

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

()是一个错误的做法。MediaQuery.of()方法需要在包含MediaQuery的上下文中调用,以便获取当前屏幕的媒体查询信息。

媒体查询是一种用于根据设备的特性(如屏幕宽度、高度、方向等)来应用不同样式和布局的技术。在前端开发中,媒体查询通常用于响应式设计,以确保网站在不同设备上都能良好地显示和交互。

在Flutter中,MediaQuery.of()方法用于获取当前屏幕的媒体查询信息。它需要在包含MediaQuery的上下文中调用,以便正确地获取到媒体查询信息。如果在不包含MediaQuery的上下文中调用该方法,将会导致错误。

以下是一个正确使用MediaQuery.of()方法的示例:

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery Example'),
        ),
        body: Builder(
          builder: (BuildContext context) {
            MediaQueryData mediaQuery = MediaQuery.of(context);
            // 使用mediaQuery获取媒体查询信息,并进行相应的处理
            // ...
            return Container(
              child: Text('MediaQuery Example'),
            );
          },
        ),
      ),
    );
  }
}

在上面的示例中,我们在Builder小部件中调用MediaQuery.of(context)方法来获取媒体查询信息。这样可以确保在正确的上下文中调用该方法,并获取到正确的媒体查询信息。

腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储等。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的产品和服务信息。

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

相关·内容

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

98331

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

Flutter 里大家应该都离不开 MediaQuery ,比如通过 MediaQuery.of(context).size 获取屏幕大小 ,或者通过 MediaQuery.of(context).padding.top...又和键盘状态有关系,所以:键盘弹出可能会导致使用 MediaQuery.of(context) 地方触发 rebuild,举个例子:如下代码所示,我们在 MyHomePage 里使用了 MediaQuery.of...那到这里有人可能就要说了:我们通过 MediaQuery.of(context) 获取到 MediaQueryData ,不就是对应在 MaterialApp 里 MediaQuery...到这里可以看到 MediaQuery.of context 对象很重要:如果页面 MediaQuery.of是 Scaffold 外 context ,获取到是顶层 MediaQueryData...MediaQuery 和键盘状态关系MediaQuery.of 使用不同 context 对性能影响通过 Scaffold 内 context 获取到 MediaQueryData

1.1K20
  • 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.1K21

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