时间戳

首页 > 解决方案 > Flutter - 行/列项目之间的最小间距

flutter - Flutter - 行/列项目之间的最小间距

问题描述

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

布局说明

我这样构建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以填满整个屏幕。

标签： flutterflutter-layout

解决方案

如果您使用灵活的小部件包装您的项目并为其分配 flex 值，我认为您会得到您想要的，它将根据手机的屏幕自动设置您的项目

推荐阅读