Pin large title above list so it fades+collapses in place on scroll (Mail-style cross-fade)

This commit is contained in:
FuelBoard Contributor
2026-08-11 22:21:09 +01:00
parent ec191d77aa
commit 24fffe1e8f
+12 -9
View File
@@ -28,12 +28,12 @@ struct StationsView: View {
var body: some View {
NavigationStack {
List {
// Large title header (icon + title). Native navigation titles
// can't carry an icon, so this is a real row at the top of the
// list. It cross-fades with the compact bar: once the list
// scrolls, this large title fades out in place while the
// smaller icon+title bar fades in below the nav bar (Mail-style).
VStack(spacing: 0) {
// Large pinned title Mail-style. It stays in place above the
// list (content scrolls beneath it) and fades out in place
// once scrolling starts, while the compact icon+title bar fades
// in below the nav bar. Keeping it OUT of the List means the
// fade isn't masked by the row scrolling away.
HStack(spacing: 10) {
Image(systemName: "fuelpump.fill")
.font(.system(size: 34))
@@ -42,13 +42,15 @@ struct StationsView: View {
.font(.largeTitle.bold())
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, 16)
.padding(.vertical, 6)
.listRowSeparator(.hidden)
.listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
.listRowBackground(Color.clear)
.frame(height: isScrolled ? 0 : 54, alignment: .top)
.clipped()
.background(Color(.systemGroupedBackground))
.opacity(isScrolled ? 0 : 1)
.animation(.easeInOut(duration: 0.2), value: isScrolled)
List {
Section {
if let location {
if sortMode == .closest {
@@ -220,6 +222,7 @@ struct StationsView: View {
.navigationBarTitleDisplayMode(.inline)
}
}
}
}
// MARK: - Fuel-type iconography (app target only FuelStore.swift is Foundation-only)