SwiftUI中如何实现固定Frame内VStack子视图靠下对齐

问题原因 #

当前使用的VStack默认按照内容自身尺寸分配垂直布局空间，当商品标题文本变长时，会自动抢占上方图片的布局空间，导致图片被压缩上推，无法成为视觉焦点。

实现思路 #

给图片组件设置最大高度为无穷大，让SwiftUI布局系统优先把容器内除文本固有高度外的所有剩余空间分配给图片，文本自然固定在容器靠下位置，不会挤占图片空间。

修正后代码 #

VStack(alignment: .center, spacing: 0) {
    WebImage(url: URL(string: productData.product_profileImage))
        .resizable()
        .aspectRatio(contentMode: .fit)
        .clipped()
        .padding(5)
        .frame(maxHeight: .infinity) // 核心修改：让图片占据所有剩余可用高度

    Text(productData.product_name)
        .font(.title2)
        .fontWeight(.bold)
        .foregroundColor(.black)
        .minimumScaleFactor(0.5)
        .multilineTextAlignment(.center)
        .padding(.horizontal)
        .padding(.top, 4)

    Text(productData.product_type)
        .font(.caption)
        .foregroundColor(.gray)
        .lineLimit(2)
        .padding(.horizontal)
        .padding(.bottom, 8)
}
.frame(width: 150, height: 200)

修改点说明 #

• 核心调整：给图片组件添加.frame(maxHeight: .infinity)修饰符，布局系统会优先满足图片的空间占用需求，文本只占用自身展示需要的高度，固定在卡片底部区域
• 优化了文本的padding规则，把原来的全方向padding调整为水平边距+小尺寸垂直边距，减少无意义的空间占用，给图片留出更多展示面积
• 这种实现比插入Spacer的方案更稳定，不会出现长文本被异常截断、布局错位的问题。

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