SwiftUI Path绘制视图横屏无法缩放、忽略安全区失效问题求解

问题根因 #

适配失效的核心原因是路径绘制时硬编码使用了UIScreen.main.bounds获取屏幕尺寸，该值为全局静态值，不会随横竖屏切换、视图布局变化自动更新，也无法正确响应ignoresSafeArea的布局规则，导致路径无法跟随当前视图的实际尺寸重绘，自然无法铺满全屏。

解决方案 #

使用GeometryReader获取当前视图的实时尺寸进行路径绘制，GeometryReader会在视图布局发生变化（如横竖屏切换、分屏）时自动触发重绘，完美适配布局变化。

修改后代码 #

struct BottomRoundShape: View {
    var body: some View {
        ZStack {
            Color.green.ignoresSafeArea()
            // 通过GeometryReader获取当前视图的实时尺寸
            GeometryReader { proxy in
                Path { path in
                    let width = proxy.size.width
                    let height = proxy.size.height
                    path.move(to: CGPoint(x: 0, y: 0))
                    path.addLine(to: CGPoint(x: width, y: 0))
                    path.addLine(to: CGPoint(x: width, y: height / 2))
                    path.addLine(to: CGPoint(x: 0, y: height / 2))
                    path.move(to: CGPoint(x: 0, y: height / 2))
                    path.addQuadCurve(
                        to: CGPoint(x: width, y: height / 2),
                        control: CGPoint(x: width / 2, y: height / 2 + 150)
                    )
                }
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [
                            .init(#colorLiteral(red: 1, green: 0.6, blue: 0.2, alpha: 1)),
                            .init(#colorLiteral(red: 0.9764705882, green: 0.262745098, blue: 0.1529411765, alpha: 1))
                        ]),
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
                .shadow(
                    color: Color(#colorLiteral(red: 0.4745098039, green: 0.4745098039, blue: 0.4745098039, alpha: 1)),
                    radius: 15
                )
            }
            .ignoresSafeArea()
        }
    }
}

效果说明 #

修改后橙色渐变路径会跟随视图尺寸实时变化，横竖屏切换时自动适配铺满全屏，符合预期效果，参考效果如下：

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