英文:
Listing widgets (chips) that have different width, in a container
问题
我正在尝试创建一个包含类似下面图片所示的元素列表的容器。
我使用了GridView.builder来使它具有响应性，以便元素可以并排排列，而如果没有足够的空间，它们将换行显示。
但问题在于，使用GridView.builder，所有元素将具有相同的固定宽度，因此在我的情况下，我需要元素具有可变宽度（例如：取货和送货服务的宽度较大，因为文本较长）。
英文:
I'm trying to make a container with a list of element like shown in the picture below.
I used gridView.builder to make it responsive so the elements will be next to each other and in case there's no space it will return to next line.
But the problem here is with GridView.builder the elements will all have the same fixed width, thus in my case I need the elements to have variable width (example: pickup and delivery service has a bigger width because the text is longer)
答案1
得分: 1
使用 Wrap 小部件替代。请参阅官方文档：
https://api.flutter.dev/flutter/widgets/Wrap-class.html
正如上面链接中的视频所解释的那样，它与图中所示的芯片非常配合得很好。
英文:
Use the Wrap widget instead. See official docs:
https://api.flutter.dev/flutter/widgets/Wrap-class.html
As the video explains on the link above, it works really well with Chips, as you have in your picture.
答案2
得分: -1
使用"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(),
)
英文:
For this you can use Wrap with action chip, below is example you can refer
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(),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论