解决SwiftUI中Lazy容器内.onGeometryChange的适配问题

核心问题分析 #

List/Form作为懒加载容器，内容视图会按需创建或销毁，直接获取容器整体几何边界会返回零值；同时频繁的偏好键更新易引发卡顿，需优化状态传递时机。

方案一：优化偏好键+懒加载视图生命周期管理 #

通过监听自定义标题视图自身的可见性（而非容器边界），仅在视图可见状态变化时更新偏好键，减少不必要的重绘。

1. 定义偏好键传递可见状态 #

struct TitleVisibilityPreferenceKey: PreferenceKey {
    static var defaultValue: Bool = false
    
    static func reduce(value: inout Bool, nextValue: () -> Bool) {
        // 只要有一个标题视图可见，就标记为true
        value = value || nextValue()
    }
}

2. 自定义标题视图添加几何监听 #

结合GeometryReader监听自身在导航栈坐标空间中的可见性，同时用onAppear/onDisappear处理懒加载视图的生命周期：

struct CustomTitleView: View {
    let title: String
    @State private var isVisible = true
    
    var body: some View {
        Text(title)
            .font(.largeTitle)
            .bold()
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(
                            key: TitleVisibilityPreferenceKey.self,
                            value: isVisible && proxy.frame(in: .named("NavigationStackSpace")).minY <= 0
                        )
                }
            )
            .onAppear {
                isVisible = true
            }
            .onDisappear {
                isVisible = false
                // 视图消失时主动重置状态，避免残留
                DispatchQueue.main.async {
                    let _ = TitleVisibilityPreferenceKey.defaultValue
                }
            }
    }
}

3. 导航栈中监听偏好键并控制Toolbar #

struct ContentView: View {
    @State private var showToolbarTitle = false
    
    var body: some View {
        NavigationStack {
            List(0..<100) { index in
                if index == 0 {
                    CustomTitleView(title: "My Custom Title")
                }
                Text("List Item \(index)")
                    .navigationDestination(for: Int.self) { _ in
                        ChildView(showToolbarTitle: $showToolbarTitle, title: "My Custom Title")
                    }
            }
            .navigationTitle("") // 隐藏原生标题
            .toolbar {
                ToolbarItem(placement: .principal) {
                    if showToolbarTitle {
                        Text("My Custom Title")
                            .font(.headline)
                    }
                }
            }
            .coordinateSpace(name: "NavigationStackSpace")
            .onPreferenceChange(TitleVisibilityPreferenceKey.self) { newValue in
                // 仅当状态变化时更新，减少卡顿
                if showToolbarTitle != !newValue {
                    withAnimation(.easeInOut(duration: 0.2)) {
                        showToolbarTitle = !newValue
                    }
                }
            }
        }
    }
}

子视图标题同步处理 #

将标题可见状态通过绑定传递给子视图，确保返回时状态一致：

struct ChildView: View {
    @Binding var showToolbarTitle: Bool
    let title: String
    
    var body: some View {
        List(0..<50) { index in
            Text("Child Item \(index)")
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                if showToolbarTitle {
                    Text(title)
                        .font(.headline)
                }
            }
        }
    }
}

方案二：使用ScrollView包裹懒加载容器（备选） #

若列表项数量不多，可将List/Form包裹在ScrollView中，复用ScrollView的几何边界监听逻辑，同时保留懒加载容器样式：

struct ContentView: View {
    @State private var showToolbarTitle = false
    
    var body: some View {
        NavigationStack {
            ScrollView {
                List(0..<100) { index in
                    if index == 0 {
                        Text("My Custom Title")
                            .font(.largeTitle)
                            .bold()
                    }
                    Text("List Item \(index)")
                }
                .listStyle(.plain)
            }
            .navigationTitle("")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    if showToolbarTitle {
                        Text("My Custom Title")
                            .font(.headline)
                    }
                }
            }
            .coordinateSpace(name: "ScrollSpace")
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .onChange(of: proxy.frame(in: .named("ScrollSpace")).minY) { _, newValue in
                            withAnimation(.easeInOut) {
                                showToolbarTitle = newValue < -60 // 自定义切换阈值
                            }
                        }
                }
            )
        }
    }
}

方案三：利用iOS17+的ScrollPhase（推荐） #

iOS17引入的ScrollPhase环境值可直接获取滚动状态，结合标题视图位置判断是否显示Toolbar标题：

struct ContentView: View {
    @Environment(\.scrollPhase) private var scrollPhase
    @State private var titleFrame: CGRect = .zero
    
    var body: some View {
        NavigationStack {
            List(0..<100) { index in
                if index == 0 {
                    Text("My Custom Title")
                        .font(.largeTitle)
                        .bold()
                        .background(
                            GeometryReader { proxy in
                                Color.clear
                                    .onAppear {
                                        titleFrame = proxy.frame(in: .named("NavigationStackSpace"))
                                    }
                            }
                        )
                }
                Text("List Item \(index)")
            }
            .navigationTitle("")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    if scrollPhase.isScrolling || titleFrame.minY < -20 {
                        Text("My Custom Title")
                            .font(.headline)
                    }
                }
            }
            .coordinateSpace(name: "NavigationStackSpace")
        }
    }
}

关键说明 #

• scrollPhase.isScrolling判断滚动状态，结合标题视图位置阈值实现平滑切换
• 懒加载视图的onAppear仅在首次加载时获取frame，避免重复计算

卡顿问题优化建议 #

• 减少偏好键更新频率：仅在可见状态真正变化时更新，而非每次滚动都触发
• 使用动画控制：用withAnimation包裹状态更新，避免生硬切换引发视觉卡顿
• 避免全局状态传递：将状态控制在导航栈内部，减少跨层级环境值传递

内容的提问来源于stack exchange，提问作者Andrei G.