如何将图像放入所有纵横比的盒子中？答案

【问题标题】：How to fit image into a box of all aspect ratio?如何将图像放入所有纵横比的盒子中？
【发布时间】：2021-12-28 13:48:58
【问题描述】：

我正在处理模板 png，它有一个装箱的地方，我需要在该框中放置任何尺寸的图像。如何适应所有维度的图像以适应颤动的那个盒子？我已附上图片。

我需要在黑色区域添加图像，这是 PNG 图像，我尝试实现的是这里。

body: Stack(
        children: [
          Positioned(
            top: MediaQuery.of(context).size.height / 3.5,
            right: MediaQuery.of(context).size.width / 10,
            child: imagePicked == null
                ? SizedBox()
                : AspectRatio(
                    aspectRatio: 1,
                    child: Image.file(imagePicked, fit: BoxFit.fill),
                  ),
          ),
          const Positioned.fill(
              child: Align(
                  alignment: Alignment.centerRight,
                  child: Image(image: AssetImage('assets/images/notice.png')))),
        ],
      ),

但在这里我无法管理所有维度图像。请帮我对任何尺寸的图像进行排序，以将任何尺寸的图像放入那个也是模板图像的黑盒子中。

【问题讨论】：

你试过Boxfit.fill吗？
是的，我试过了，但图像不适合那个盒子
is notice.png 用于背景？
@YeasinSheikh 是的！
@YeasinSheikh 成功了！而且我还通过删除它在我的代码中添加了比例现在可以工作了！谢谢您的帮助！ :)

标签： image flutter flutter-layout

【解决方案1】：

这里的主要问题是与堆栈的小部件重叠。 Widget 渲染在 Stack 上从下到上优先级。

在您的代码-sn-p 中，占位符是底部小部件，它的优先级高于所选图像。

这就是为什么将占位符作为堆栈上的第一个小部件解决问题的原因。

【讨论】：

但是，如果图像是正方形，即 1:1，图像似乎是从顶部和底部挤压的。有没有办法解决这个问题
我建议使用 SizedBox 作为 Stack 的父级，只需使用 Align/ Positioned 作为 Stack 子级。
我能知道这样做的原因吗？
另一种解决方案是使用带边框的Container 而不是Stack。
Stack 需要来自父级的大小。如果您处理堆栈大小，处理子级将很容易。