如何在最新的 iOS 14 中仅在 swiftui 中舍入滚动视图的顶角

Posted 2023-02-24

【中文标题】如何在最新的 iOS 14 中仅在 swiftui 中舍入滚动视图的顶角

【英文标题】：How to round only top corners of a scrollview in swiftui in latest iOS 14

【发布时间】：2021-05-02 05:29:38

【问题描述】：

我试图只圆滚动视图的顶角。在 .clipShape() 修饰符中提供自定义形状，在早期的 iO​​S 版本中可以正常工作，但在最新的 ios 14 中，滚动视图的底部内容正在消失。请提出任何解决方法

以下是圆角的自定义形状：

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)
    


extension View 
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View 
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    

这是实现自定义圆角修饰符的示例视图的代码：

struct SampleView: View 
    
    @State var fullname: String
    @State var email: String
    @State var phone: String
    @State var username: String
    
    var body: some View 
        ZStack 
            Color(.red).edgesIgnoringSafeArea(.top)
            VStack 
                Header()
                ZStack 
                    Color(.systemBackground).edgesIgnoringSafeArea(.bottom)
                    ScrollView 
                        VStack 
                            Text("Title")
                                .font(.largeTitle)
                                .foregroundColor(.primary)
                                .bold()
                                .padding()
                                .frame(maxWidth: .infinity, alignment: .leading)
                            TextField("type here...", text: $fullname)
                                .padding()
                            TextField("type here...", text: $email)
                                .padding()
                            TextField("type here...", text: $phone)
                                .padding()
                            TextField("type here...", text: $username)
                                .padding()
                            TextField("type here...", text: $fullname)
                                .padding()
                            TextField("type here...", text: $email)
                                .padding()
                            TextField("type here...", text: $phone)
                                .padding()
                            TextField("type here...", text: $username)
                                .padding()
                            Button(action:   , label: 
                                Text("Submit")
                                    .padding()
                                    .textCase(/*@START_MENU_TOKEN@*/.uppercase/*@END_MENU_TOKEN@*/)
                            )
                            .padding()
                        
                    
                
                .frame(height: UIScreen.screenHeight/1.5)
                .cornerRadius(10, corners: [.topLeft, .topRight])
            
        
    


private struct Header: View 
    var body: some View 
        HStack(alignment: .top) 
            VStack(alignment: .leading) 
                Text("")
                    .foregroundColor(Globals.Color.background)
                Spacer()
            
            Spacer()
        
    

这是底部内容被剪掉的屏幕截图：

【参考方案1】：

不要将.cornerRadius 修饰符应用于ScrollView，而是将其应用于背景：

ZStack 
  Color(.systemBackground).edgesIgnoringSafeArea(.bottom)
    .cornerRadius(10, corners: [.topLeft, .topRight])
  ScrollView 
  //...