未找到 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），或者如果您的上下文可能会发生这种情况 使用来自这些小部件上方的小部件。

我的代码有什么问题？我已经使用了脚手架和 MaterialApp Widgets，而讲师没有使用 MediaQuery，我什至不知道那是什么意思，但它对他有用！

Answer 1

这是使用像MediaQuery 这样的继承小部件时发生的常见错误。现在您可能没有明确使用它，但从您的描述看来，Flutters 的 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 Inspector 中的 Widget 树总是很有帮助的。