Flutter Wrap() Widget中的spacing和runSpacing有什么区别？

Question

名为参数 Flutter Wrap() Widget 的间距和运行空间以及运行对齐属性之间有什么区别，请解释一下

Answer 1

spacing

是主轴上子级之间的空间，

runSpacing

是横轴上的空间。

考虑这个例子（默认对齐）

SizedBox(
  width: 300,
  child: Wrap(
    spacing: 20.0, // Horizontal space.
    runSpacing: 30.0, // Vertical space.
    children: <Widget>[
      apple,
      ball,
      champion,
      destructor,
      eagle,
    ],
  ),
)

Answer 2

小部件换行间距是指主轴上两个小部件之间的空间

Widget Wrap runSpacing 是指横轴上两个小部件之间的空间

查看此视频。 https://www.youtube.com/watch?v=z5iw2SeFx2M

Answer 3

spacing: 10.0

：相邻框之间的间隙（在主轴上运行的子项之间要放置多少空间。）

runSpacing: 20.0

：线之间的间隙（在横轴上各线之间要放置多少空间。）

Answer 4

在搜索 SO 问题以删除

Chip

时，此问题排名第一

Wrap

小部件内的填充/间距。

这是我在阅读了几个问题后发现的。

这也适用于

RawChip

小部件。

支持https://stackoverflow.com/a/61558450/11793117。

---

1.删除

Wrap

间距

确保将

Wrap

的

runSpacing

和

spacing

属性设置为 0:

Wrap(
  ...,
  // Left/right spacing between the elements
  spacing: 0,
  // Top/bottom spacing between the elements
  runSpacing: 0,
);

这些是当时的默认值，所以可能无法解决问题。

2.更改

Chip

最小点击目标尺寸

您可能需要设置

materialTapTargetSize

属性。默认值为

MaterialTapTargetSize.padded

，它将芯片的 minHeight 设置为 48px。将其设置为

MaterialTapTargetSize.shrinkWrap

以删除多余的空间。

Chip(
  ...,
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)