Search code examples
swiftswiftuiscrollview

Dynamic content hight in VStack SwiftUI


Why I can't dynamically change content in VStack if I don't have a lot objects in ScrollView? What is surprising, if there are a lot of objects, then everything changes beautifully, but if there are few, then the scroll only works down (because of this, there may be glitches when trying to scroll up)

My code:

import Introspect

struct SwiftUIView: View {

@StateObject var myCoord = MyCoord()

var body: some View {
    VStack {
        Color.red
            .frame(height: myCoord.height)

        ScrollView {
            ForEach(0..<20) { _ in
                Color.green
                    .frame(height: 20)

            }
            .background(Color.red)
        }
        .introspectScrollView { scroll in
            scroll.delegate = myCoord
        }
    }
  }
}

class MyCoord: NSObject, UIScrollViewDelegate, ObservableObject {

let maxSize: CGFloat = 76
let minSize: CGFloat = 56

@Published var height: CGFloat =  76

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let size = maxSize - scrollView.contentOffset.y
    height = min(maxSize, max(minSize, size))
}
}

Solution

  • ScrollView

    Solved was putt all view in ZStack and add some fake views in Scroll view. 1 view is responsible for the size where the scroll cannot fall through. 2 view is responsible for the size between the maximum and minimum size of the header Here's a examples

    import Introspect
    
    struct ContentView: View {
    
    @StateObject private var myCoord = MyCoord()
    
    var body: some View {
        let sizeOfPlaceholder = myCoord.maxSize - myCoord.minSize
        
        ZStack(alignment: .top) {
            VStack(spacing: 0) {
                Color.black
                    .frame(height: myCoord.minSize)
                
                ScrollView {
                    Color.brown
                        .frame(height:sizeOfPlaceholder)
                    
                    ForEach(0..<20) { number in
                        Text("\(number)")
                            .background(Color.red)
                            .frame(height: 20)
                    }
                }
                .padding(.vertical, 1)
                .introspectScrollView { scroll in
                    scroll.delegate = myCoord
                }
            }
            
            Color.green
                .frame(height: myCoord.height)
        }
        
       }
    }
    
    class MyCoord: NSObject, UIScrollViewDelegate, ObservableObject {
    
    let maxSize: CGFloat = 76
    let minSize: CGFloat = 56
    
    @Published var height: CGFloat =  76
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        print(scrollView.contentOffset.y)
        let size = maxSize - scrollView.contentOffset.y
        height = min(maxSize, max(minSize, size))
    }
    }