SwiftUI跨视图修改滚动位置失效问题求助

问题根源分析 #

• onChange(of: state.selectedItemID)未触发：切换Tab时若selectedItemID原本就是nil，设置为nil不会触发值变更事件。
• ViewModel初始化错误：@ObservedObject var viewModel: ListViewModel()的写法会导致View每次刷新都重建ViewModel，应改用@StateObject（iOS 14+）或在init中初始化。
• 冗余的objectWillChange：@Published属性会自动发送变更通知，手动实现会引发逻辑冲突。

修正后的代码实现 #

1. 修复AppState

class AppState: ObservableObject {
    @Published var theScrollPosition: Int64? {
        didSet {
            print("Did set scroll position")
        }
    }

    @Published var selectedTab: Tabs {
        didSet {
            print("Tab switched, switching back to root view")
            selectedItemID = nil
            selectedRow = nil
            theScrollPosition = -1
        }
    }
    
    @Published var selectedItemID: Int64?
    @Published var selectedRow: Int64?

    // 初始化默认选中Tab
    init(selectedTab: Tabs = .Tab1) {
        self.selectedTab = selectedTab
    }
}

2. 方案一：监听Tab切换事件滚动到顶部

struct View1: View {
    @EnvironmentObject var state: AppState
    @StateObject private var viewModel = ListViewModel() // iOS14+推荐用StateObject
    
    var body: some View {
        ScrollViewReader { proxy in
            List {
                // 添加隐藏的顶部锚点（避免item id不连续的问题）
                Color.clear.id("topAnchor")
                
                ForEach(viewModel.items) { item in
                    Section {
                        NavigationLink(
                            destination: ListItemDetailView(item),
                            tag: item.id,
                            selection: $state.selectedItemID // 使用绑定语法$
                        ) {
                            ListItemView(item)
                        }
                    }
                }
            }
            .onChange(of: state.selectedTab) { newTab in
                // 切换到当前Tab时滚动到顶部
                if newTab == .Tab1 {
                    print("Scrolling to top")
                    proxy.scrollTo("topAnchor")
                }
            }
        }
    }
}

3. 方案二：结合onAppear控制滚动时机

struct View1: View {
    @EnvironmentObject var state: AppState
    @StateObject private var viewModel = ListViewModel()
    @State private var lastActiveTab: Tabs?
    
    var body: some View {
        ScrollViewReader { proxy in
            List {
                Color.clear.id("topAnchor")
                
                ForEach(viewModel.items) { item in
                    Section {
                        NavigationLink(
                            destination: ListItemDetailView(item),
                            tag: item.id,
                            selection: $state.selectedItemID
                        ) {
                            ListItemView(item)
                        }
                    }
                }
            }
            .onAppear {
                // 仅从其他Tab切换回来时滚动
                if lastActiveTab != .Tab1 {
                    proxy.scrollTo("topAnchor")
                    print("Scrolling to top")
                }
                lastActiveTab = state.selectedTab
            }
            .onDisappear {
                lastActiveTab = state.selectedTab
            }
        }
    }
}

关键注意点 #

• 务必使用$state.selectedItemID作为NavigationLink的selection绑定，确保状态双向同步。
• 添加隐藏锚点"topAnchor"可以避免List元素ID不连续导致的滚动失效问题。
• @StateObject用于持有ViewModel，确保View刷新时ViewModel不会被重建。

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