基于苹果示例：如何实现可变尺寸图片的逐行布局适配并保持宽高比？

我来给你拆解一下怎么搞定这种需求——不管布局怎么逐行变化，图片始终能自适应尺寸且不拉伸变形，核心就是抓住宽高比这个固定值，结合苹果常用的布局逻辑，下面分场景细说：

核心原理：为什么宽高比能保形？ #

每张图片都有自己的原始宽高比（比如16:9、4:3、正方形），这个比例是固定的。只要我们在布局时，让图片的宽高始终遵循这个比例，不管容器怎么变，图片都不会变形：

公式：图片高度 = 图片宽度 × (原始高度/原始宽度) （反过来也成立：图片宽度 = 图片高度 × (原始宽度/原始高度)）

参考苹果示例的具体实现 #

1. 单张图片自适应容器宽度（比如详情页大图） #

苹果的很多页面里，大图会跟着屏幕宽度自动调整高度，保持比例，这是最简单的场景：

SwiftUI 实现

直接用aspectRatio修饰符，配合resizable就能搞定：

Image("your-image")
    .resizable() // 允许图片缩放
    .aspectRatio(contentMode: .fit) // 完整显示图片，不会裁剪；用.fill则填充容器，超出部分裁剪
    .frame(maxWidth: .infinity) // 占满容器宽度

如果要强制统一比例（比如设计要求所有图都是16:9），可以直接指定比例：

.aspectRatio(16/9, contentMode: .fit)

UIKit 实现

用Auto Layout添加宽高比约束即可：

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"your-image"]];
imageView.translatesAutoresizingMaskIntoConstraints = NO;
imageView.contentMode = UIViewContentModeScaleAspectFit; // 对应SwiftUI的.fit
[self.view addSubview:imageView];

// 激活约束：左右贴容器，顶部对齐，同时保持宽高比
[NSLayoutConstraint activateConstraints:@[
    imageView.leadingAnchor.constraintEqualToAnchor:self.view.leadingAnchor,
    imageView.trailingAnchor.constraintEqualToAnchor:self.view.trailingAnchor,
    imageView.topAnchor.constraintEqualToAnchor:self.view.topAnchor,
    [imageView.widthAnchor constraintEqualToAnchor:imageView.heightAnchor multiplier:16.0/9.0]
]];

2. 逐行变化的布局（比如苹果Photos的网格/瀑布流） #

苹果相册的网格就是典型的逐行变化布局——每行图片数量固定，但每张图都保持自己的宽高比，甚至瀑布流里每行高度都不同。实现思路是：

• 先计算每行的可用宽度（容器总宽度 - 间距总和）
• 根据每行图片数量，算出单张图片的宽度
• 用图片的原始宽高比，算出对应的高度
• 把计算好的宽高赋值给图片容器

UICollectionView 实现（类似Photos网格）

// 自定义Cell
class PhotoCell: UICollectionViewCell {
    let imageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        contentView.addSubview(imageView)
        // 让图片填满Cell
        imageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

// 自定义布局
class PhotoGridLayout: UICollectionViewFlowLayout {
    private let itemsPerRow: Int = 3
    private let spacing: CGFloat = 2
    // 假设我们提前拿到了所有图片的宽高比数组
    var photoRatios: [CGFloat] = []
    
    override func prepare() {
        super.prepare()
        guard let collectionView = collectionView else { return }
        
        let availableWidth = collectionView.bounds.width - (spacing * CGFloat(itemsPerRow + 1))
        let itemWidth = availableWidth / CGFloat(itemsPerRow)
        
        // 如果是固定比例的网格，直接设置itemSize
        // itemSize = CGSize(width: itemWidth, height: itemWidth * 1.2)
        
        // 如果是逐行动态高度（瀑布流），需要用UICollectionViewCompositionalLayout或者自定义布局计算每个item的高度
        // 这里简化示例，假设每个item用自己的宽高比计算高度
        // 实际开发中可以在prepare里提前计算所有item的布局属性
    }
}

SwiftUI LazyVGrid 实现

struct Photo: Identifiable {
    let id = UUID()
    let name: String
    let width: CGFloat
    let height: CGFloat
}

struct PhotoGridView: View {
    let photos: [Photo]
    // 3列网格，每列自适应宽度
    let columns = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        LazyVGrid(columns: columns, spacing: 2) {
            ForEach(photos) { photo in
                let ratio = photo.width / photo.height
                Image(photo.name)
                    .resizable()
                    .aspectRatio(ratio, contentMode: .fill)
                    // 根据列宽和比例计算高度
                    .frame(height: UIScreen.main.bounds.width/3 * (photo.height/photo.width))
                    .clipped()
            }
        }
    }
}

关键注意事项 #

• 优先用图片原始比例：除非设计要求统一比例，否则不要硬写固定值，否则会导致图片变形
• 选择合适的contentMode：.scaleAspectFit保证图片完整显示，.scaleAspectFill填充容器（会裁剪边缘），根据需求选择
• 布局变化时更新：比如屏幕旋转、容器尺寸变化，AutoLayout和SwiftUI会自动重新计算，但自定义布局要记得调用invalidateLayout()触发刷新

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