SwiftUI中切换模式/旋转时保持滚动位置及初始定位问题

一、核心问题定位 #

你遇到的旋转时滚动位置丢失，本质是隐藏导航栏/标签栏触发了两次连续的布局变更，导致滚动位置恢复逻辑被重复调用，最终计算出错误的偏移量。结合之前模式切换、初始定位的问题，核心是要统一滚动位置的跟踪机制，避免布局变化时的误触发。

二、分步解决策略 #

1. 手动跟踪可视区域顶部经文，加防抖避免重复触发 #

放弃scrollPosition的自动绑定，改用ScrollViewReader+GeometryReader手动记录可视区域顶部的经文ID，同时添加防抖逻辑过滤频繁的布局变化：

@State private var currentTopAyahId: String?
@State private var lastUpdateTime: Date = .init()

// 自定义PreferenceKey传递可视区域顶部ID
struct VisibleTopAyahKey: PreferenceKey {
    static var defaultValue: String? = nil
    static func reduce(value: inout String?, nextValue: () -> String?) {
        value = value ?? nextValue()
    }
}

var body: some View {
    ScrollViewReader { proxy in
        ScrollView {
            // 监听可视区域的GeometryReader，放在LazyVStack最顶部
            GeometryReader { geo in
                Color.clear
                    .preference(key: VisibleTopAyahKey.self, value: getTopVisibleAyah(from: geo))
            }
            .frame(height: 0)
            
            LazyVStack {
                ForEach(ayahs) { ayah in
                    // 两种模式复用同一ID，确保ScrollViewReader能准确定位
                    if currentMode == .translation {
                        TranslationAyahView(ayah: ayah)
                            .id(ayah.id)
                    } else {
                        ReadingAyahView(ayah: ayah)
                            .id(ayah.id)
                    }
                }
            }
        }
        .onPreferenceChange(VisibleTopAyahKey.self) { newId in
            // 100ms内只处理一次位置更新，过滤布局连续变化的误触发
            let now = Date()
            guard now.timeIntervalSince(lastUpdateTime) > 0.1 else { return }
            lastUpdateTime = now
            currentTopAyahId = newId
        }
    }
}

// 计算可视区域顶部的经文ID
private func getTopVisibleAyah(from geo: GeometryProxy) -> String? {
    return ayahs.first { ayah in
        // 获取经文视图的全局frame，判断是否处于可视区域顶部
        let ayahFrame = // 这里需要通过全局坐标转换获取经文的frame
        ayahFrame.minY >= geo.frame(in: .global).minY && ayahFrame.minY <= geo.frame(in: .global).maxY
    }?.id
}

2. 旋转时延迟恢复位置，等待布局稳定 #

针对旋转时导航栏/标签栏隐藏的场景，延迟执行滚动恢复，确保布局完全稳定后再定位：

@State private var isRotating: Bool = false

.onChange(of: UIDevice.current.orientation) { newOrientation in
    guard newOrientation.isPortrait || newOrientation.isLandscape else { return }
    isRotating = true
    // 延迟0.3秒，等待导航栏/标签栏隐藏动画、布局调整完成
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
        guard let targetId = currentTopAyahId else { return }
        withAnimation(.easeInOut) {
            proxy.scrollTo(targetId, anchor: .top)
        }
        isRotating = false
    }
}

// 旋转过程中暂停位置更新，避免干扰
.onPreferenceChange(VisibleTopAyahKey.self) { newId in
    guard !isRotating else { return }
    // 防抖逻辑...
}

3. 模式切换：复用同一ScrollView结构 #

不要用TabView分离两个模式的视图，而是在同一个LazyVStack内根据模式切换内容——这样ScrollView的滚动上下文不会被销毁，从根源避免位置丢失。

4. 初始定位：等待视图渲染完成后再滚动 #

初始定位不准是因为LazyVStack还未渲染目标经文就调用了scrollTo，添加小延迟确保视图加载完成：

.onAppear {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        if let initialId = initialAyahId {
            proxy.scrollTo(initialId, anchor: .top)
        }
    }
}

5. WStack单词按钮的性能优化 #

针对WStack导致的性能下降，做以下优化：

• 用LazyHStack替代WStack，只渲染可视区域内的单词
• 给单词按钮实现Equatable协议，避免不必要的重渲染：

struct WordButton: View, Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.word.id == rhs.word.id && lhs.isSelected == rhs.isSelected
    }
    
    let word: Word
    var isSelected: Bool = false
    
    var body: some View {
        Button(action: { /* 弹出翻译逻辑 */ }) {
            Text(word.arabic)
                .font(.custom("ArabicFont", size: 18))
        }
    }
}

三、关键注意事项 #

• 确保两种模式下的经文视图id完全一致，这是ScrollViewReader准确定位的核心
• 避免在布局变化频繁的时机（如旋转动画中）调用scrollTo，必须加防抖或延迟
• LazyVStack下scrollPosition的自动恢复行为不稳定，手动跟踪可视区域更可靠

内容的提问来源于stack exchange，提问作者Ali