前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

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

作者头像
韩曙亮
发布2023-03-29 16:20:34
5280
发布2023-03-29 16:20:34
举报
文章被收录于专栏:韩曙亮的移动开发专栏

文章目录

一、报错信息


需要使用 MediaQuery 获取当前的 Padding ;

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

/// 使用 MediaQuery 进行全面屏适配
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    /// 获取当前的 padding 信息 , 报错位置 ; 
    final EdgeInsets edgeInsets = MediaQuery.of(context).padding;

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),

        //padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom),

        child: SafeArea(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("顶部内容"),
                Text("底部内容"),
              ],
            ),
        ),
      ),
    );
  }
}
代码语言:javascript
复制
Performing hot reload...
Syncing files to device TAS AN00...

======== Exception caught by widgets library =======================================================
The following assertion was thrown building MyApp(dirty):
No MediaQuery widget ancestor found.

MyApp widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was: MyApp
  dirty
The ownership chain for the affected widget is: "MyApp ← [root]"

No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.

The relevant error-causing widget was: 
  MyApp file:///D:/002_Project/002_Android_Learn/flutter_screen_adaption/lib/main.dart:4:10
When the exception was thrown, this was the stack: 
#0      debugCheckHasMediaQuery.<anonymous closure> (package:flutter/src/widgets/debug.dart:219:7)
#1      debugCheckHasMediaQuery (package:flutter/src/widgets/debug.dart:234:4)
#2      MediaQuery.of (package:flutter/src/widgets/media_query.dart:820:12)
#3      MyApp.build (package:flutter_screen_adaption/main.dart:14:46)
#4      StatelessElement.build (package:flutter/src/widgets/framework.dart:4648:28)
...
====================================================================================================
Reloaded 1 of 553 libraries in 299ms.
在这里插入图片描述
在这里插入图片描述

二、解决方案


获取 Padding 信息 ,

代码语言:javascript
复制
    /// 获取当前的 padding 信息 , 报错位置 ; 
    final EdgeInsets edgeInsets = MediaQuery.of(context).padding;

需要在 MaterialApp 中进行获取 , 这里将上述代码重新进行封装 ,

将 MediaQuery 调用的代码 , 封装到 MaterialApp 组件内部 ;

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

/// 使用 MediaQuery 进行全面屏适配
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    /// 获取当前的 padding 信息
    final EdgeInsets edgeInsets = MediaQuery.of(context).padding;

    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
      ),

      padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom),

      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("顶部内容"),
          Text("底部内容"),
        ],
      ),
    );
  }
}

此时报错信息处理完毕 ;

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-09-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、报错信息
  • 二、解决方案
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档