Flutter 使用不包含MediaQuery的上下文（来自MaterialApp）调用MediaQuery.of（）

所以。。。我得到了一个异常，MediaQuery.of被一个不包含MediaQuery的上下文调用

代码：

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    double topPadding = getRelativeTopPadding(context);

    return MaterialApp(
    home: Scaffold(
        body: Stack(
        children: <Widget>[
            Align(
            alignment: Alignment.center,
            child: Container(
                margin: const EdgeInsets.only(right: 15, left: 15),
                child: Column(children: <Widget>[
                new Padding(
                    padding: EdgeInsets.only(top: topPadding),
                ),
                ],),
            ),
            ),
        ],
        ),
    ),
    );
}

double getRelativeTopPadding(BuildContext context) {
    return MediaQuery.of(context).size.width * 0.5;
}
}

---

我做错了什么？我认为MaterialApp中的BuildContext确实包含MediaQuery？

只是扩展一下我的评论，下面是您需要做的事情

您的材质应用程序将如下所示

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var materialApp = MaterialApp(home: HomePage());
    return materialApp;
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double topPadding = getRelativeTopPadding(context);
    return Scaffold(
      body: Container(
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: Container(
                padding: EdgeInsets.only(top: topPadding),
                margin: const EdgeInsets.only(right: 15, left: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    // new Padding(
                    // padding: EdgeInsets.only(top: topPadding),
                    // ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  double getRelativeTopPadding(BuildContext context) {
    return MediaQuery.of(context).size.width * 0.5;
  }
}

你的主页应该是这样的

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var materialApp = MaterialApp(home: HomePage());
    return materialApp;
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double topPadding = getRelativeTopPadding(context);
    return Scaffold(
      body: Container(
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: Container(
                padding: EdgeInsets.only(top: topPadding),
                margin: const EdgeInsets.only(right: 15, left: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    // new Padding(
                    // padding: EdgeInsets.only(top: topPadding),
                    // ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  double getRelativeTopPadding(BuildContext context) {
    return MediaQuery.of(context).size.width * 0.5;
  }
}

类主页扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
double-topPadding=getRelativeTopPadding（上下文）；
返回脚手架(
主体：容器(
子：堆栈(
fit:StackFit.expand，
儿童：[
对齐(
对齐：对齐.center，
子：容器(
填充：仅限边缘设置（顶部：顶部添加），
边距：仅限常量边集（右：15，左：15），
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
//新填料(
//填充：仅限边缘设置（顶部：顶部添加），
// ),
],
),
),
),
],
),
),
);
}
双getRelativeTopPadding（构建上下文）{
返回MediaQuery.of（context）.size.width*0.5；
}
}

确实如此，但这不是您正在使用的构建上下文。您正在使用根BuildContext，它被传递给

build

函数，该函数返回一个MaterialApp，该MaterialApp有自己的独立BuildContext，这是您想要的。将

home

替换为

builder

，这是一个具有此签名的函数：

（BuildContext上下文，小部件子项）

。这将为您提供一个MediaQuery工作的BuildContext。这是因为您在material应用程序或小部件外部访问MediaQuery，因此您需要将脚手架提取到（material）小部件，这样才能工作。检查我下面的回答