Flutter 全局获取 MediaQuery.of(context).size.width 和 height 的最佳方式

Question

我是否需要为每个小部件获取

MediaQuery.of(context).size.width

，或者有没有办法获取它一次，也许在

main.dart

中，存储它并使其在每个文件和每个类中可用？最好不必通过其中任何一个。归根结底，它不是一个永远不会改变的值，因此希望只能得到一次。

我来自 React Native，在 styles.js 文件中运行一次

var {width, height} = require('Dimensions').get('window');

非常容易。

Answer 1

对我有用的一种方法是使用常量文件。在

constant.dart

中，我有全局变量

double deviceWidth

，

double deviceHeight

，

在第一次使用它之前，请确保使用构建上下文在第一个小部件中初始化它们。

然后您可以将

constant.dart

导入到需要

MediaQuery

大小的每个视图中，并使用声明的

deviceHeigth and

deviceWidth` 变量

Answer 2

MediaQuery 实际上是一个继承的小部件，因此您实际上是在全局范围内访问它。

Google I/O 2024 上宣布，随着 Flutter 3.22 的推出，建议使用：

MediaQuery.sizeOf(context).width;
MediaQuery.sizeOf(context).height;

代替：

MediaQuery.of(context).size.width;
MediaQuery.of(context).size.height;

sizeOf(context)

每当属性大小发生更改时都会重建，而

of(context.size)

每当 MediaQuery 发生更改时都会重建小部件，从而使渲染视图的速度变慢。