如何删除 wrap 小部件（flutter）的行（行）之间的 space？

Question

这是我的 wrap widget 代码，它有多个 material 按钮代表标签，我不知道为什么 wrap widget[= 中的每个新行之间有一个垂直的 space 13=]

    Container(
                    width: double.infinity,
                    child: Wrap(
                      children: [
                        MaterialButton(
                          color: Colors.black,
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                        MaterialButton(
                          minWidth: 1,
                          height: 25,
                          padding: EdgeInsets.zero,
                          onPressed: () {},
                          child: Text(
                            "#software",
                            style: TextStyle(color: defaultColor),
                          ),
                        ),
                      ],
                    ),
                  ),

这是一张描述直线之间垂直 space 的图片，我通过将 运行 space 设置为负值找到了解决方案，这对我有用，但我觉得喜欢它的坏习惯enter image description here

Answer 1

不要直接使用MaterialButton。使用其后代之一：ElevatedButton、TextButton 或 OutlinedButton.

在您的情况下，TextButton 最接近您想要实现的目标，因此您可以以此为起点，然后进一步自定义其 style。

或者，如果您只想允许点击蓝色文本，请使用 GestureDetector 或 InkWell 而不是使用按钮。

Answer 2

在你的情况下，我会使用更常见的按钮，例如 https://www.notion.so/BUTTONS-IN-FLUTTER-f596d17ba17f418381b30ed140cd9239 我会创建一个通用按钮，将每个按钮所需的内容作为参数发送，以免生成更多不必要的代码，您还可以将列或行与 mainAxisAlignment 一起使用：MainAxisAlignment.spaceEvenly， 对齐按钮。

Answer 3

这里可以用两个属性来控制space

1. 间距
2. 运行间距

请测试一下并与我们分享结果。