支持网络图片加载与占位符

支持网络图片加载与占位符，让你的 SwiftUI 图像视图更上一层楼！🚀 你将学会如何优雅地从网络加载图片，并在加载过程中显示占位符，提升用户体验。

网络图片加载

在 SwiftUI 中加载网络图片，你可以使用 AsyncImage。它能自动处理图片的下载和显示。是不是很方便？🎉

AsyncImage(url: URL(string: "https://example.com/image.jpg")) { image in
    image
        .resizable()
        .scaledToFit()
} placeholder: {
    ProgressView() // 加载指示器
}

这段代码会从指定的 URL 加载图片，并在加载完成后显示。如果加载失败，AsyncImage 也会自动处理。

添加占位符

占位符在图片加载时显示，避免用户看到空白区域。你可以使用任何 SwiftUI 视图作为占位符。

• 使用 ProgressView: 显示一个加载指示器。
• 使用默认图片: 显示一个本地图片作为占位。

AsyncImage(url: URL(string: "https://example.com/image.jpg")) { phase in
    switch phase {
    case .empty:
        ProgressView()
    case .success(let image):
        image
            .resizable()
            .scaledToFit()
    case .failure:
        Image(systemName: "photo") // 默认图片
            .resizable()
            .scaledToFit()
    @unknown default:
        EmptyView()
    }
}

优化加载体验

为了更好的用户体验，你可以：

1. 缓存图片: 避免重复下载相同的图片。
2. 设置加载优先级: 优先加载用户可见区域的图片。
3. 错误处理: 当图片加载失败时，显示友好的错误信息。

AsyncImage(url: URL(string: "https://example.com/image.jpg")) { image in
    image
        .resizable()
        .scaledToFit()
} placeholder: {
    Image("placeholderImage") // 本地占位图片
        .resizable()
        .scaledToFit()
}
.onAppear {
    // 设置加载优先级
}
.onReceive(NotificationCenter.default.publisher(for: .imageLoadFailed)) { _ in
    // 处理加载失败的情况
    print("图片加载失败！")
}

通过这些技巧，你可以创建一个功能强大且用户友好的自定义图像视图。加油！💪 你一定可以的！🌟