iOS 14上的SwiftUI问题，Scrollview HStack内容被切断

Question

我有一个按钮列表，这些按钮可以使用SwiftUI在iOS 13上完美显示，但是在iOS 14上，它可以将内容从屏幕结束处截断。

关于HStacks渲染屏幕上未显示内容的方式是否发生了变化？我曾经滚动并能够看到所有按钮。

我将附上一些屏幕截图和代码。

var body: some View {
        VStack(alignment: .leading, spacing: 0){
            Text("Select a venue type")
                .font(.custom("MavenProBold", size: 16))
                .padding(.leading, 16)
                .padding(.top, 18)
                .foregroundColor(Color.black)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .center, spacing: 4, content: {
                    
                    
                    Button(action: {
                        self.selectedButtonIndex = 0
                        
                    })
                    {
                        VStack(alignment: .center, spacing: 0, content: {
                            ZStack(alignment: .bottomTrailing){
                                
                                Image(systemName: "star.fill")
                                    .frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
                                    .font(.title)
                                    .background(Color(hexString: "#1A88FF"))
                                    .foregroundColor(Color.white)
                                    .clipShape(Circle())
                                
                            }
                            Text("Things to do")
                                    .padding(.top, 8)
                                    .font(.custom("MavenProBold", size: 12))
                                    .multilineTextAlignment(.center)
                                    .lineLimit(50)
                        })
                        .frame(width: 80, height: 80, alignment: .center)
                        .padding(.all, 10)
                        .foregroundColor(Color.black)
                        
                    }
                    
                    Button(action: {
                        self.selectedButtonIndex = 0
                        
                    })
                    {
                        VStack(alignment: .center, spacing: 0, content: {
                            ZStack(alignment: .bottomTrailing){
                                
                                Image(systemName: "star.fill")
                                    .frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
                                    .font(.title)
                                    .background(Color(hexString: "#1A88FF"))
                                    .foregroundColor(Color.white)
                                    .clipShape(Circle())
                                
                            }
                            Text("Things to do")
                                    .padding(.top, 8)
                                    .font(.custom("MavenProBold", size: 12))
                                    .multilineTextAlignment(.center)
                                    .lineLimit(50)
                        })
                        .frame(width: 80, height: 80, alignment: .center)
                        .padding(.all, 10)
                        .foregroundColor(Color.black)
                        
                    }

                    
                    Button(action: {
                        self.selectedButtonIndex = 0
                        
                    })
                    {
                        VStack(alignment: .center, spacing: 0, content: {
                            ZStack(alignment: .bottomTrailing){
                                
                                Image(systemName: "star.fill")
                                    .frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
                                    .font(.title)
                                    .background(Color(hexString: "#1A88FF"))
                                    .foregroundColor(Color.white)
                                    .clipShape(Circle())
                                
                            }
                            Text("Things to do")
                                    .padding(.top, 8)
                                    .font(.custom("MavenProBold", size: 12))
                                    .multilineTextAlignment(.center)
                                    .lineLimit(50)
                        })
                        .frame(width: 80, height: 80, alignment: .center)
                        .padding(.all, 10)
                        .foregroundColor(Color.black)
                        
                    }

                    
                    Button(action: {
                        self.selectedButtonIndex = 0
                        
                    })
                    {
                        VStack(alignment: .center, spacing: 0, content: {
                            ZStack(alignment: .bottomTrailing){
                                
                                Image(systemName: "star.fill")
                                    .frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
                                    .font(.title)
                                    .background(Color(hexString: "#1A88FF"))
                                    .foregroundColor(Color.white)
                                    .clipShape(Circle())
                                
                            }
                            Text("Things to do")
                                    .padding(.top, 8)
                                    .font(.custom("MavenProBold", size: 12))
                                    .multilineTextAlignment(.center)
                                    .lineLimit(50)
                        })
                        .frame(width: 80, height: 80, alignment: .center)
                        .padding(.all, 10)
                        .foregroundColor(Color.black)
                        
                    }

                    
                    Button(action: {
                        self.selectedButtonIndex = 0
                        
                    })
                    {
                        VStack(alignment: .center, spacing: 0, content: {
                            ZStack(alignment: .bottomTrailing){
                                
                                Image(systemName: "star.fill")
                                    .frame(width: circleFrameSize, height: circleFrameSize, alignment: .center)
                                    .font(.title)
                                    .background(Color(hexString: "#1A88FF"))
                                    .foregroundColor(Color.white)
                                    .clipShape(Circle())
                                
                            }
                            Text("Things to do")
                                    .padding(.top, 8)
                                    .font(.custom("MavenProBold", size: 12))
                                    .multilineTextAlignment(.center)
                                    .lineLimit(50)
                        })
                        .frame(width: 80, height: 80, alignment: .center)
                        .padding(.all, 10)
                        .foregroundColor(Color.black)
                        
                    }

                    
                    
                    
                    
                })
                    .padding(.leading, 8)
                    .padding(.trailing, 8)
                    .padding(.bottom, 8)
            }
        }
     
    }

Answer 1

我也遇到了这个问题。当您在clipShape之外有一个自定义的ScrollView时，就会发生这种情况。定制是指形状的定制Path。

根据我的测试，当您使用内置形状时，它可以正常工作，例如：

view.clipShape(Circle())

使用自定义形状但内置路径时，它也可以正常工作，例如：

view.clipShape(CustomShape())

// which CustomShape is something like:

struct CustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        return Path(roundedRect: rect, cornerSize: CGSize(width: 10, height: 10)
    }
}

但是当您在CustomShape中使用自定义路径时，就会发生此问题：

view.clipShape(CustomShape())

// which CustomShape is something like:

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

我还尝试过手动绘制路径（使用move，addLine，addArc），它不起作用。

因此，解决方法是在自定义Shape中使用内置Path。我猜这是iOS 14的错误，因为它可以在iOS 13上正常工作。