ScalingHeaderScrollView icon indicating copy to clipboard operation
ScalingHeaderScrollView copied to clipboard

Stretchable header with text

Open minyilee95 opened this issue 1 year ago • 0 comments

Hi,

I'm trying to implement a stretchy header where the header is an image with text overlayed. If I use .allowsHeaderGrowth() I get this behavior: Simulator Screen Recording - iPhone 15 Pro - 2024-07-26 at 17 28 59

I'm trying to get something like this: Simulator Screen Recording - iPhone 15 Pro - 2024-07-26 at 17 27 34

Where just the image stretches but the text doesn't change size.

Is it possible to implement this with your package?

Thanks so much!

This is the code I'm using for the 'correct' stretchy header if that's helpful:

import SwiftUI

struct StretchyHeaderWorking: View {
    var body: some View {
        ScrollView {
            VStack {
                HeaderView()
                LazyVStack {
                    ForEach(1...100, id: \.self) {
                        Divider()
                        Text("\($0)").frame(maxWidth: .infinity)
                    }
                }
            }
        }
        
        
    }}

    @ViewBuilder
    func HeaderView()->some View{
        GeometryReader{proxy in
            let minY = proxy.frame(in: .named("SCROLL")).minY
            let size = proxy.size
            let height = (size.height + minY)
            
            Image("header")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: size.width,height: height > 0 ? height : 0,alignment: .top)
                .overlay(content: {
                    ZStack(alignment: .bottom) {
                        VStack(alignment: .leading, spacing: 5) {
                            Spacer()
                            HStack(alignment: .bottom, spacing: 10) {
                                Text("HEADER")
                                    .font(.largeTitle.bold())
                                    .foregroundStyle(.white)
                            }
                            
                        }
                        .padding(.horizontal)
                        .padding(.bottom,25)
                        .frame(maxWidth: .infinity,alignment: .leading)
                        .offset(x: 0, y: -101)
                    }
                })
                .cornerRadius(0)
                .offset(y: -minY)
        }
        .frame(height: 400)
        .toolbarBackground(.hidden)
        .navigationBarBackButtonHidden(true)
        
    }

minyilee95 avatar Jul 26 '24 21:07 minyilee95