SwiftUI TabView Content Being Clipped

Question

I am using a TabView with a page style to display scrollable cards that snap into place. I've placed the TabView in a HStack with spacers on each end which centers the TabView. The TabView also has a width of 80% of the HStack.

I'd love to have the TabView content extend beyond the bounds to be edge to edge on the screen while also keeping the centring and 80% width. Here's an example of Apple doing this in the App Store.

Here is what I have so far.

While the content is centred and has an 80% width, the content is cut off beyond the TabView bounds. The second card should be visible like in the Apple examples and the content should be edge to edge.

Here is the code I have so far.

struct CardsView: View {
    
    var body: some View {
        VStack {
            SectionHeaderView()
            
            GeometryReader { geometry in
                HStack(spacing: 0) {
                    Spacer()
                    Group {
                        TabView {
                            CardView()
                                .tag(0)
                            
                            CardView()
                                .tag(1)
                            
                            CardView()
                                .tag(2)
                        }
                            .frame(width: geometry.size.width * 0.8, height: 150)
                            .tabViewStyle(.page(indexDisplayMode: .never))
                    }
                    Spacer()
                }
            }
                .frame(height: 150)
        }
            .padding(EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 0))
    }
}

struct CardView: View {
    
    var body: some View {
        Group {
            Group {
                VStack {
                    HStack {
                        Text("Testing")
                        Spacer()
                    }
                    Spacer()
                }
            }
                .padding()
                .background(Color.ui.backgroundCell)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .cornerRadius(kCornerRadiusViews)
        }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
            .tag(0)
    }
}

To me, it seems like there is some clipping being done on the TabView but to my knowledge, it doesn't seem like there is an equivalent to clipsToBounds = false in SwiftUI. I am not sure how to remove this clipping.

Any help would be very appreciated.

Answer 1

You just need to change the parameters at the bottom of your CardView view - the leading and trailing margins are too wide.

Try this, it should be exactly what you are looking for (I tested and it works):

.padding(EdgeInsets(top: 0, leading: 2, bottom: 0, trailing: 2))   // Reduce leading and trailing insets