如何让容器适合它的子扑动

Question

我正在尝试在 Twitter 中复制我喜欢的功能。

从上面的图片中可以看出，Twitter 图片的宽度始终完全相同，但高度是相对于图片而言的。我已经能够使用 BoxFit.contain 半复制这个想法，但 Container 不适合图像。

我实施了什么]

Container(
  width: 290.0,
  // height: 400,
  constraints: const BoxConstraints(
    maxHeight: 350,
    minHeight: 150,
  ),
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(27.5),
    image: DecorationImage(
      image: AssetImage(image[itemIndex]),
      fit: BoxFit.fitWidth,
    ),
    boxShadow: const [
      BoxShadow(
        color: Color(0x80000000),
        offset: Offset(0, 2.5),
        blurRadius: 5,
      ),
    ],
  ),
),

我尝试了一个 FittedBox，但没有成功。我尝试了 FractionallySizedBox 但一直出错！ 如果有人能引导我朝着正确的方向前进，我将不胜感激！

Answer 1

您可以在 Container 上尝试固定宽度。但最重要的是使用fit: BoxFit.cover,

 Container(
  width: 290.0,
  // height: 400,
  constraints: const BoxConstraints(
    maxHeight: 350,
    minHeight: 150,
  ),
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(27.5),
    image: DecorationImage(
      image: AssetImage(image[itemIndex]),
      fit: BoxFit.cover, //
    ),
    boxShadow: const [
      BoxShadow(
        color: Color(0x80000000),
        offset: Offset(0, 2.5),
        blurRadius: 5,
      ),
    ],
  ),
),