Flutter中如何像图片所示实现两个Text Widget底部对齐？

针对你提供的代码，要让$和价格文本底部对齐，有两种常用的简洁方案：

方案一：给内部Row设置交叉轴对齐 #

直接给包裹两个Text的内部Row添加crossAxisAlignment: CrossAxisAlignment.end，利用Row的交叉轴对齐属性让子Widget底部对齐：

child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Row(
      // 添加这一行实现内部Text底部对齐
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        const Text(
          '\$',
          style: TextStyle(fontSize: 12),
        ),
        Text(
          '${product.price}',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(fontSize: 16),
        ),
      ],
    ),
    // 其他子Widget...
  ],
),

方案二：使用Baseline Widget（精准对齐字体基线） #

如果遇到字体基线不一致导致的对齐偏差，可以用Baseline组件强制对齐到同一基线：

child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Row(
      children: [
        Baseline(
          baseline: 20, // 数值可根据大字体的实际基线调整，这里以16号字体为例
          baselineType: TextBaseline.alphabetic,
          child: const Text(
            '\$',
            style: TextStyle(fontSize: 12),
          ),
        ),
        Text(
          '${product.price}',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(fontSize: 16),
        ),
      ],
    ),
    // 其他子Widget...
  ],
),

说明 #

• 方案一简单直接，适合大多数场景，借助Row的交叉轴对齐就能快速实现效果。
• 方案二更适合对字体对齐精度要求高的场景，比如不同字体风格或字号差异较大时，通过基线对齐能保证文本视觉上的严格底部对齐。

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