颤振-行/列项目之间的最小间距

Question

我尝试从图片建立布局，但没有成功。我该怎么做？ （请参阅下面的内容）

我这样构建Row：

final row = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Item(),
    SizedBox(width: _minSpacing),
    Item(),
    SizedBox(width: _minSpacing),
    Item(),
  ],
);

效果很好，但无法在溢出时缩减内容的大小。因此，我将此内容放入FittedBox中以支持缩小比例：

final fittedRow = FittedBox(
  fit: BoxFit.scaleDown,
  child: row,
);

此时Row停止在项目之间分配可用空间。 FittedBox似乎要尽可能地小，并且不为Row提供可用空间。因此，我还尝试将其放在Container内以拉伸FittedBox：

Container(
  width: double.infinity,
  child: fittedRow,
);

但是Row仍然不会散布其子代。我最好的办法是设置BoxFit.contain-然后将FittedBox至少开始放大Row以填满整个屏幕。

Answer 1

如果您使用“灵活”小部件包装商品并为其分配弹性值，我想您会得到您想要的，它将根据手机屏幕自动设置商品

Answer 2

您可以使用Flexible Widget并为其指定flex值。

final row = Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Flexible(child: Item(),flex: 1,),

      Flexible(child: Item(),flex: 1,),

      Flexible(child: Item(),flex: 1,),
    ],
  );