如何在SwiftUI中实现一行多图等高且保持正确宽高比？

要实现你需要的「一行内3张图片等高且保持各自宽高比」的效果，核心是让所有图片共享统一高度，同时根据自身原始宽高比自动调整宽度。以下是对应SwiftUI的实现方案：

步骤1：获取图片原始宽高比 #

SwiftUI的Image不会直接暴露原始尺寸，我们需要借助UIImage获取每张图片的宽高比（和你UIKit代码中的multiplier逻辑一致，即高度/宽度）：

struct ImageAspectItem {
    let name: String
    let heightWidthRatio: CGFloat // 对应UIKit中的multiplier
}

// 初始化图片数据（建议提前计算并存储，避免重复创建UIImage）
private let imageItems: [ImageAspectItem] = [
    ImageAspectItem(
        name: "0",
        heightWidthRatio: UIImage(named: "0")!.size.height / UIImage(named: "0")!.size.width
    ),
    ImageAspectItem(
        name: "3",
        heightWidthRatio: UIImage(named: "3")!.size.height / UIImage(named: "3")!.size.width
    ),
    ImageAspectItem(
        name: "2",
        heightWidthRatio: UIImage(named: "2")!.size.height / UIImage(named: "2")!.size.width
    )
]

步骤2：实现等高布局 #

这里提供两种可靠的实现方式：

方式一：利用HStack对齐与自适应高度 #

这种方式和你UIKit的栈布局逻辑最接近，通过设置HStack的对齐方式为.fill，让所有图片强制使用同一高度，同时保持宽高比：

struct ContentView: View {
    private let spacing: CGFloat = 2
    
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                // 设置HStack对齐为.fill，确保所有子视图高度一致
                HStack(spacing: spacing, alignment: .fill) {
                    ForEach(imageItems, id: \.name) { item in
                        Image(item.name)
                            .resizable()
                            // aspectRatio接收的是「宽/高」，所以取heightWidthRatio的倒数
                            .aspectRatio(1 / item.heightWidthRatio, contentMode: .fit)
                            // 让图片填满HStack的可用高度
                            .frame(maxHeight: .infinity)
                    }
                }
                Text("Hello, world!")
                Spacer(minLength: 0)
            }
            Spacer(minLength: 0)
        }
    }
}

方式二：精确计算尺寸（更可控） #

如果你需要更精确的尺寸控制，可以用GeometryReader获取可用宽度，计算每张图片的精确宽高，确保高度完全一致：

struct ContentView: View {
    private let spacing: CGFloat = 2
    
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                GeometryReader { proxy in
                    let totalAvailableWidth = proxy.size.width - (spacing * CGFloat(imageItems.count - 1))
                    // 计算总比例：高度一致时，图片宽度与「宽/高」成正比
                    let totalWidthRatio = imageItems.reduce(0) { $0 + (1 / $1.heightWidthRatio) }
                    
                    HStack(spacing: spacing) {
                        ForEach(imageItems, id: \.name) { item in
                            let imageWidth = totalAvailableWidth * (1 / item.heightWidthRatio) / totalWidthRatio
                            let imageHeight = imageWidth * item.heightWidthRatio
                            
                            Image(item.name)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: imageWidth, height: imageHeight)
                        }
                    }
                }
                Text("Hello, world!")
                Spacer(minLength: 0)
            }
            Spacer(minLength: 0)
        }
    }
}

关键逻辑说明 #

• 和UIKit中heightAnchor绑定widthAnchor的逻辑对应，SwiftUI中通过aspectRatio来维护图片的宽高比关系。
• 两种方式都确保了所有图片高度统一，同时各自的宽高比不受破坏，和你UIKit实现的效果完全一致。

内容的提问来源于stack exchange，提问作者Cheok Yan Cheng