AsyncImage in Swift

AsyncImage 在iOS15后被引入，让图片具有加载网络图片的能力，基本用法和Image使用很类似

加载远程图片，内置了好几种方法，我介绍两种应该是最常用的方法。你可以自定义大小和样式。在图片被返回的地方

第一种

你可以指定一个Placeholder，当图片没加载出来时，就会显示你placeholder里面提供的视图。图片返回了就可以对图片进行处理，然后显示

AsyncImage(url: url) { image in
                image
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200, height: 200)
                    .cornerRadius(30)
            } placeholder: {
                ProgressView()
            }

第二种

它会返回图片下载的阶段，它是一个枚举，总共三个值：

case empty -> No image is loaded.
case success(Image) -> An image succesfully loaded.
case failure(Error) -> An image failed to load with an error.

AsyncImage(url: url) { phase in
                switch phase {
                case .empty:
                    ProfileView()
                case .success(let image):
                    image
                        .resizable()
                        .scaledToFit()
                        .frame(width: 250, height: 250)
                        .cornerRadius(30)
                case .failure(let error):
                    Image(systemName: "questionmark")
                        .font(.title)
                default:
                    Image(systemName: "questionmark")
                        .font(.title)
                }
            }

以下是全部代码：

import SwiftUI

struct AsyncImageSample: View {
    let url = URL(string: "https://developer.apple.com/home/images/tile-ipados-17/ipados-17-b-large.png?1")
    var body: some View {
        VStack {
            AsyncImage(url: url) { image in
                image
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200, height: 200)
                    .cornerRadius(30)
            } placeholder: {
                ProgressView()
            }
            
            AsyncImage(url: url) { phase in
                switch phase {
                case .empty:
                    ProfileView()
                case .success(let image):
                    image
                        .resizable()
                        .scaledToFit()
                        .frame(width: 250, height: 250)
                        .cornerRadius(30)
                case .failure(let error):
                    Image(systemName: "questionmark")
                        .font(.title)
                default:
                    Image(systemName: "questionmark")
                        .font(.title)
                }
            }
        }
    }
}

大家有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ