Question

我有一个布局，要在其中扩展小部件（容器）到右侧，这是示例中的红色区域。在展开的容器的左侧，有一列，其图像在左上角（示例中为蓝色），并在该列的底部有一个按钮。我确实知道按钮的宽度，它有点超过100像素，但是如果有帮助，我们可以假设它是100像素。

问题在于，蓝色区域（这是用户上传的图片）的大小可能有所不同。来自100x100至800x800。它将是正方形，不支持小于100x100。大图片的大小调整为800x800。

我想实现这一目标：

该列应根据图像大小调整其大小。
该列的宽度应与按钮所需的宽度相同，否则应为100 <=宽度<= 400，具体取决于图像大小。
该列不应向任何方向溢出。
红色区域应最大化。
该按钮应始终位于布局的左下方。
如果不使用LayoutBuilder，我无法事先知道列高，并且我想知道如果不使用LayoutBuilder计算以像素为单位的确切高度，是否可以实现。

这是一个我希望它具有小图像（100x100）的示例，并且可以与图像下面的代码一起使用：

适用于100x100图片的代码：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Container(
          height: 400,
          width: 800,
          child: Row(
            children: <Widget>[
              _buildColumn(),
              Expanded(child: Container(color: Colors.red)),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildColumn() {
    return Container(
      constraints: BoxConstraints(maxWidth: 400),
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _buildImage(),
            MaterialButton(
              color: Colors.green,
              child: Text('Fixed height button'),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }

  Widget _buildImage() {
    // This can vary from 100x100 to 800x800 (always square)
    var size = 100.0;
    return Container(color: Colors.blue, width: size, height: size);
  }

如果通过在_buildImage（）中将size变量更改为800.0来将其更改为800x800图像，则会得到以下布局：

我知道该列的子代高度不受限制，因此它将渲染高度为800px的蓝色容器，从而造成溢出。我确实知道在这种情况下列的高度为400px，按钮的高度为48px，因此我可以计算出最大图像尺寸为352px。通过将蓝色容器包装在具有约束条件（最大宽度：352，最大高度：352）的容器中，可以实现所需的布局：

  Widget _buildImage() {
    // This can vary from 100x100 to 800x800 (always square)
    var size = 800.0;
    return Container(
      constraints: BoxConstraints(maxWidth: 352, maxHeight: 352),
      child: Container(color: Colors.blue, width: size, height: size),
    );
  }

我也可以使用扩展来实现这一点，就像这样：


  Widget _buildImage() {
    // This can vary from 100x100 to 800x800 (always square)
    var size = 800.0;
    return Expanded(
      child: Container(color: Colors.blue, width: size, height: size),
    );
  }

我想避免对高度/宽度使用计算得出的像素，因此让我们继续使用扩展小部件。当我使用小图像（即100x100）打开展开的小部件时，会得到以下结果（这不是我想要的结果）：

我需要在扩展的小部件内对齐我的蓝色方块，以防止其被拉伸，但是当我这样做时（左上对齐），就像这样：

  Widget _buildImage() {
    // This can vary from 100x100 to 800x800 (always square)
    var size = 100.0;
    return Expanded(
      child: Container(
        alignment: Alignment.topLeft,
        child: Container(color: Colors.blue, width: size, height: size),
      ),
    );
  }

然后我得到以下结果：蓝色容器外部的容器会膨胀，并使色谱柱不必要地变宽。当我的图片较小时，我希望与第一张图片具有相同的外观。

如何在不使用LayoutBuilder并计算精确图像约束的情况下实现这种自适应布局？

Answer 1

用容器包装该列并设置高度：

MediaQuery.of(context).size.height * 0.8;

它将在屏幕上包含80％的高度

颤振：关于列子高度的布局问题

1 个答案: