如何在SwiftUI中调整图片与文本的对齐和间距？

需要将图片“Astronaut Meditation (Traced)”和文本“Levitate”按照iPhone 13 Pro Max尺寸的原型图对齐，当前Xcode预览效果与期望效果不符。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack
        {
            //Background
            Image("Background")
                .edgesIgnoringSafeArea([.top])
            
            
                //Meditating Astronaut
                Image("Astronaut Meditaton  (Traced)")
                    
                    .position(x: 102, y: 106)
                //Levitate
                Text("Levitate")
                    .font(.system(size: 34, weight: .semibold, design: .rounded))
                    .foregroundColor(Color.white)
                    .position(x: 110, y: 386)
              
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

1. 用相对布局替代硬编码坐标 #

硬编码position(x:y:)会在不同设备上出现布局错位，建议将图片和文本放入容器做相对对齐，比如用VStack控制垂直间距，再通过内边距调整整体位置：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            // 背景图
            Image("Background")
                .edgesIgnoringSafeArea([.top])
            
            // 组合宇航员图与文本
            VStack(alignment: .leading, spacing: 260) {
                Image("Astronaut Meditation (Traced)") // 修正图片名称拼写及冗余空格
                
                Text("Levitate")
                    .font(.system(size: 34, weight: .semibold, design: .rounded))
                    .foregroundColor(.white)
            }
            .padding(.top, 106)
            .padding(.leading, 102)
        }
    }
}

2. 指定预览设备为iPhone 13 Pro Max #

确保预览时使用目标设备尺寸，避免预览偏差：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 13 Pro Max"))
            .previewDisplayName("iPhone 13 Pro Max")
    }
}

补充说明 #

• 修正了原代码中图片名称的拼写错误和冗余空格，确保图片能正确加载
• 相对布局方式比硬编码坐标更适配多设备，同时精准匹配iPhone 13 Pro Max的原型图位置
• 指定预览设备后，可直接在Xcode中看到目标尺寸下的正确效果

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