Question

我正在尝试构建一个仅占页面大小三分之一的容器，但是我遇到了一个错误No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().，但我不确定为什么。它在MaterialApp中。

我的代码：

import 'package:flutter/material.dart';


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

class LoginPage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: double.infinity,
                height: MediaQuery.of(context).size.height/3,
              )
            ],
          )
        )
      )
    );
  }
}

Answer 1

您只需要给MaterialApp作为祖先即可。如错误所示。.

这样做吧。

void main() => runApp(MaterialApp(home:LoginPage()));

Answer 2

您必须具有MaterialApp小部件，因为您正在使用Material中的import statement类

检查下面的代码，它可以正常工作：

import 'package:flutter/material.dart';

// wrap your LoginPage widget with a MaterialApp widget
void main() => runApp(MaterialApp(home:LoginPage()));

class LoginPage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: double.infinity,
                height: MediaQuery.of(context).size.height/3,
              )
            ],
          )
        )
      )
    );
  }
}

Answer 3

所有解决方案都不适合我。这是因为 showModalBottomSheet 试图从给定的上下文中访问 MaterialApp 类型的祖先。

使用 Builder 小部件获取 MaterialApp 祖先的新上下文

或

将您的 MaterialAapp 和 Scaffold 小部件分成单独的小部件。

我使用 Builder 的解决方案：

floatingActionButton: Builder(
  builder: (context) => FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () { showModalBottomSheet(
          context: context,
          builder: (context) {
            return Text('Modal bottom sheet', style: TextStyle(fontSize: 30));
          });
      }
  ),
),

Answer 4

此外，在某些情况下，生成的测试用例未更新以匹配您当前的主类

找不到MediaQuery祖先？

4 个答案: