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

我也遇到了这个问题。 当您在ScrollView之外有一个自定义的clipShape时，就会发生这种情况。 自定义是指形状的自定义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），它不起作用。

所以解决方法是在自定义形状中使用内置路径。 我猜这是 iOS 14 的错误，因为它在 iOS 13 上运行良好。