SwiftUI中如何让AsyncImage铺满屏幕并居中显示

你当前的代码中，AsyncImage没有占满父视图的可用空间，导致图片左上对齐。要实现铺满屏幕且居中显示的效果，只需对代码做两处关键调整：

1. 给AsyncImage添加.frame(maxWidth: .infinity, maxHeight: .infinity)，让它撑满整个屏幕的可用区域
2. 给图片添加.clipped()，裁剪掉超出视图范围的部分（因为.aspectRatio(contentMode: .fill)会让图片保持比例并超出容器）

修改后的完整代码：

struct ContentView: View {
    var body: some View {
        AsyncImage(url: URL(string: "https://www.apple.com/v/home/bn/images/promos/ipad-air/promo_ipadair_announce__eqsaj3vip4om_large_2x.jpg")) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipped() // 裁剪超出容器的部分
                .ignoresSafeArea()
        } placeholder: {
            ProgressView()
                .frame(maxWidth: .infinity, maxHeight: .infinity) // 让占位进度条也居中
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 让AsyncImage撑满屏幕
    }
}

关键说明： #

• .frame(maxWidth: .infinity, maxHeight: .infinity) 强制AsyncImage占据父视图的全部可用空间，解决左上对齐的问题
• .clipped() 配合.fill模式，确保图片保持比例的同时不会超出屏幕显示范围
• 给占位的ProgressView也添加同样的frame，让加载过程中进度条也保持屏幕居中

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