如何实现SwiftUI界面可扩展性 解决不同iPhone机型适配问题

SwiftUI 多机型适配最佳实践 #

你当前代码的适配问题核心是大量使用了硬编码的固定尺寸（比如按钮宽度350、固定宽度的Spacer），这类固定数值只匹配iPhone 12的屏幕宽度，在更大/更小的屏幕上自然会出现错位、留白异常的问题。以下是可落地的适配最佳实践：

• 杜绝硬编码通用容器的固定宽高：除非是图标、分割线这类尺寸固定的元素，按钮、卡片这类容器优先使用maxWidth: .infinity配合横向padding实现自适应屏幕宽度，内部元素用Stack的spacing属性或者padding控制间距，不要用固定宽度的Spacer占位。
• 优先使用相对布局规则：SwiftUI的Stack布局、Spacer、padding本身就是自适应的，合理使用可以适配90%以上的常规场景，不需要手动计算屏幕尺寸。
• 需按比例适配的场景用GeometryReader：如果某些元素需要和屏幕宽度成比例（比如卡片宽度为屏幕宽度的90%），可以通过GeometryReader获取父容器尺寸做动态计算，不要写死数值。
• 多尺寸预览验证：Xcode中可以同时添加多机型的PreviewProvider，开发阶段直接查看各设备的显示效果，避免上线后才发现适配问题。

修正后的适配代码 #

struct NewStruct: View {
    @State var someState = false
    var body: some View {
        VStack(spacing: 20) {
            HStack {
                Text("Text1")
                    .padding(.leading, 25)
                Spacer()
            }
            Button(action: {
                someState.toggle()
            }, label: {
                ZStack {
                    RoundedRectangle(cornerRadius: 15)
                        .fill(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                    
                    HStack(spacing: 15) {
                        Image(systemName: "bolt.fill")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 35, height: 35)
                            .cornerRadius(30)
                        
                        Text("Text1")
                            .foregroundColor(.black)
                        
                        Spacer()
                        
                        Image(systemName: "poweroff")
                            .resizable()
                            .frame(width: 25, height: 25)
                        Image(systemName: "power")
                            .resizable()
                            .frame(width: 25, height: 25)
                    }
                    .padding(.horizontal, 20)
                }
            })
            .padding(.horizontal, 20)
        }
    }
}

修正后代码移除了固定宽度约束，所有容器自适应屏幕宽度，在iPhone SE到Pro Max全系列机型都可以保持一致的布局比例，不会出现错位问题。

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