材料应用和"MediaQuery.of() called with a context that does not contain a MediaQuery"

Question

当我尝试在应用程序中使用MediaQuery时，我收到以下错误：

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

我做了一些研究，我读到的所有内容都表明，如果我使用MaterialApp或WidgetsApp，我应该可以访问MediaQuery。

然而，我在使用MediaQuery的位置使用MaterialApp作为父窗口小部件。。。所以我不明白为什么在我使用的上下文中我不能访问MediaQuery。。。？？

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<Map<String, String>> elementList;
String elementName;
MyApp() {
this.elementName = "TestName";
this.elementList = List<Map<String, String>>();
this.elementList.add({"element1": "Value1"});
this.elementList.add({"element2": "Value2"});
this.elementList.add({"element3": "Value3"});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.15,
child: UNavbar(),
),
Container(
height: MediaQuery.of(context).size.height * 0.7,
child: ListView.builder(              
itemBuilder: (ctx, index) {
return UNode(elementName, elementList);              
}              
)
),          
Container(
height: MediaQuery.of(context).size.height * 0.15,
alignment: Alignment.bottomCenter,
child: UTextbox(),
),
],
),
);
}
}```

Answer 1

我认为MediaQuery需要任何具有Materiallapp所具有的Mediadata的父窗口小部件，所以如果您创建一个包含Materialapp窗口小部件的单独窗口小部件并将所有其他代码放在单独的窗口小部件中。它会起作用的。

注意：我用文本小部件替换了你的所有小部件，并用脚手架包裹列，否则你会得到黑屏。

以下代码可以帮助您了解更多信息。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List<Map<String, String>> elementList;
String elementName;
MyApp() {
this.elementName = "TestName";
this.elementList = List<Map<String, String>>();
this.elementList.add({"element1": "Value1"});
this.elementList.add({"element2": "Value2"});
this.elementList.add({"element3": "Value3"});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.15,
child: Text(""),
),
Container(
height: MediaQuery.of(context).size.height * 0.7,
child: ListView.builder(itemBuilder: (ctx, index) {
return Text("");
})),
Container(
height: MediaQuery.of(context).size.height * 0.15,
alignment: Alignment.bottomCenter,
child: Text("data"),
),
],
));
}
}

Answer 2

之所以出现此问题，是因为您在MediaQuery中使用的上下文没有与之关联的MaterialApp。它作为构建方法的参数传递，并且您正在同一构建方法内创建材质应用程序。要解决此问题，可以使用生成器小部件。

home: Builder(builder: (context) {
return Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.15,
child: UNavbar(),
),
// Remaining Children
],
);
),