SwiftUI中如何根据覆盖内容调整RecipeCard底部区域高度？

核心问题出在固定高度的外层容器和底部矩形的硬编码高度，还有多余的Spacer占用空间。按以下步骤修改就能实现内容自适应：

• 移除外层RoundedRectangle的.frame(width: 132, height: 180)中的固定高度，只保留宽度，让容器由内部内容决定高度
• 删除VStack底部的Spacer()，它会强制占据剩余垂直空间，导致底部文本区域无法扩展
• 把底部Rectangle的.frame(height: 48)改成.frame(minHeight: 48)，这样默认保持至少48的高度，文本换行时会自动向上扩展
• 给文本开启多行显示：取消Text的注释，或者直接添加.lineLimit(nil)（SwiftUI 3+也可以省略这个，默认支持多行）

修改后的完整代码：

RoundedRectangle(cornerRadius: 10)
    .strokeBorder(Color.black, lineWidth: 1)
    .background(RoundedRectangle(cornerRadius: 10).fill(.white))
    .frame(width: 132) // 只固定宽度，高度由内容决定
    .padding(-1)
    .overlay {
        VStack(spacing: 0) {
            Image("coq-au-vin")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(height: 132)
                .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                .padding(.bottom, -16) // 保留这个重叠效果，让图片覆盖底部区域一部分
            
            Rectangle()
                .fill(Color(.white))
                .frame(minHeight: 48) // 最小高度48，内容多了自动扩展
                .overlay {
                    VStack(alignment: .leading, spacing: 4) {
                        Text(recipeName)
                            .font(.custom("Inter-Regular", size: 13))
                            .lineLimit(nil) // 允许多行
                        Text(recipeAuthor)
                            .font(.custom("Inter-Regular", size: 11))
                            .lineLimit(nil) // 允许多行
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding([.top, .leading, .trailing], 8)
                }
            // 移除Spacer()，避免占用多余空间
        }
    }

额外说明：

• 外层圆角矩形现在会完全包裹内部的图片和自适应高度的文本区域
• 底部矩形的minHeight保证了短文本时不会太矮，长文本时自动撑开
• 如果图片和底部区域的重叠效果需要调整，可以微调.padding(.bottom, -16)的数值，或者用.offset替代

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