在容器中列出具有不同宽度的小部件（芯片）

Question

我正在尝试制作一个包含元素列表的容器，如下图所示。

我使用 gridView.builder 使其响应，因此元素将彼此相邻，如果没有空间，它将返回到下一行。

但这里的问题是 GridView.builder 的元素都将具有相同的固定宽度，因此在我的情况下，我需要元素具有可变宽度（例如：取货和送货服务具有更大的宽度，因为文本更长）

Answer 1

改用

Wrap

小部件。见官方文档：

https://api.flutter.dev/flutter/widgets/Wrap-class.html

正如视频在上面的链接中所解释的那样，它与 Chips 配合使用效果非常好，就像您在图片中看到的那样。

Answer 2

为此你可以使用Wrap with action chip，下面是你可以参考的例子

        Wrap(
          spacing: 10,
          runSpacing: 10,
          children: services
              .map(
                (data) => ActionChip(
                  label: Text(
                    data,
                  ),
                  padding: EdgeInsets.all(5),
                  elevation: 5,
                  backgroundColor: Colors.white,
                  disabledColor: Colors.white,
                  onPressed: () {},
                ),
              )
              .toList(),
        ),