SwiftUI中如何仅为View的左上角和右上角设置圆角

要实现只给白色背景View设置左上角和右上角圆角，同时消除底部白色边框，你可以直接使用SwiftUI提供的cornerRadius(_:corners:)方法，替换原来的.cornerRadius(30)：

修改后的关键代码部分 #

VStack{
    // 内部表单内容保持不变
}
.padding(.vertical, 60)
.padding(.horizontal, 20)
.background(Color.white)
.cornerRadius(30, corners: [.topLeft, .topRight]) // 替换原有的.cornerRadius(30)

完整修改后的代码 #

struct loginView: View {
    @State private var stringOfTextField: String = String()
    
    var body: some View {
        ZStack {
            LinearGradient(colors: [Color("primarycolor"), Color("secondarycolor")],
                           startPoint: .top,
                           endPoint: .center).ignoresSafeArea()
            VStack() {
                Text("Login").foregroundColor(.white).font(
                    .system(size: 18)
                )
                Image("logo")
                Spacer()
            }
            VStack {
                Spacer(minLength: 230)
                VStack{
                    HStack {
                        Image(systemName: "person").foregroundColor(.gray)
                        TextField("Enter Email", text: $stringOfTextField)
                    }
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.gray, style: StrokeStyle(lineWidth: 1.0)))
                    .padding(.bottom)
                    
                    TextField("Enter Password", text: $stringOfTextField)
                        .padding()
                        .overlay(RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.gray, style: StrokeStyle(lineWidth: 1.0)))
                        .padding(.bottom)
                    
                    Text("Forgot Password ?")
                        .frame(maxWidth: .infinity, alignment: .trailing)
                        .padding(.bottom)
                    
                    Button(action: {
                        print("sign up bin tapped")
                    }) {
                        Text("SIGN IN")
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .font(.system(size: 18))
                            .padding()
                            .foregroundColor(.white)
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color("secondarycolor"), lineWidth: 1)
                            )
                    }
                    .background(Color("secondarycolor"))
                    .cornerRadius(25)
                    Spacer()
                }
                .padding(.vertical, 60)
                .padding(.horizontal, 20)
                .background(Color.white)
                .cornerRadius(30, corners: [.topLeft, .topRight]) // 修改点
            }
        }
        .ignoresSafeArea(edges: [.bottom])
    }
}

关于之前RoundedCorner未生效的说明 #

如果之前尝试用自定义RoundedCorner Shape，需要确保正确实现Shape协议并通过clipShape应用，示例如下：

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

// 使用方式
.clipShape(RoundedCorner(radius: 30, corners: [.topLeft, .topRight]))

这种方式也能实现需求，但系统提供的cornerRadius(_:corners:)API更简洁，适用于iOS 14及以上版本。

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