如何使小部件的高度最多为 X 像素？

Posted 2023-02-23

【中文标题】如何使小部件的高度最多为 X 像素？

【英文标题】：How can I make a widget be at most X pixels tall?

【发布时间】：2021-01-02 02:24:25

【问题描述】：

我有一个带有一些小部件的Column，我希望这些小部件中的最后一个最多 100 像素高，但如果屏幕上没有足够的空间，那么它应该能够缩小到 0 像素。

所以如果这是我的布局，我希望黑色方块下方的部分最多为 100px，但如果屏幕太小，我希望它相应缩小。

      Center(
        child: Container(
          height: double.infinity,
          width: double.infinity,
          color: Colors.blue,
          child: Column(
            children: <Widget>[
              SizedBox(height: 20),
              Container(color: Colors.white, width: 200, height: 200),
              SizedBox(height: 20),
              Container(color: Colors.grey, width: 400, height: 100),
              Expanded(child: SizedBox(height: double.infinity)),
              SizedBox(height: 50),
              Container(color: Colors.black, width: 200, height: 200),
              SizedBox(height: 100),
            ],
          ),
        ),
      );

注意中间的Expanded - 这会调整灰色和黑色容器之间的距离以填充屏幕高度。问题是有些设备的屏幕太小了，以至于这个Expanded变成了0px，然后底部的SizedBox就会溢出。因此，为什么我希望它调整，但永远不要超过 100 像素。

即使阅读了the documentation about constraints，我仍然不知道如何实现这一点。

【参考方案1】：

回答你的问题，给它一个最大的高度，你可以尝试使用Constrained Box：

ConstrainedBox(
    constraints: BoxConstraints(maxHeight: 100),
    child: SizedBox(height: 100),
)

这将使SizedBox 的高度永远不能超过 100 像素。

但是，要实现您想要的行为，您可以使用Flexible Widget：

Flexible(
  child: SizedBox(height: 100),
);

Remember，Flexible 像 Expanded 一样工作，但它默认使用 FlexFit 的值 FlexFit.loose，因此允许其子级小于可用空间。这样它就不会强制你的 SizedBox 比它应该的大。

【讨论】：

不幸的是，这些解决方案似乎都不起作用。使用ConstrainedBox，溢出仍然像以前一样发生。使用Flexible，溢出消失了，但是当屏幕足够大时，空间会增长到超过所需的100px。

@MagnusW 你是如何验证的？在我使用 DartPad 并为 SizedBox 提供背景颜色的测试中，它没有超过 100 像素。

我在真实设备和 Dartpad 上都试过了，我在两者上都得到了相同的结果。 Flexible 使底部间距大于 100px，ConstrainedBox 导致溢出。我将它包装在MaterialApp 和Scaffold 中。 SizedBox 可能不会超过 100 像素，但黑框下方的间距会，这是我想要防止的。

@MagnusW 尝试将属性mainAxisSize: MainAxisSize.min, 添加到您的列。这就是你想要的结果吗？

很遗憾没有。我想要的结果是黑色容器应该距离屏幕底部100px，除非屏幕太小，那么到底部的距离会更小。实际上这就是我现在所拥有的，但是有一个溢出错误，因为底部 SizedBox 在屏幕太小时会从屏幕上向下而不是缩小。

【参考方案2】：

最好的方法是使用MediaQuery，它还可以为您提供响应式布局。