使用 LazyVGrid 创建照片画廊

让我们一起用 SwiftUI 的 LazyVGrid 创建一个精美的照片画廊吧！这不仅能让你掌握网格布局，还能做出一个实用的 UI 组件。准备好了吗？让我们开始吧！🚀

准备工作：数据模型和图片资源 🏞️

首先，你需要准备一些图片资源。你可以从网上下载一些免费的图片，或者使用你自己的照片。接下来，创建一个数据模型来表示每张照片的信息。例如：

struct Photo: Identifiable {
    let id = UUID()
    let imageName: String
}

然后，创建一个包含 Photo 对象的数组：

let photos: [Photo] = [
    Photo(imageName: "image1"),
    Photo(imageName: "image2"),
    Photo(imageName: "image3"),
    // 更多照片...
]

构建 LazyVGrid 布局 🧱

现在，让我们使用 LazyVGrid 来显示这些照片。你需要定义一个 GridItem 数组来指定每列的布局。例如，创建一个三列的网格：

let columns: [GridItem] = [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
]

然后，在你的 View 中使用 LazyVGrid：

ScrollView {
    LazyVGrid(columns: columns, spacing: 10) {
        ForEach(photos) { photo in
            Image(photo.imageName)
                .resizable()
                .scaledToFill()
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .aspectRatio(1, contentMode: .fill)
                .clipped()
        }
    }
    .padding()
}

这段代码创建了一个可滚动的 LazyVGrid，每行有三列，照片会自适应单元格的大小。aspectRatio(1, contentMode: .fill) 确保照片保持正方形的比例，clipped() 裁剪超出单元格边界的部分。

添加交互和优化 🌟

为了让画廊更具交互性，你可以添加点击事件，例如点击照片后显示大图。你还可以使用 onAppear 和 onDisappear 来优化图片的加载，避免不必要的资源消耗。

• 使用 onTapGesture 添加点击事件。
• 使用 AsyncImage 异步加载图片，提升性能。
• 使用 ScrollView 确保内容可以滚动。

优化用户体验 📱

为了提升用户体验，你可以考虑以下几点：

1. 加载指示器：在图片加载时显示加载指示器，让用户知道正在加载。
2. 错误处理：处理图片加载失败的情况，显示错误信息。
3. 缓存：使用缓存机制，避免重复加载相同的图片。

通过这些优化，你的照片画廊会更加流畅和用户友好。🎉 相信你已经掌握了使用 LazyVGrid 创建照片画廊的方法！继续探索，创造更多精彩的 UI 吧！