如何实现容器内宽度可变的Listing Widgets(Chips)布局？

要实现这种元素宽度自适应、自动换行的布局，直接用Flutter的Wrap组件就能搞定，完全适配你的需求：

• Wrap会根据子元素自身宽度（比如文本长度）分配空间，空间不足时自动换行
• 可通过spacing和runSpacing设置元素的横向、纵向间距
• 子元素用Container包裹文本，就能实现图中的标签式样式

示例代码：

Wrap(
  spacing: 8.0, // 元素横向间距
  runSpacing: 8.0, // 元素纵向间距
  children: [
    Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text("pickup and delivery service"),
    ),
    Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text("24/7 service"),
    ),
    // 按需添加更多元素
  ],
)

如果需要动态生成列表，直接把children替换为数据源生成的列表即可：

Wrap(
  spacing: 8.0,
  runSpacing: 8.0,
  children: yourDataList.map((item) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text(item),
    );
  }).toList(),
)

这样每个元素的宽度会根据文本内容自动调整，空间不足时自动换行，完全匹配你要的效果。

内容的提问来源于stack exchange，提问作者Med Oussema Zaier