Cross-fade large title with compact bar on scroll (Mail-style)

This commit is contained in:
FuelBoard Contributor
2026-08-11 22:15:11 +01:00
parent cf69350472
commit ec191d77aa
+5 -1
View File
@@ -31,7 +31,9 @@ struct StationsView: View {
List { List {
// Large title header (icon + title). Native navigation titles // Large title header (icon + title). Native navigation titles
// can't carry an icon, so this is a real row at the top of the // can't carry an icon, so this is a real row at the top of the
// list; it scrolls away like Mail's large title. // 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).
HStack(spacing: 10) { HStack(spacing: 10) {
Image(systemName: "fuelpump.fill") Image(systemName: "fuelpump.fill")
.font(.system(size: 34)) .font(.system(size: 34))
@@ -44,6 +46,8 @@ struct StationsView: View {
.listRowSeparator(.hidden) .listRowSeparator(.hidden)
.listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)) .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
.listRowBackground(Color.clear) .listRowBackground(Color.clear)
.opacity(isScrolled ? 0 : 1)
.animation(.easeInOut(duration: 0.2), value: isScrolled)
Section { Section {
if let location { if let location {