like the title suggests, I'm trying to collapse the navigationView title bar until the user scrolls past the first section (which I'm using as a header). Please see image. you can see the header section in this picture
The reason why I can't use SwiftUI's built in NavigationTitle is because I can't put the profile picture in the NavigationTitle.
Anyways, once the word "Summary" disappears, I want the navigationView's inline title to appear and say "Summary". I've tried using .onDisappear and .onAppear on the Text("Summary"), but because of the way the navigation bar works, it doesn't trigger until the user scrolls pretty far down the page.
I want a solution that: 1] collapses the top bar until the word "Summary" is out of view, then 2] shows the inline title.
Thank you!
I have a @State var that changes the navigation title:
@State var navigationTitle: String = ""
Code for header section:
Section {
HStack(spacing: 8) {
VStack(alignment: .leading, spacing: 5) {
Text("\(Date().formatted(date: .abbreviated, time: .omitted))")
.foregroundColor(Color.secondary)
.textCase(.uppercase)
.font(.system(size: 13, weight: .medium, design: .default))
.onAppear {
navigationTitle = ""
}
.onDisappear {
navigationTitle = "Summary"
}
Text("Summary")
.font(.largeTitle.bold())
.textCase(nil)
.foregroundColor(Color.primary)
}
Spacer()
Button {
self.showUserProfileModal.toggle()
} label: {
Image(systemName: "person.crop.circle")
.symbolRenderingMode(.palette)
.foregroundStyle(.blue, .blue, .white)
.clipShape(Circle())
.font(.system(size: 37, weight: .light, design: .default))
}
}
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
.listRowBackground(Color(.systemGroupedBackground))
}
And the navigationTitle:
.navigationBarTitle("\(navigationTitle)", displayMode: .inline)