ScalingHeaderScrollView
ScalingHeaderScrollView copied to clipboard
Stretchable header with text
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:
I'm trying to get something like this:
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)
}