Flutter中如何将行对齐到高度无约束卡片的底部？

我做了一个无限垂直滚动布局，卡片高度不固定，只限制了图片尺寸，其他元素根据剩余空间自适应。标题最多显示2行，描述最多显示3行，所以文本区域高度差异很大——从2行（1行标题+1行描述）到5行（2行标题+3行描述）。

现在想把包含价格和“Grab”按钮的行对齐到卡片底部，试过各种align/stack方案都没用，除非给卡片设固定高度，但我不想这么做。

预期效果示意图：

当前代码（已移除无关样式） #

无限滚动定义：

...
builderDelegate: PagedChildBuilderDelegate<Deal>(
  itemBuilder: (context, deal, index) => Container(
      padding: EdgeInsets.all(8),
      child: DealRow(deal: deal)
  ),
...

DealRow：

return GestureDetector(
  ...
  child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 商品图片
            Container(
              width: MediaQuery.sizeOf(context).width * layoutConstants.dealImageWidthFraction,
              height: MediaQuery.sizeOf(context).width * layoutConstants.dealImageWidthFraction,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                image: DecorationImage(
                    image: NetworkImage(deal.imageUrl), fit: BoxFit.contain,
                ),
    ...
            ),
    // 商品详情
            Expanded(child: Container(
              padding: EdgeInsets.only(left: 8),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    deal.title,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                  ),
                  SizedBox(height: 8),
                  Text(
                    deal.description,
                    maxLines: layoutConstants.maxDescriptionLines,
                    overflow: TextOverflow.ellipsis,
                  ),
                  Stack(
                    children: [
                      Container(height: 50, alignment: Alignment.centerLeft, child:
                        PriceRow(deal: deal),
                      ),
                      Container(alignment: Alignment.centerRight, child:
                        TextButton(
                          child: Text(layoutConstants.size == LayoutSize.large ? "Grab a Deal" : "Grab", style: TextStyle(color: AppColor.primarySoft),),
...
)

PriceRow：

return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        if (deal.originalPrice != null && deal.originalPrice! > 0) Container(
            padding: const EdgeInsets.only(right: 4),
            child: Text(
                formatCurrency.format(deal.originalPrice),
            )
        ),
        Container(
          child: Text(
            formatCurrency.format(deal.resultingPrice),
          ),
        ),
      ],
    );

核心思路是让右侧详情栏成为弹性布局，用Spacer把价格栏和按钮推到底部，同时调整外层Row的交叉轴对齐方式。

步骤1：调整外层Row的交叉轴对齐 #

将crossAxisAlignment: CrossAxisAlignment.start改为crossAxisAlignment: CrossAxisAlignment.stretch，让Row的子元素（图片和详情栏）撑满Row高度，保证两者高度一致。

步骤2：在文本区域和价格栏间添加Spacer #

在详情Column的文本区域之后、价格栏之前插入const Spacer()，自动填充剩余空间，把价格栏精准推到卡片底部。

修改后的DealRow核心代码：

return GestureDetector(
  ...
  child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          // 关键：让子元素撑满Row高度
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 商品图片部分保持不变
            Container(
              width: MediaQuery.sizeOf(context).width * layoutConstants.dealImageWidthFraction,
              height: MediaQuery.sizeOf(context).width * layoutConstants.dealImageWidthFraction,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                image: DecorationImage(
                    image: NetworkImage(deal.imageUrl), fit: BoxFit.contain,
                ),
              ),
            ),
            // 商品详情部分修改
            Expanded(child: Container(
              padding: EdgeInsets.only(left: 8),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    deal.title,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                  ),
                  SizedBox(height: 8),
                  Text(
                    deal.description,
                    maxLines: layoutConstants.maxDescriptionLines,
                    overflow: TextOverflow.ellipsis,
                  ),
                  // 关键：自动填充剩余空间，推价格栏到底部
                  const Spacer(),
                  // 价格和按钮区域保持不变
                  Stack(
                    children: [
                      Container(height: 50, alignment: Alignment.centerLeft, child:
                        PriceRow(deal: deal),
                      ),
                      Container(alignment: Alignment.centerRight, child:
                        TextButton(
                          child: Text(layoutConstants.size == LayoutSize.large ? "Grab a Deal" : "Grab", style: TextStyle(color: AppColor.primarySoft),),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )),
          ],
        ),
      ),
);

原理说明 #

• CrossAxisAlignment.stretch确保图片和详情栏高度一致，避免因文本长度不同导致的高度错位。
• Spacer会根据文本区域的实际高度自动填充剩余空间，无论文本是2行还是5行，都能让价格栏固定在卡片底部。
• 全程不需要设置卡片固定高度，完全自适应内容和图片尺寸。

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