SwiftUI：如何将AsyncImage置于屏幕顶部并让信息紧贴其下方？

你遇到的问题主要是外层VStack默认带有垂直间距，加上AsyncImage的写法不够规范，导致图片和下方信息之间出现多余空白。按以下方式修改代码就能解决：

修复后的代码 #

struct PokeDetailView: View {
    var pokemon: ViewModel.PokeMon
    var body: some View {
        VStack(spacing: 0) { // 移除VStack默认的垂直间距
            AsyncImage(url: URL(string: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/\(pokemon.id).png")) { phase in
                switch phase {
                case .success(let image):
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                case .empty:
                    ProgressView() // 加载中的占位视图
                case .failure:
                    Image(systemName: "questionmark.circle") // 加载失败的占位视图
                @unknown default:
                    EmptyView()
                }
            }
            .frame(maxWidth: .infinity) // 让图片横向占满容器，避免左右留白

            VStack(spacing: 4) { // 调整内部元素的垂直间距，让内容更紧凑
                Text(pokemon.name.english)
                    .font(.title)
                HStack(spacing: 4) { // 调整属性栏的元素间距
                    Text("属性：")
                    Text(pokemon.type[0])
                    Image("Pokemon_Type_Icon_\(pokemon.type[0])")
                        .resizable()
                        .frame(width: 20, height: 20)
                    
                    if pokemon.type.count > 1 {
                        Text(pokemon.type[1])
                        Image("Pokemon_Type_Icon_\(pokemon.type[1])")
                            .resizable()
                            .frame(width: 20, height: 20)
                    }
                }
            }
            .padding(.top, 8) // 给下方信息加少量顶部内边距，视觉上更舒适
        }
    }
}

关键修改点说明 #

• 外层VStack设置spacing: 0：直接去掉默认的垂直间距，让图片和下方内容紧贴
• 规范AsyncImage的状态处理：原来的写法可能导致布局异常，分状态处理能保证加载中、失败时的布局一致性
• .frame(maxWidth: .infinity)：让图片占满可用宽度，避免图片居中后左右的空白造成“间距大”的视觉错觉
• 调整内部容器的spacing：控制文字、图标之间的间距，让整体布局更紧凑
• 顶部内边距padding(.top, 8)：避免信息完全贴死图片，兼顾美观和紧凑性

内容的提问来源于stack exchange，提问作者Jakob W