SwiftUI实现类似UICollectionView的图片网格遇布局问题

你的问题出在Image未被约束到父视图范围内：虽然给ZStack设置了frame，但Image默认保持原始尺寸，加上.aspectRatio(contentMode: .fill)会让它按比例填充却不受frame限制，最终导致铺满屏幕。

修改后的基础网格代码 #

struct ContentView: View {
    var body: some View {
        ScrollView{
            ForEach(0..<8) { i in
                HStack(spacing: 8) { // 添加列间距优化布局
                    ForEach(0..<3) { j in
                        Image("image")
                            .resizable() // 必须添加，让图片支持缩放
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 120, height: 120)
                            .clipped() // 裁剪超出frame的图片部分
                            .background(Color.random)
                    }
                }
                .padding(.bottom, 8) // 添加行间距
            }
        }
    }
}

// 补充Color.random的自定义扩展示例
extension Color {
    static var random: Color {
        Color(red: Double.random(in: 0...1),
              green: Double.random(in: 0...1),
              blue: Double.random(in: 0...1))
    }
}

关键修改说明 #

• .resizable()：SwiftUI的Image默认使用原始尺寸，必须添加该修饰符才能让图片跟随父视图缩放。
• 直接给Image设置frame：确保图片被约束到指定尺寸，配合.clipped()裁剪溢出部分。
• 增加spacing和padding：让网格布局更接近UICollectionView的视觉效果。

更灵活的替代方案：LazyVGrid #

如果需要自适应列数、懒加载等更接近UICollectionView的特性，推荐使用SwiftUI原生的LazyVGrid：

struct ContentView: View {
    // 定义3列自适应布局
    private let gridItems = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: gridItems, spacing: 8) {
                ForEach(0..<24) { _ in
                    Image("image")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(height: 120) // 固定行高，宽度自适应列宽
                        .clipped()
                        .background(Color.random)
                }
            }
            .padding()
        }
    }
}

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