找不到任何MediaQuery小部件的祖先

Question

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'info.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<info> li = [
    info(name: 'text1', length: 170, date: DateTime.now()),
    info(name: 'text2', length: 175, date: DateTime.now()),
    info(name: 'text3', length: 180, date: DateTime.now()),
    info(name: 'text4', length: 180, date: DateTime.now()),
    info(name: 'text5', length: 180, date: DateTime.now()),
    info(name: 'text6', length: 180, date: DateTime.now()),
    info(name: 'text7', length: 180, date: DateTime.now()),
    info(name: 'text8', length: 180, date: DateTime.now()),
    info(name: 'text9', length: 180, date: DateTime.now()),
  ];

  void x (BuildContext ctx){
    showModalBottomSheet(context: ctx, builder: (ctx){
      return ListView.builder(
        itemCount: li.length,
        itemBuilder: (cx , index){
          return Padding(
            padding: EdgeInsets.all(10.0),
            child: Card(
              shadowColor: Colors.red,
              elevation: 10.0,
              color: Colors.blue,

              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Text(
                          li[index].name,
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                        Text(
                          '${li[index].length}',
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ],
                    ),
                    Text(
                      '${li[index].date}',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    });
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App name',
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is the App bar'),
        ),
        body: Container(
          padding: EdgeInsets.all(10.0),
          height: double.infinity,
          color: Colors.black,
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => x(context)
        ),
      ),
    );
  }
}

错误:

在处理手势时抛出了以下断言: 找不到 MediaQuery 祖先小部件。

MyApp 小部件需要MediaQuery祖先小部件。找不到 MediaQuery 祖先的具体小部件是：MyApp 状态: MyAppState＃7e07c 受影响小部件的所有权链为：“MyApp ← [root]”

从传递给 MediaQuery.of（）的上下文开始找不到 MediaQuery 祖先。这可能是因为您尚未添加WidgetsApp、CupertinoApp或MaterialApp小部件（这些小部件引入了MediaQuery），或者如果您使用的上下文来自上述那些小部件之上的小部件，则可能发生这种情况。

我的代码有什么问题吗？我已经使用了 scaffold 和 MaterialApp 小部件，但讲师没有使用 MediaQuery，我甚至不知道那是什么意思，但他却可以正常工作！

- Miran GAMER

---

你在哪里使用MediaQuery？ - Ward Suleiman

Answer 1

这是在使用类似MediaQuery 的继承组件时经常发生的错误。现在，您可能没有明确使用它，但根据您的描述，Flutter的showModalBottomSheet方法可能在使用它。

错误提示你上下文(context)上方找不到任何MediaQuery的祖先（即WidgetsApp，CupertinoApp或MaterialApp）。这意味着在此context上方：

@override
Widget build(BuildContext context) {
 ...
}

这是正确的，因为您将MaterialApp小部件放置在此上下文下方，当您调用x(context)时，它会查找build方法上方的WidgetsApp、CupertinoApp或MaterialApp。

有两种简单的解决方法：

1. 创建一个新的无状态/有状态小部件，并将其传递给home参数；或者
2. 使用Builder小部件，并将其传递给home参数。

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App name',
      home: Builder(builder: (BuildContext context) { 
      ...
      } ),

这两种解决方案都会为您提供一个新的上下文（context），其中将包含一个 MediaQuery widget 作为其祖先。查看 Widget Inspector 中的小部件树总是很有帮助的。

- Calvin Gonsalves

---

感谢您提到了像WidgetsApp这样的替代解决方案；它不一定非要使用MaterialApp。 - Will59

Answer 2

也许您想以这种方式实现

void main() {runApp(const MaterialApp(home: RandomName() ,));} `

class RandomName extends StatefulWidget {
  const RandomName({Key? key}) : super(key: key);

  @override
  _RandomNameState createState() => _RandomNameState();
}

class _RandomNameState extends State<RandomName> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

`

- CrazyXray

Answer 3

只需在主页中拆分您的代码，不要直接提供脚手架，而是提供主页并通过扩展有状态或无状态小部件来创建主页

- Zabi Noori

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 4

你需要用 MaterialApp 包装它。

MaterialApp( home: Scaffold(body: MyHomePage(),),);

- Ali Onur Özdemir

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community