Update StickyHeader (#49)

Author: muukii

Sources/StickyHeader/StickyHeader.swift

@@ -1,10 +1,17 @@
 import SwiftUI
 
-/** 
- A view that sticks to the top of the screen in a ScrollView.
- When it's bouncing, it stretches the content.
- To use this view, you need to call ``View.enableStickyHeader()`` modifier to the ScrollView. 
- */
+public struct StickyHeaderContext {
+  public let topMargin: CGFloat
+
+  init(topMargin: CGFloat) {
+    self.topMargin = topMargin
+  }
+}
+
+///
+/// A view that sticks to the top of the screen in a ScrollView.
+/// When it's bouncing, it stretches the content.
+/// To use this view, you need to call ``View.enableStickyHeader()`` modifier to the ScrollView.
 public struct StickyHeader<Content: View>: View {
 
   /**
@@ -18,49 +25,65 @@ public struct StickyHeader<Content: View>: View {
   }
 
   public let sizing: Sizing
-  public let content: Content
+  public let content: (StickyHeaderContext) -> Content
 
   @State var baseContentHeight: CGFloat?
   @State var stretchingValue: CGFloat = 0
+  @State var topMargin: CGFloat = 0
 
   public init(
     sizing: Sizing,
-    @ViewBuilder content: () -> Content
+    @ViewBuilder content: @escaping (StickyHeaderContext) -> Content
   ) {
     self.sizing = sizing
-    self.content = content()
+    self.content = content
   }
 
   public var body: some View {
-    
+
     let offsetY: CGFloat = 0
-    
+
+    let context = StickyHeaderContext(
+      topMargin: topMargin
+    )
+
     Group {
       switch sizing {
       case .content:
-        content
+        content(context)
           .onGeometryChange(for: CGSize.self, of: \.size) { size in
             if stretchingValue == 0 {
               baseContentHeight = size.height
             }
           }
-          .frame(height: baseContentHeight.map { 
-            $0 + stretchingValue
-          })
+          .frame(
+            height: baseContentHeight.map {
+              $0 + stretchingValue
+            }
+          )
           .offset(y: -stretchingValue)
-        // container
+          // container
           .frame(height: baseContentHeight, alignment: .top)
 
       case .fixed(let height):
-                       
-        content
+
+        content(context)
           .frame(height: height + stretchingValue + offsetY)
           .offset(y: -offsetY)
           .offset(y: -stretchingValue)
-        // container
+          // container
           .frame(height: height, alignment: .top)
       }
-    }   
+    }
+    .onGeometryChange(
+      for: CGRect.self,
+      of: {
+        $0.frame(in: .global)
+      },
+      action: { value in
+        topMargin = value.minY
+      }
+    )
     .onGeometryChange(
       for: CGRect.self,
       of: {
@@ -85,26 +108,26 @@ extension View {
 
 #Preview("dynamic") {
   ScrollView {
-    
-    StickyHeader(sizing: .content) {
-          
+
+    StickyHeader(sizing: .content) { context in
+
       ZStack {
-        
-        Color.red          
-          .padding(.top, -100)          
-                  
+
+        Color.red
+          .padding(.top, -context.topMargin)
+
         VStack {
           Text("StickyHeader")
           Text("StickyHeader")
           Text("StickyHeader")
         }
         .border(Color.red)
         .frame(maxWidth: .infinity, maxHeight: .infinity)
-//        .background(.yellow)               
+        //        .background(.yellow)
       }
-      
+
     }
-    
+
     ForEach(0..<100, id: \.self) { _ in
       Text("Hello World!")
         .frame(maxWidth: .infinity)
@@ -116,13 +139,13 @@ extension View {
 
 #Preview("dynamic full") {
   ScrollView {
-    
-    StickyHeader(sizing: .content) {
-      
+
+    StickyHeader(sizing: .content) { context in
+
       ZStack {
-        
+
         Color.red
-        
+
         VStack {
           Text("StickyHeader")
           Text("StickyHeader")
@@ -134,12 +157,12 @@ extension View {
         .background(
           Color.green
             .padding(.top, -100)
-          
+
         )
       }
-      
+
     }
-    
+
     ForEach(0..<100, id: \.self) { _ in
       Text("Hello World!")
         .frame(maxWidth: .infinity)
@@ -150,9 +173,9 @@ extension View {
 
 #Preview("fixed") {
   ScrollView {
-    
-    StickyHeader(sizing: .fixed(300)) {
-      
+
+    StickyHeader(sizing: .fixed(300)) { context in
+
       Rectangle()
         .stroke(lineWidth: 10)
         .overlay(
@@ -163,7 +186,7 @@ extension View {
           }
         )
     }
-    
+
     ForEach(0..<100, id: \.self) { _ in
       Text("Hello World!")
         .frame(maxWidth: .infinity)
@@ -175,29 +198,29 @@ extension View {
 
 #Preview("fixed full") {
   ScrollView {
-    
-    StickyHeader(sizing: .fixed(300)) {
-            
+
+    StickyHeader(sizing: .fixed(300)) { context in
+
       ZStack {
-        
+
         Color.red
-        
+
         VStack {
           Text("StickyHeader")
           Text("StickyHeader")
           Text("StickyHeader")
         }
         .border(Color.red)
         .frame(maxWidth: .infinity, maxHeight: .infinity)
-//        .background(.yellow)
+        //        .background(.yellow)
         .background(
           Color.green
-            .padding(.top, -100)
+            .padding(.top, -context.topMargin)
 
         )
       }
     }
-    
+
     ForEach(0..<100, id: \.self) { _ in
       Text("Hello World!")
         .frame(maxWidth: .infinity)