SwiftUI中WebImage组件固定宽高失效问题求助

问题根源 #

你的代码里，WebImage虽然设置了宽高，但scaledToFill会保留图片比例，超出frame的部分默认不会裁剪；同时右侧VStack的高度会随文本内容变化，导致HStack整体高度被拉伸，图片的实际显示尺寸也跟着变形。

修复方案 #

修改代码时做这两处关键调整：

1. 给WebImage添加.clipped()，裁剪超出指定宽高的图片部分
2. 给右侧VStack设置固定高度，和图片高度保持一致
3. 可选：将HStack的对齐方式改为.top，让内容顶部对齐更美观

修改后的完整代码 #

HStack(alignment: .top, spacing: 16) {
    WebImage(url: URL(string: "\(news.imageURL)"))
        .resizable()
        .scaledToFill()
        .frame(width: 120, height: 80)
        .clipped() // 裁剪超出frame的图片区域
        .cornerRadius(8)
                
    VStack(alignment: .leading, spacing: 8) {
        Text(news.title ?? "")
            .font(.system(size: 15))
            .fontWeight(.semibold)
            .lineLimit(3)
            .foregroundStyle(.black)
                    
        Spacer()
                    
        Text(news.sourceStr ?? "")
            .font(.system(size: 10))
            .foregroundColor(.gray)
    }
    .frame(height: 80) // 固定VStack高度，和图片保持一致
}

说明 #

• .clipped()确保图片严格限制在120x80的范围内，不会因比例问题超出显示区域
• 固定VStack高度后，HStack的整体高度被锁定，避免图片因父容器高度变化被拉伸变形

内容的提问来源于stack exchange，提问作者Michele de Vita