Flutter MediaQuery：获取屏幕尺寸

Question

我正在尝试在页面主体创建3个部分，但希望这3个部分始终覆盖整个屏幕。

Container(
        height: MediaQuery.of(context).size.height / 3,
        width: double.infinity,
        color: Colors.red,
      ),

结果屏幕

MediaQuery以整个屏幕作为参考，这就是为什么最后一部分会溢出与应用栏相同的高度。

是否有办法将body用作MediaQuery的参考对象？

- Happeh

Answer 1

尝试使用Column，将子元素包裹在Expanded中，每个子元素的大小将相同。

  Column(
        children: <Widget>[
          Expanded(
            child: Container(color: Colors.white),
          ),
          Expanded(
            child: Container(color: Colors.red),
          ),
          Expanded(
            child: Container(color: Colors.green),
          ),
        ],
      );

- diegoveloper

Answer 2

实际上，当您获取正文内容器的高度时，确实是这样。

(MediaQuery.of(context).size.height -
 appBaa.preferredSize.height - MediaQuery.of(context).padding.top) * 0.3,

在这里，我们将30%的主体内容分配给该容器，在这种情况下，您必须使用appBar引用，这里是appBaa，并通过填充获取状态栏的高度。

- Omar Falah