SwiftUI开发中如何实现不同屏幕尺寸下界面布局效果统一？

• 错误依赖UIScreen.main.bounds计算尺寸：该值为设备全局屏幕尺寸，无法适配分屏、横竖屏切换等场景，且不同设备宽高比差异大，固定除以常数的计算逻辑会导致元素比例在不同设备上完全错位。
• 冗余的手动图片缩放逻辑：SwiftUI 原生Image已支持自适应缩放，提前调用resizeImage反而会因为依赖UIScreen的错误尺寸导致图片大小不符合预期。
• 布局约束冲突：底层背景ZStack先设置了高度为屏幕高度/2.9，外层又叠加了高度为屏幕高度/5的frame约束，多余的约束会导致背景裁剪逻辑错乱。

使用GeometryReader获取当前视图的实际可用尺寸，所有元素尺寸都基于当前视图的宽做相对比例计算，保证不同设备下元素的比例完全一致，同时移除冗余的手动图片缩放逻辑，修正布局约束。

struct Screen2: View {
    var body: some View {
        GeometryReader { proxy in
            // 所有尺寸基于当前视图的实际宽度计算，保证比例统一
            let viewWidth = proxy.size.width
            let headerHeight = viewWidth * 0.5 // 头部区域高度固定为宽度的0.5倍，所有设备比例一致
            let coverSize = viewWidth / 4 // 右侧小封面尺寸固定为宽度的1/4
            
            VStack(spacing: 0) {
                ZStack(alignment: .topLeading) {
                    // 底层背景图+蒙层
                    ZStack {
                        Image("cover.jpeg")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: viewWidth, height: headerHeight)
                            .clipped()
                        Color.black
                            .opacity(0.5)
                            .frame(width: viewWidth, height: headerHeight)
                    }
                    .edgesIgnoringSafeArea(.top) // 只让背景忽略顶部安全区域
                    
                    // 上层内容层
                    HStack(alignment: .top) {
                        VStack(alignment: .leading, spacing: 12) {
                            Text("The Suicide Squad")
                                .font(.title)
                                .shadow(color: .white, radius: 5)
                            Button("Publish") {
                                print("Published")
                            }
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .padding()
                        }
                        .padding(.leading, 10)
                        
                        Spacer()
                        
                        Image("cover.jpeg")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: coverSize, height: coverSize)
                            .clipped()
                    }
                    .padding(.top, 16) // 避开顶部安全区域的刘海/灵动岛
                    .padding(.trailing, 10)
                }
                .frame(width: viewWidth, height: headerHeight)
                
                // 下方TESTING栏
                HStack {
                    Spacer()
                    Text("TESTING")
                    Spacer()
                }
                .background(Color.red)
                .padding(.top, 8)
                
                Spacer()
            }
        }
    }
}

• 所有相对比例可根据设计需求调整，只要固定基于当前视图宽度计算，就能保证所有设备下显示比例一致。
• 移除了冗余的resizeImage方法，SwiftUI 原生图片修饰符性能更优，适配更灵活。
• 背景仅忽略顶部安全区域，内容层主动添加顶部内边距，避免刘海/灵动岛遮挡内容。

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