Flutter中如何让Row组件紧凑贴合子元素？

你的问题出在用Flexible包裹Row并设置FlexFit.tight——这个配置是强制Row占满父容器的可用宽度，反而会让Row变得松散，和你想要的紧凑效果背道而驰。

要让Row紧凑贴合子元素，按以下步骤修改：

1. 移除包裹Row的Flexible组件
2. 给Row添加mainAxisSize: MainAxisSize.min属性，让Row的宽度仅由子元素总宽度决定

修改后的核心代码如下：

return Align(
  alignment: Alignment.center,
  child: Padding(
    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
    child: Column(children: [
      ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        child: Container(
          decoration: BoxDecoration(border: Border.all()),
          // 移除Flexible，直接放置Row
          child: Row(
            mainAxisSize: MainAxisSize.min, // 关键配置：让Row宽度适配子元素总和
            children: [
              StringBadge(),
              StringBadge(),
              StringBadge(),
            ],
          ),
        ),
      ),
      // 其他代码...
    ]),
  ),
);

如果修改后仍有多余间隔，检查StringBadge组件内部是否自带了margin或padding，调整这些参数就能进一步缩小子元素间的间距。

内容的提问来源于stack exchange，提问作者Stéphane de Luca