SwiftUI：如何在TabView中调整AsyncImage大小并实现圆形显示？

问题根源 #

在SwiftUI里，你用了.scaledToFill()让图片填充指定的frame，但默认情况下，超出frame的图片内容不会被自动裁剪。哪怕设置了.cornerRadius(40)，超出的部分依然会显示，导致圆形效果没生效。

修复方案 #

给AsyncImage的图片渲染部分添加裁剪逻辑，两种方式都能解决问题：

方式1：直接裁剪为圆形（推荐） #

用.clipShape(Circle())替代.cornerRadius(40)，这是实现圆形最直观的方式：

NavigationStack {
    ProfileView(showSignInView: $showSignInView)
}
.tabItem {
    let user = viewModel.user
    
    AsyncImage(url: URL(string: user?.photoUrl ?? ""), scale: 3.5) { image in
        image
            .resizable()
            .scaledToFill()
            .frame(width: 40, height: 40)
            .clipShape(Circle()) // 直接裁剪成圆形
        Text("Profile")
    } placeholder: {
        Image(systemName: "person.circle.fill")
        Text("Profile")
    }
}

方式2：保留圆角+强制裁剪 #

如果坚持想用.cornerRadius，必须搭配.clipped()来裁剪超出frame的内容：

NavigationStack {
    ProfileView(showSignInView: $showSignInView)
}
.tabItem {
    let user = viewModel.user
    
    AsyncImage(url: URL(string: user?.photoUrl ?? ""), scale: 3.5) { image in
        image
            .resizable()
            .scaledToFill()
            .frame(width: 40, height: 40)
            .cornerRadius(40)
            .clipped() // 强制裁剪超出部分
        Text("Profile")
    } placeholder: {
        Image(systemName: "person.circle.fill")
        Text("Profile")
    }
}

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