[SOLVED] Dynamic content hight in VStack SwiftUI

Table of Contents

Issue

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))
}
}

Answered By – Mixorok

Answer Checked By – Gilberto Lyons (BugsFixing Admin)

Leave a Reply

Your email address will not be published.