SwiftUI中clipShape引发底部多余空白，如何实现顶部圆角且底部贴屏？

问题根源 #

你遇到的底部空白是因为：

1. 原代码给整个ZStack添加了全角裁剪，导致底部被多余裁剪；
2. 视图未完全延伸到底部安全区域，出现留白。

修复方案（iOS 14+） #

调整布局层级，单独给背景层设置顶部圆角，并让背景延伸至屏幕底部：

var body: some View {
    ZStack {
        // 背景层：仅顶部圆角 + 紧贴屏幕底部
        Color.blue
            .cornerRadius(25, corners: [.topLeft, .topRight])
            .ignoresSafeArea(edges: .bottom)
        
        ScrollView {
            // 原ScrollView内容保持不变
            HStack {
                Button(action: {
                    showNewScreen.toggle()
                }, label: {
                    Image(systemName: "xmark")
                        .foregroundStyle(Color.white)
                        .padding(.leading)
                })
                Spacer()
                
                Button(action: { showingSheet.toggle() }, label: {
                    Image(systemName: "camera")
                        .foregroundStyle(Color.white)
                        .padding(.trailing)
                })
            }
            .padding(.top)
            
            VStack {
                TextField("Type something here...", text: $visionModel.textFieldText)
                    .padding(.leading)
                    .frame(height: 55)
                    .background(Color.white)
                    .foregroundColor(Color.black)
                    .cornerRadius(10)
                Spacer()
                
                VStack {
                    Text("Which section are you adding to?")
                        .bold()
                    
                    Picker("Which section", selection: $selected) {
                        Text(SegmentSelected.task.rawValue).tag(SegmentSelected.task)
                        Text(SegmentSelected.textSectionOne.rawValue).tag(SegmentSelected.textSectionOne)
                        Text(SegmentSelected.textSectionTwo.rawValue).tag(SegmentSelected.textSectionTwo)
                    }
                    .background(Color.white.opacity(0.5))
                    .cornerRadius(6)
                    .pickerStyle(.segmented)
                }
                
                if selected == .task {
                    VStack() {
                        DatePicker("", selection: $timeSelected, displayedComponents: .hourAndMinute)
                            .labelsHidden()
                    }
                }
                
                Button(action: saveButtonPressed, label: {
                    Text("Save".uppercased())
                        .foregroundColor(.white)
                        .font(.headline)
                        .frame(height: 55)
                        .frame(maxWidth: .infinity)
                        .background(Color.white.opacity(0.2))
                        .cornerRadius(10)
                })
                .alert(isPresented: $showingAlert, content: getAlert)
            }
            .padding(14)
            .sheet(isPresented: $showingSheet) {
                VisionView()
                    .task {
                        await visionModel.requestDataScannerAccessStatus()
                    }
            }
        }
        .foregroundColor(.white)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

关键修改点 #

• 将背景色从ZStack修饰符移至内部独立Color视图，实现单独裁剪；
• 使用cornerRadius(_:corners:)仅设置顶部两个角的圆角，避免底部被裁剪；
• 添加.ignoresSafeArea(edges: .bottom)让背景延伸至屏幕底部边缘；
• 给ZStack设置maxWidth/maxHeight确保视图占满整个屏幕空间。

兼容iOS 13的方案 #

如果需要适配iOS 13，自定义裁剪形状替代系统的cornerRadius(_:corners:)：

// 自定义顶部圆角形状
struct TopRoundedRectangle: Shape {
    var cornerRadius: CGFloat
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 绘制顶部左圆角
        path.move(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
        path.addArc(center: CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(180),
                    endAngle: .degrees(270),
                    clockwise: false)
        // 绘制顶部右圆角
        path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY))
        path.addArc(center: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(270),
                    endAngle: .degrees(0),
                    clockwise: false)
        // 绘制底部直边
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

然后将背景层的cornerRadius替换为：

Color.blue
    .clipShape(TopRoundedRectangle(cornerRadius: 25))
    .ignoresSafeArea(edges: .bottom)

内容的提问来源于stack exchange，提问作者za.ch