Swiftui: sticky, stretchy header with multiple images?

In the detail view, I want to create a sticky, stretchy header with multiple images that can be scrolled horizontally.

I have the sticky, stretchy header. I also have multiple images that can be viewed horizontally using TabView (PageTabViewStyle()). However, when combining these two features, I have a problem: the TabView resets to the first image in the array whenever the whole header is being stretched. I would like it to stay on the image that was on screen.

Any ideas would be much appreciated!

Tabview:

struct DetailGalleryView: View {      let item: Item      let gallery: [ItemImage] = Bundle.main.decode("gallery.json")        var body: some View {          let detailPhotos = gallery.filter{$0.type == item.id}                    ZStack {              TabView{                  ForEach(detailPhotos) { photo in                      ZStack(alignment: .bottomTrailing){                          Image(photo.id)                              .resizable()                              .scaledToFill()                              .frame(width: UIScreen.main.bounds.width)                              .clipped()                          Text("Photo: \(photo.licence)")                              .padding(4)                              .background(Color.black)                              .font(.caption)                              .foregroundColor(.white)                              .offset(x: -5, y: -5)                              .opacity(0.5)                      }              }          }          .edgesIgnoringSafeArea(.all)          .tabViewStyle(PageTabViewStyle())      }    }  }  

Sticky header:

struct StickyHeader<Content: View>: View {        var minHeight: CGFloat      var content: Content            init(minHeight: CGFloat = 200, @ViewBuilder content: () -> Content) {          self.minHeight = minHeight          self.content = content()      }            var body: some View {          GeometryReader { geo in              if(geo.frame(in: .global).minY <= 0) {                  content                      .frame(width: geo.size.width, height: geo.size.height, alignment: .center)              } else {                  content                      .offset(y: -geo.frame(in: .global).minY)                      .frame(width: geo.size.width, height: geo.size.height + geo.frame(in: .global).minY)              }          }.frame(minHeight: minHeight)      }  }  

Using it in detail view body:

// ...    StickyHeader {          DetailGalleryView(item: item)    }    .frame(minHeight: UIScreen.main.bounds.height/2.1)  // ...  

https://stackoverflow.com/questions/65766610/swiftui-sticky-stretchy-header-with-multiple-images January 18, 2021 at 06:21AM