Flutter布局：如何在Row与Column内对齐SizedBox和文本？

核心问题与解决思路 #

当前布局的核心问题是：最外层RowExt默认垂直居中对齐，导致圆形指示器与文本区域的中心对齐，而非与第一行文本匹配；同时文本区域未明确左对齐，导致下方文本偏移。只需调整两处布局参数即可解决：

修改步骤与代码实现 #

1. 调整最外层Row的垂直对齐方式：根据设计需求选择以下对齐逻辑：
   • 若需与文本顶部对齐：设置crossAxisAlignment: CrossAxisAlignment.start
   • 若需与文本基线对齐（文字垂直居中对齐的常用方式）：设置crossAxisAlignment: CrossAxisAlignment.baseline并指定textBaseline: TextBaseline.alphabetic
2. 确保文本区域左对齐：给ColumnExt设置crossAxisAlignment: CrossAxisAlignment.start，保证下方文本与第一行文本左对齐，避免偏移。

修改后的完整代码：

return RowExt(
  padding: Pad(
    bottom: Sizes.s12.orNullIf(isYear),
    top: Sizes.s20.orNullIf(!isYear),
  ),
  // 方案1：与文本顶部对齐
  crossAxisAlignment: CrossAxisAlignment.start,
  // 方案2：与文本基线对齐（适合文字垂直居中，需取消注释下方两行）
  // crossAxisAlignment: CrossAxisAlignment.baseline,
  // textBaseline: TextBaseline.alphabetic,
  children: <Widget>[
    SizedBox.square(
      dimension: Sizes.s16,
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: context.colors.premiumSelectedPlan,
          shape: BoxShape.circle,
        ),
      ),
    ),
    Expanded(
      child: ColumnExt(
        padding: Pad(
          left: Sizes.s12,
        ),
        // 强制文本左对齐，避免下方内容偏移
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: [
              Text('Annually'),
              _SaleWidget(value: 40)
            ],
          ),
          Row(
            children: [
              Text('test'),
              Text('test')
            ],
          )
        ],
      ),
    ),
  ],
);
}
}

class _SaleWidget extends StatelessWidget {
  const _SaleWidget({required this.value});

  final int value;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: Pad(left: Sizes.s6),
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: context.colors.premiumSale,
          borderRadius: BorderRadius.circular(Sizes.s7),
        ),
        child: TextExt(
          '-$value%',
          style: context.primaryFonts.medium11,
          padding: Pad(
            horizontal: Sizes.s8,
          ),
        ),
      ),
    );
  }
}

补充说明 #

• 若ColumnExt是自定义组件，需确认其支持传入crossAxisAlignment参数，若默认值为CrossAxisAlignment.center，必须改为start才能生效。
• 选择垂直对齐方式时，需对照设计稿的视觉要求，优先使用baseline或start匹配文字排版逻辑。

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