SwiftUI开发的App如何适配所有iPhone机型 解决小屏布局错乱问题

你当前的布局错乱完全是代码中大量使用固定数值的.offset、.position修饰符，以及写死的frame尺寸导致的。你调试用的iPhone 12 Pro Max屏幕尺寸、宽高比和iPhone SE等小屏设备差异很大，针对大屏调试出来的固定坐标、尺寸数值，放到小屏上自然会出现元素溢出、错位的问题。

• 用容器对齐规则替换固定偏移
  你当前将所有元素放在ZStack中，可直接通过ZStack的alignment参数控制元素的基础对齐位置，再配合相对数值的padding调整位置，完全不需要硬写x/y的固定偏移。比如左上角的装饰图片不需要写offset(x:-163)，可以给ZStack设置alignment: .topLeading，再给对应图片添加.padding(.leading, 20)这类相对内边距即可，所有装饰元素都可以用「对齐+相对padding」的方式替代硬编码偏移。
• 用相对比例尺寸替换固定frame
  你当前给水杯图片写死了width: 375, height: 251的尺寸，这个宽度刚好匹配iPhone 12的屏幕宽度，放到iPhone SE上直接就会超出屏幕边界。可以通过GeometryReader读取当前设备的屏幕尺寸，按比例设置元素宽高，比如水杯宽度设为屏幕宽度的80%，高度按照原图比例自适应，不需要写死数值。
• 删除硬编码的position参数
  你给下方统计内容的VStack写了.position(x: 160, y: 550)，这个坐标完全是针对大屏的固定位置，小屏的y轴总高度都达不到这个数值，自然会出现严重错位。可以通过嵌套VStack+Spacer()的方式控制垂直位置：父VStack上方放置标题和水杯图片，中间加Spacer()撑满剩余空间，下方放统计内容，就能自动适配不同屏幕的高度，不需要手动写位置坐标。
• 文字添加动态适配规则
  大字号的文本（比如页面标题、1.5的数值）可以添加.scaledToFit()修饰符，同时设置最大、最小尺寸限制，避免小屏上文字溢出容器。

// 首先读取屏幕尺寸做适配
GeometryReader { proxy in
    ZStack(alignment: .top) {
        Color("background").ignoresSafeArea()
        // 装饰元素用对齐+padding替代offset
        Image("Group 7")
            .alignmentGuide(.leading) { $0[.leading] }
            .padding(.leading, 20)
        Image("Group 6")
            .alignmentGuide(.trailing) { $0[.trailing] }
            .padding(.trailing, 20)
            .padding(.top, 40)
        Image("Group 8")
            .alignmentGuide(.trailing) { $0[.trailing] }
            .padding(.trailing, 20)
            .padding(.top, proxy.size.height * 0.2)
        
        VStack(spacing: 30) {
            Text("drink water")
                .font(.custom("Lobster 1.4.otf", size: 60))
                .foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1)))
                .tracking(-0.3)
                .multilineTextAlignment(.center)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4)
                .scaledToFit()
                .minimumScaleFactor(0.7)
            
            Image(uiImage: #imageLiteral(resourceName: "Fitz Water"))
                .resizable()
                .aspectRatio(contentMode: .fit)
                // 宽度设为屏幕宽度的80%，高度自适应
                .frame(width: proxy.size.width * 0.8)
                .shadow(color: Color(#colorLiteral(red: 0.9791666865348816, green: 0.9628472328186035, blue: 0.9628472328186035, alpha: 0.25)), radius:25, x:0, y:20)
            
            Spacer()
            
            // 下方统计内容不需要offset和position
            VStack(spacing: 15) {
                Text("Today you have only drank: 0,5 Litres")
                    .font(.system(size: 25, weight: .regular, design: .rounded))
                    .foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1)))
                    .tracking(-0.3)
                    .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4)
                
                Text("Which is not enough...")
                    .font(.system(size: 25, weight: .regular, design: .rounded))
                    .foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1)))
                    .tracking(-0.3)
                    .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4)
                
                Text("You need to drink ")
                    .font(.system(size: 25, weight: .regular, design: .rounded))
                    .foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1)))
                    .tracking(-0.3)
                    .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4)
                
                Text("1.5")
                    .font(.custom("Prompt Regular", size: 110))
                    .foregroundColor(Color(#colorLiteral(red: 0.14, green: 0.73, blue: 1, alpha: 1)))
                    .tracking(-0.3)
                    .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:1, x:0, y:2)
                    .scaledToFit()
                    .minimumScaleFactor(0.7)
                
                Text("Litres more")
                    .font(.system(size: 25, weight: .regular, design: .rounded))
                    .foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1)))
                    .tracking(-0.3)
                    .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4)
                
                Button(action: {
                    print("Edit button was tapped")
                }) {
                    Image("ASD")
                }
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 20)
            }
        }
        .padding(.horizontal, 20)
        .padding(.top, 50)
    }
}

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