未找到 MediaQuery 小部件祖先

Question

import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'info.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatefulWidget {\n  @override\n  State<StatefulWidget> createState() => MyAppState();\n}\n\nclass MyAppState extends State<MyApp> {\n  List<info> li = [\n    info(name: 'text1', length: 170, date: DateTime.now()),\n    info(name: 'text2', length: 175, date: DateTime.now()),\n    info(name: 'text3', length: 180, date: DateTime.now()),\n    info(name: 'text4', length: 180, date: DateTime.now()),\n    info(name: 'text5', length: 180, date: DateTime.now()),\n    info(name: 'text6', length: 180, date: DateTime.now()),\n    info(name: 'text7', length: 180, date: DateTime.now()),\n    info(name: 'text8', length: 180, date: DateTime.now()),\n    info(name: 'text9', length: 180, date: DateTime.now()),\n  ];\n\n  void x (BuildContext ctx){\n    showModalBottomSheet(context: ctx, builder: (ctx){\n      return ListView.builder(\n        itemCount: li.length,\n        itemBuilder: (cx , index){\n          return Padding(\n            padding: EdgeInsets.all(10.0),\n            child: Card(\n              shadowColor: Colors.red,\n              elevation: 10.0,\n              color: Colors.blue,\n\n              child: Padding(\n                padding: const EdgeInsets.all(8.0),\n                child: Column(\n                  children: <Widget>[\n                    Row(\n                      mainAxisAlignment: MainAxisAlignment.spaceAround,\n                      children: <Widget>[\n                        Text(\n                          li[index].name,\n                          style: TextStyle(color: Colors.white, fontSize: 20),\n                        ),\n                        Text(\n                          '${li[index].length}',\n                          style: TextStyle(color: Colors.white, fontSize: 20),\n                        ),\n                      ],\n                    ),\n                    Text(\n                      '${li[index].date}',\n                      style: TextStyle(color: Colors.white, fontSize: 20),\n                    ),\n                  ],\n                ),\n              ),\n            ),\n          );\n        },\n      );\n    });\n  }\n\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'App name',\n      home: Scaffold(\n        appBar: AppBar(\n          title: Text('This is the App bar'),\n        ),\n        body: Container(\n          padding: EdgeInsets.all(10.0),\n          height: double.infinity,\n          color: Colors.black,\n        ),\n        floatingActionButton: FloatingActionButton(\n          child: Icon(Icons.add),\n          onPressed: () => x(context)\n        ),\n      ),\n    );\n  }\n}\n

\n

错误：

\n

\n

处理手势时抛出以下断言：未找到\nMediaQuery 小部件祖先。

\n

MyApp 小部件需要 MediaQuery 小部件祖先。找不到 MediaQuery 祖先的特定\n小部件是：MyApp 状态：\nMyAppState#7e07c 受影响的小部件的所有权链是：\n“MyApp \xe2\x86\x90 [root]”

\n

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

\n

\n

我的代码有什么问题？我已经使用过脚手架和 MaterialApp Widgets，而讲师没有使用 MediaQuery，我什至不知道这意味着什么，但这对他有用！

\n

Answer 1

这是使用 Inherited Widget（例如MediaQuery. 现在您可能没有明确使用它，但从您的描述来看，Flutters 的showModalBottomSheet方法似乎可能使用它。

该错误告诉您上面找不到MediaQuery 祖先（即WidgetsApp，CupertinoApp或） 。上面的意思是：MaterialAppcontextcontext

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

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

有两种简单的方法可以解决这个问题：

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

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

这两种解决方案都将为您提供一个新的解决方案context，它将以 MediaQuery 小部件作为其祖先。在 Widget Inspector 中查看 Widget 树总是很有帮助的。

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();
  }
}

`