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

news/2025/2/13 20:21:21/

文章目录

  • 一、报错信息
  • 二、解决方案





一、报错信息



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

import 'package:flutter/material.dart';/// 使用 MediaQuery 进行全面屏适配
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget 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("底部内容"),],),),),);}
}
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: MyAppdirty
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 信息 ,

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

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

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

import 'package:flutter/material.dart';/// 使用 MediaQuery 进行全面屏适配
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: HomePage(),);}
}class HomePage extends StatelessWidget{@overrideWidget 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("底部内容"),],),);}
}

此时报错信息处理完毕 ;

在这里插入图片描述


http://www.ppmy.cn/news/779309.html

相关文章

归并排序(思路+代码)

变量&#xff1a; left、right、privot、temp[]、leftIndex、k 思路&#xff1a; 代码&#xff1a; import java.util.Arrays;public class Queue8 {public static void main(String[] args) {int[] arr {8, 9, 1, 7, 2, 3, 5, 4, 6, 0};sort(arr,0,arr.length-1);System.ou…

win10英伟达NVIDIA无法登录

开始菜单&#xff0c;cmd&#xff0c;管理员运行&#xff0c;netsh winsock reset&#xff0c;重启 控制面板&#xff0c;网络和internet&#xff0c;查看基本网络信息并设置连接&#xff0c;点击你的网络连接&#xff08;本地或者无线&#xff09;&#xff0c;属性&#xff0…

英伟达服务器GPU型号,英伟达服务器GPU硬件支持方案.pdf

© 2018 Altair Engineering, Inc. Proprietary and Confidential. All rights reserved. 演讲&#xff1a;服务器/GPU硬件支持方案 r i a t 茅勇 l A 英伟达行业拓展经理 r i a t l A 英伟达制造行业拓展经理&#xff0c;拥有超过10年IT行业经验&#xff0c;熟 悉制造业研…

asic面试题目 英伟达_英伟达笔试题目ASIC|英伟达笔试题

目前&#xff0c;在集成电路界ASIC被认为是一种为专门目的而设计的集成电路。是指应特定用户要求和特定电子系统的需要而设计、制造的集成电路。下面就由小编为大家介绍一下英伟达笔试题目-ASIC的文章&#xff0c;欢迎阅读。 英伟达笔试题目-ASIC篇1 1. 一段RTL代码&#xff0c…

英伟达Isaac介绍

NVIDIA ISAAC文档学习 本文章属于个人学习笔记&#xff0c;希望通过文章记录&#xff0c;规范整理学习内容&#xff0c;方便未来知识整理和分享。如果有错误的地方&#xff0c;还请指出&#xff0c;感谢&#xff01; 写在前面&#xff1a; 本章节主要介绍英伟达 Isaac学习过…

英伟达NX使用笔记

文章目录 前言一、设置从固态硬盘启动1、格式化已安装的固态硬盘2、将启动文件从SD卡复制到固态硬盘 二、安装QT三、英伟达NX安装谷歌拼音输入法四、安装向日葵远程软件五、使用QT编译ROS1、配置QT2、编译ROS 前言 固态硬盘版本英伟达NX ubuntu 18.04、 一、设置从固态硬盘启…

英伟达Nvidia TX1 TX2 串口通信方法

Nvidia TX1 TX2 串口通信方法 英伟达TX2串口串口硬件板子串口描述硬件连接方式测试工具及方法c通信代码 英伟达TX2串口 使用英伟达嵌入式板进行 串口通信 。 串口硬件 串口位置为下图中红色方框位置&#xff0c;标示UARTQ20和J17。 板子串口描述 串口共6个引脚&#xff0…

关于英伟达数字人文章的致歉和说明

大家好&#xff0c;昨天我们发布的一篇英伟达数字人新进展的文章&#xff0c;引发了较大范围的关注和讨论。经过我们的复核及英伟达官方最新确认&#xff0c;这篇文章存在不严谨和失当之处&#xff0c;特此进行说明和致歉。 一、说明一下我们的错误。 今日英伟达官方确认&#…