Flutter如何解决Row布局标签溢出问题，实现标签自动换行？

问题原因 #

你使用Row组件承载标签列表，Row是单行布局组件，即使内容超出父容器宽度也不会自动换行，这是导致溢出报错的核心原因。你之前尝试用Row包裹Expanded、设置固定宽度都没有生效，是因为这些操作都没有改变Row单行布局的本质，无法实现自动换行效果。

解决方案 #

将盛放标签的Row组件替换为Flutter原生的流式布局组件Wrap即可实现超出自动换行的效果，完美满足你要标签超出后自动换到新行展示的需求。你可以通过Wrap的内置属性直接控制标签的水平和垂直间距，不需要单独给每个标签容器加边距。

调整后的代码片段 #

将你代码中标签部分的代码替换为以下内容即可：

Wrap(
  // 水平方向标签之间的间距，替代原来每个Container单独设置的右侧margin
  spacing: 5,
  // 换行后上下两行标签的垂直间距，可根据视觉需求自行调整
  runSpacing: 4,
  children: ["Buyer Lead", "Seller Lead","Buyer Lead ", "Seller Lead"]
      .map(
        (e) => Container(
          decoration: BoxDecoration(
            color: ColorRes.primaryColor.withOpacity(0.7),
            borderRadius: BorderRadius.circular(4),
          ),
          // 可按需添加垂直内边距让标签的显示效果更美观
          padding: EdgeInsets.symmetric(horizontal: 3, vertical: 2),
          child: Text(
            "#$e",
            style: TextStyle(
              fontSize: 12,
              color: ColorRes.white,
            ),
          ),
        ),
      )
      .toList(),
)

内容的提问来源于stack exchange，提问作者Priyesh