How can I clip/mask HStack content to behave like a ScrollView where content is shown inside HStack?

Question

I have a custom TabView (Snap Carousel) where I scroll content and snap to the TabView Content. The content is basically a HStack x times larger in width than the TabView where x is also the number of pages. I am getting the desired scroll behaviour but when I clip the MenuTabView, I lose the contents outside the visible area, on scrolling it is empty.

HStack(spacing : 0) {
      Image("image1")
            .aspectRatio(2.8, contentMode: .fit)
            .frame(width: proxy.size.width)
                                    
      Image("image2")
            .aspectRatio(2.8, contentMode: .fit)
            .frame(width: proxy.size.width)
 }
 .frame(maxWidth: proxy.size.width, alignment: .leading)
 .clipped()

proxy is the GeometryProxy.

struct MenuTabView<Content: View> : View {
    var body: some View {
        GeometryReader { proxy in
            ZStack {
                content()
                    .offset(x: (CGFloat(index) * -proxy.size.width) + self.offset)
                    .gesture(
                    DragGesture()
                   ........
        }

} }

The second Image is the second page, when I clip using .clipped() it scrolls but its not visible. How can I create a behaviour similar to ScrollView

Does this answer your question https://stackoverflow.com/a/58708206/12299030? — Asperi, Oct 18 '21 at 17:28

score 0 · Answer 1 · answered Oct 19 '21 at 09:55

0

Try to move lines .frame(maxWidth: proxy.size.width, alignment: .leading) .clipped() after the .offset operator

answered Oct 19 '21 at 09:55

Max Martyniuk

19
3

How can I clip/mask HStack content to behave like a ScrollView where content is shown inside HStack?

1 Answers1