MaterialApp 作为 MediaQuery 小部件的祖先。但是怎么办？

Question

我正在尝试根据 window/screen 的宽度制作三种不同的布局。我收到错误 “找不到 MediaQuery 小部件祖先。” 由于有很多示例表明人们对 MediaQuery 小部件祖先有问题，我想，我必须给 MediaQuery 小部件一个 MaterialApp作为祖先。但是我不能全神贯注，我该如何实现呢？有人可以帮助我吗？

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    if (screenSize.width < 600) {
      return lay1();
    } else if (screenSize.width < 800) {
      return lay2();
    } else {
      return lay3();
    }
  }
}

Widget lay1() {
  return Container(
    color: Colors.lightGreenAccent,
  );
}

Widget lay2() {
  return Container(
    color: Colors.lightBlueAccent,
  );
}

Widget lay3() {
  return Container(
    color: Colors.orangeAccent,
  );
}

Answer 1

您应该将 MyApp 小部件包装在 MaterialApp 小部件中，如下所示：

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

MediaQuery 实例由 MaterialApp 提供。这就是为什么在获取 MediaQuery 的当前实例时需要调用 MediaQuery.of(context)，并从那里提取视图的大小

MaterialApp 作为 MediaQuery 小部件的祖先。但是怎么办？

MaterialApp as ancestor of MediaQuery widget. But how?

media-queries

flutter

flutter-web