Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI issue on iOS 14 with Scrollview HStack content being cut off

Tags:

ios

swift

swiftui

I have a list of buttons that display perfectly on iOS 13 using SwiftUI, but on iOS 14 it cuts the content off where the screen ends.

Has anything changed with regards to how HStacks renders what isn't on the screen? I used to scroll and be able to see all the buttons.

I will attach some screenshots and the code.

What initially loads into sight

When I scroll, the other buttons aren't visible and one is cut off

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)
            }
        }
     
    }
like image 870
joelgate Avatar asked Oct 08 '20 09:10

joelgate


1 Answers

I also met this problem. It happens when you have a customized clipShape outside of ScrollView. By customized I mean customized Path of the shape.

From my test, when you use builtin shapes, it works fine, for example:

view.clipShape(Circle())

When you use customized shape but with builtin Path, it also works fine, for example:

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)
    }
}

But when you use a customized Path in your CustomShape, this issue happens:

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)
    }
}

I also tried to draw the path manually(use move, addLine, addArc), it doesn't work.

So the workaround is to use builtin Path in your customized Shape. I guess this is a bug of iOS 14, because it works fine on iOS 13.

like image 137
Kyle Xie Avatar answered Nov 03 '22 00:11

Kyle Xie