iOS14 SwiftUI ScrollView仅设顶部圆角 解决裁切后底部内容消失问题

问题根因 #

iOS14调整了ScrollView的层级渲染逻辑：直接在ScrollView的外层容器上用clipShape做自定义圆角时，系统会把裁剪路径直接绑定到ScrollView的整个滚动视口上，不是只裁剪视图的静态外框。等滚动到底部，超出Shape路径计算范围的内容就会被系统误判成需要裁剪，直接消失。

可行的变通实现 #

核心逻辑很简单：别把裁剪效果直接打在包着ScrollView的容器上，把裁剪拆成背景层、内部内容层分别做，绕开ScrollView视口被绑定裁剪路径的问题
具体操作步骤：

• 删掉原来打在ZStack上的.cornerRadius(10, corners: [.topLeft, .topRight])修饰符
• 给ZStack里的背景色视图单独加顶部圆角裁剪，保证背景不会漏出直角
• 给ScrollView内部承载所有滚动内容的最外层VStack，单独加相同的顶部圆角裁剪
• 全程不要给ScrollView本身、以及包裹它的ZStack直接挂裁剪修饰符

修正后的核心代码片段：

ZStack {
    // 背景层单独做顶部圆角，避免直角露出来
    Color(.systemBackground)
        .clipShape(RoundedCorner(radius: 10, corners: [.topLeft, .topRight]))
        .edgesIgnoringSafeArea(.bottom)
    
    ScrollView {
        VStack {
            // 所有原有表单、按钮等滚动内容都放在这里
            Text("Title")
                .font(.largeTitle)
                .foregroundColor(.primary)
                .bold()
                .padding()
                .frame(maxWidth: .infinity, alignment: .leading)
            // 其余TextField、Button内容保持和原逻辑一致
        }
        // 滚动内容层单独做顶部圆角，避免内容滑出边界
        .clipShape(RoundedCorner(radius: 10, corners: [.topLeft, .topRight]))
    }
}
.frame(height: UIScreen.main.bounds.height/1.5)

踩过的兼容坑 #

• 别把edgesIgnoringSafeArea(.bottom)和裁剪修饰符直接叠在同一个视图上，安全区域的inset偏移会让Shape计算的rect和实际渲染区域对不上，会让裁切异常更严重
• 原来写的RoundedCorner Shape本身不需要改，靠UIBezierPath生成路径的逻辑在iOS14上是完全可用的，bug本质不是Shape的问题，是裁剪修饰符挂的层级不对

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