Use native onScrollGeometryChange (iOS 18) so the compact icon+title bar actually appears on scroll, Mail-style

This commit is contained in:
FuelBoard Contributor
2026-08-11 22:05:03 +01:00
parent 8d24de401d
commit cf69350472
+23 -21
View File
@@ -30,8 +30,8 @@ struct StationsView: View {
NavigationStack {
List {
// Large title header (icon + title). Native navigation titles
// can't carry an icon, so this is a real row; the scroll
// tracker rides on its background so no extra row is created.
// 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.
HStack(spacing: 10) {
Image(systemName: "fuelpump.fill")
.font(.system(size: 34))
@@ -44,14 +44,6 @@ struct StationsView: View {
.listRowSeparator(.hidden)
.listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
.listRowBackground(Color.clear)
.background(
GeometryReader { proxy in
Color.clear.preference(
key: ScrollOffsetKey.self,
value: proxy.frame(in: .named("stationsScroll")).minY
)
}
)
Section {
if let location {
@@ -207,10 +199,7 @@ struct StationsView: View {
// New fetch or filter switch back to the first page.
visibleCount = pageSize
}
.coordinateSpace(name: "stationsScroll")
.onPreferenceChange(ScrollOffsetKey.self) { minY in
isScrolled = minY < -60
}
.modifier(ScrolledTracker(isScrolled: $isScrolled))
.toolbar {
ToolbarItem(placement: .principal) {
if isScrolled {
@@ -231,13 +220,26 @@ struct StationsView: View {
// MARK: - Fuel-type iconography (app target only FuelStore.swift is Foundation-only)
/// Scroll offset preference the large-title header row reports its position
/// in the list's coordinate space so we know when it has scrolled under the
/// nav bar (minY < -60) and can show the compact gas-pump+title bar.
private struct ScrollOffsetKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = nextValue()
/// Tracks whether the list has scrolled, using the native scroll-geometry API
/// (iOS 18+) the reliable way to know when the large header title has
/// collapsed. (The old GeometryReader-preference approach didn't fire in List,
/// which is why the compact bar never appeared.)
private struct ScrolledTracker: ViewModifier {
@Binding var isScrolled: Bool
func body(content: Content) -> some View {
if #available(iOS 18.0, *) {
content
.onScrollGeometryChange(for: Bool.self) { geometry in
geometry.contentOffset.y > 40
} action: { _, scrolled in
withAnimation(.easeInOut(duration: 0.2)) {
isScrolled = scrolled
}
}
} else {
content
}
}
}