Flutter如何在Row中实现两个组件的等间距排布与自适应尺寸调整

问题根源 #

你当前布局出现异常的核心原因有两个：

• AutoSizeText外层嵌套了Center组件，当文本长度较短时，文本会在你分配的flex=6的宽度区域内居中，导致图标和文本之间的间距随文本长度变化
• 混用Spacer和固定flex占比的方式，没有实现真正的固定等间距效果

修复方案 #

这里提供两种修改方式，你可以根据实际需求选择：

方案1：最小改动适配现有逻辑

仅删除AutoSizeText外层的Center组件，同时给文本增加左对齐配置即可，修改后的核心代码如下：

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20),
  ),
  width: size.width * 0.3,
  height: size.height,
  child: Row(
    children: [
      Spacer(),
      Expanded(
        flex: 3,
        child: LayoutBuilder(
          builder: (context, constraint) {
            return Icon(
              icona,
              color: colore,
              size: constraint.biggest.width * 1,
            );
          },
        ),
      ),
      Spacer(),
      Expanded(
        flex: 6,
        child: AutoSizeText(
          importo,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: colore,
          ),
          textAlign: TextAlign.left, // 新增左对齐配置
          maxLines: 1,
        ),
      ),
      Spacer(),
    ],
  ),
)

方案2：更符合等间距需求的实现

如果你要的是图标、文本、左右边缘之间的间距完全均等，不需要固定flex占比，可以直接用Row自带的spaceEvenly配置，去掉冗余的Spacer和flex分配，性能更优，布局更稳定：

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20),
  ),
  width: size.width * 0.3,
  height: size.height,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 直接实现均等间距排布
    children: [
      Icon(
        icona,
        color: colore,
        size: size.height * 0.7, // 可以根据容器高度调整图标大小，不需要LayoutBuilder
      ),
      AutoSizeText(
        importo,
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: colore,
        ),
        maxLines: 1,
      ),
    ],
  ),
)

效果参考 #

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