SwiftUI中如何在不同iPhone机型上保持一致的偏移量

我正在开发一款App，在iPhone 14预览界面显示正常，但切换至iPhone 8后，布局偏移量出现错误。请问解决该问题的最佳方案是什么？

我的代码 #

import SwiftUI
struct CustomColor {
    static let lead = Color("lead")
    // Add more here...
}

struct playback: View {
    
    var body: some View {
        
        ZStack {
           
            RoundedRectangle(cornerRadius: 15).fill(CustomColor.lead).frame(width: 393, height: 350).offset(x: 0,y: 350).ignoresSafeArea()
                            
            ProgressView(value: 0.5).tint(.white).background(.gray).frame(width: 340).offset(y: 310)

                SongImage(image: Image("grad")).offset(x: -140, y: 240)
            VStack(alignment: .leading){
                Text("Flashing lights").font(.title2).offset(y:225)
                Text("Kanye West").offset(y:230)
            }
            VStack{
                Text("1:24").foregroundColor(.gray).shadow(color: .black, radius: 3).font(.system(size: 15)).offset(x:-152,y:335)
                Text("2:30").foregroundColor(.gray).shadow(color: .black, radius: 3).font(.system(size: 15)).offset(x:150,y:315)
            }
            Image(systemName: "pause.fill").tint(.gray)
                    .font(.system(size: 50)).offset(x:0,y:360)
                Image(systemName: "forward.fill").font(.system(size: 40)).offset(x:100,y: 360)
                Image(systemName: "backward.fill").font(.system(size: 40)).offset(x:-100,y: 360)
                 
            
                    
            }
        
        }
        
    }


struct playback_Previews: PreviewProvider {
    static var previews: some View {
        playback()
    }
}

期望效果（iPhone 8） #

当前实际效果（iPhone 8） #

问题核心是你用了大量硬编码的offset和固定尺寸frame，这些数值只适配iPhone 14的屏幕，换到小屏机型必然错位。SwiftUI的优势是自适应布局，应该用布局容器和相对约束替代硬数值，重构后的代码如下：

import SwiftUI

struct CustomColor {
    static let lead = Color("lead")
}

struct PlaybackView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            // 背景圆角矩形：自动撑满屏幕宽度，固定高度
            RoundedRectangle(cornerRadius: 15)
                .fill(CustomColor.lead)
                .ignoresSafeArea()
                .frame(height: 350)
            
            VStack(spacing: 20) {
                // 进度条+时间区域
                VStack(spacing: 8) {
                    ProgressView(value: 0.5)
                        .tint(.white)
                        .background(.gray)
                        .frame(maxWidth: 340)
                    
                    HStack {
                        Text("1:24")
                            .foregroundColor(.gray)
                            .shadow(color: .black, radius: 3)
                            .font(.system(size: 15))
                        Spacer()
                        Text("2:30")
                            .foregroundColor(.gray)
                            .shadow(color: .black, radius: 3)
                            .font(.system(size: 15))
                    }
                    .padding(.horizontal, 25)
                }
                
                // 封面+歌曲信息区域
                HStack(alignment: .center, spacing: 20) {
                    SongImage(image: Image("grad"))
                        .frame(width: 80, height: 80)
                    
                    VStack(alignment: .leading, spacing: 5) {
                        Text("Flashing lights")
                            .font(.title2)
                        Text("Kanye West")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    Spacer()
                }
                .padding(.horizontal)
                
                // 播放控制按钮
                HStack(spacing: 40) {
                    Image(systemName: "backward.fill")
                        .font(.system(size: 40))
                        .tint(.gray)
                    
                    Image(systemName: "pause.fill")
                        .font(.system(size: 50))
                        .tint(.gray)
                    
                    Image(systemName: "forward.fill")
                        .font(.system(size: 40))
                        .tint(.gray)
                }
            }
            .padding(.bottom, 20)
        }
    }
}

// 补全SongImage基础实现
struct SongImage: View {
    let image: Image
    var body: some View {
        image
            .resizable()
            .scaledToFit()
            .cornerRadius(10)
    }
}

struct PlaybackView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            PlaybackView()
                .previewDevice("iPhone 14")
            PlaybackView()
                .previewDevice("iPhone 8")
        }
    }
}

关键优化点： #

• 移除所有硬编码offset，用VStack/HStack/Spacer组织布局，元素间距自适应屏幕
• 背景矩形不再固定宽度，自动适配不同机型屏幕
• 时间文本通过HStack+Spacer实现左右对齐，避免手动偏移
• 播放按钮用HStack均匀分布，无需设置x偏移
• 同时添加两种机型预览，实时验证适配效果
• 遵守Swift命名规范，提升代码可读性

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