SwiftUI中如何实现文本自动缩放适配固定frame避免截断

文本出现省略号截断是三个逻辑冲突导致的：

• 外层VStack同时锁死了150宽、200高的固定尺寸，内部元素总高度超过200时会被强制压缩
• 图片用aspectRatio(contentMode: .fit)时会优先按自身比例占高度，没有明确高度限制的情况下会挤压下方文本的展示空间
• 两个文本控件加了默认的全方向padding，进一步压缩了文本可用的宽度和纵向空间，其中商品名称文本没有设置换行规则，空间不足时默认会单行截断

按以下步骤调整即可在固定尺寸框架内完整展示内容：

• 给图片设置明确的固定高度，锁定图片的空间占比，避免抢占文本空间；固定尺寸卡片建议图片用fill模式，不会出现边缘空白
• 给文本控件明确设置最大允许行数，搭配minimumScaleFactor让长文本自动小幅缩小字号适配宽度，减少截断概率
• 把文本的全方向默认padding改成小数值的横向padding，压缩不必要的纵向留白，省出文本展示空间
• 总容器最后加clipped()，保证内容不会溢出固定尺寸的边框

var body: some View {
    VStack(alignment: .center, spacing: 4) {
        WebImage(url: URL(string: productData.product_image))
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: 120) // 图片固定占120高度，剩余80高度分配给文本
            .cornerRadius(15)
            .clipped()
            .padding(.top, 5)
        
        Text(productData.product_name)
            .font(.title2)
            .fontWeight(.bold)
            .foregroundColor(.black)
            .lineLimit(2) // 商品名称最多展示2行
            .minimumScaleFactor(0.8) // 文本过长时自动缩小字号至原尺寸的80%，避免截断
            .padding(.horizontal, 8)
        
        Text(productData.product_type)
            .font(.caption)
            .foregroundColor(.gray)
            .lineLimit(1) // 商品类型最多展示1行
            .padding(.horizontal, 8)
            .padding(.bottom, 8)
    }
    .frame(width: 150, height: 200) // 保留你需要的固定卡片尺寸
    .clipped()
}

补充：如果业务场景不需要严格锁死200的固定卡片高度，可以直接删掉外层frame的height参数，给VStack加.fixedSize(horizontal: false, vertical: true)，让容器高度随内容自适应，从根源上消除空间不足导致的文本截断，这种方式在列表类布局里的展示体验更好。

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