MaterialApp作为MediaQuery小部件的祖先.但如何?

Question

我正在尝试根据窗口/屏幕的宽度做出三种不同的布局。我得到错误"没有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)，并从那里提取视图的大小