SwiftUI布局求助：如何将图片置于顶部且CentralCardView居中

需求：将名为amazonForest的图片固定在屏幕顶部，同时让CentralCardView保持在屏幕正中间，不使用.offset偏移元素，通过布局结构调整实现。

当前代码问题 #

你的主视图代码中，CentralCardView位于ZStack外部，导致卡片显示在图片下方而非层叠居中；同时图片的布局未明确固定在顶部，需要调整。

原主视图代码 #

var body: some View {
    ZStack {
        Color("whiteBackground").ignoresSafeArea()
        
            Image("amazonForest")
                .resizable()
                .frame(width: .infinity, height: 400)
                .ignoresSafeArea()
        }
        CentralCardView()
}

CentralCardView 代码 #

struct CentralCardView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .cornerRadius(10)
                .foregroundColor(Color("logoColor"))
                .frame(width: 300, height: 100)
                .shadow(radius: 10)
            
            HStack {
                Image("appLogoWhite")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 30, height: 30)
                
                VStack(alignment: .leading) {
                    Text("Inizia a riciclare. ♻️")
                        .font(.custom(FontsManager.SenkronBlokBold.regular, size: 20))
                        .foregroundStyle(Color.white)
                    
                    Text("Scopri come fare cliccando qui.")
                        .font(.custom("NoyhSlim-Semilight", size: 20))
                        .foregroundStyle(Color.white)
                        .minimumScaleFactor(0.5)
                }
                
                Image(systemName: "arrow.right")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 20, height: 20)
                    .foregroundColor(.white)
            }
        }
    }
}

解决方案 #

调整ZStack结构，将CentralCardView移至内部实现层叠，同时优化图片布局属性使其固定在屏幕顶部：

修改后主视图代码 #

var body: some View {
    ZStack {
        // 背景色铺满全屏
        Color("whiteBackground").ignoresSafeArea()
        
        // 顶部图片：固定高度400，紧贴屏幕顶部并保持比例
        Image("amazonForest")
            .resizable()
            .scaledToFill()
            .frame(maxWidth: .infinity, height: 400)
            .clipped() // 裁剪超出高度的部分，避免图片溢出变形
            .ignoresSafeArea(edges: .top) // 忽略顶部安全区，顶到屏幕最上方
        
        // 卡片自动处于ZStack中心（即屏幕正中间）
        CentralCardView()
    }
}

关键调整说明 #

1. 修正ZStack结构：将CentralCardView移入ZStack内部，确保卡片与图片、背景层叠布局。
2. 图片布局优化：
   • .scaledToFill()保持图片原始比例，避免拉伸变形；
   • .ignoresSafeArea(edges: .top)让图片不受状态栏安全区影响，紧贴屏幕顶部；
   • .clipped()裁剪图片超出400高度的部分，保证显示区域规整。
3. 卡片居中：ZStack默认对齐方式为.center，因此CentralCardView会自动处于整个屏幕正中间，无需额外偏移。

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