Flutter Media 查询正文大小答案

【问题标题】：Flutter MediaQuery the body sizeFlutter Media 查询正文大小
【发布时间】：2022-01-30 00:01:30
【问题描述】：

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

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

Result Screen

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

有什么方法可以将正文用作 MediaQuery 的参考？

【问题讨论】：

标签： flutter media-queries

【解决方案1】：

尝试将Column 与被Expanded 包裹的孩子一起使用，每个孩子的大小都相同。

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

【讨论】：

【解决方案2】：

实际上是的，当你得到容器内部的高度时

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

这里我们将 body 的 %30 给这个容器，在这种情况下，您必须有 appbar 的引用，它的 appBaa 并通过填充获取状态栏的高度

【讨论】：