Flutter中如何计算Media Query参数以实现组件指定像素宽高？

要算出示例里的x，其实就是简单的代数推导：

已知目标宽度是40像素，你用的公式是 MediaQuery.of(context).size.width / x = 40，把等式变形就能得到x的计算方式：

x = MediaQuery.of(context).size.width / 40

举个实际例子：如果当前设备的屏幕逻辑像素宽度（通过MediaQuery获取）是360，那x = 360 / 40 = 9，此时MediaQuery.of(context).size.width / 9的结果就是40，正好符合需求。

对应到代码里可以这么写：

Container(
  // 直接通过计算得到对应x的结果
  width: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.width / 40),
  // 或者先计算x再代入，可读性更强：
  // final x = MediaQuery.of(context).size.width / 40;
  // width: MediaQuery.of(context).size.width / x,
  height: 40,
  decoration: BoxDecoration(color: Colors.red),
)

需要注意：MediaQuery获取的size.width是逻辑像素，不是设备物理像素。如果你的需求是对应物理像素的40，得结合devicePixelRatio调整，先算出对应的逻辑像素：

目标逻辑像素 = 40 / MediaQuery.of(context).devicePixelRatio

再把这个值代入之前的x计算公式即可。

内容的提问来源于stack exchange，提问作者John Anderson