SwiftUI自定义TabBar切换时视图状态丢失问题求助

问题根源 #

你的代码中，ZStack上的.id(feedViewModel.selectedTab)是导致视图每次切换都重建的核心原因。SwiftUI会根据视图的id判断是否需要重新创建实例，当selectedTab变化时，id同步改变，整个ZStack及其内部的两个RefreshableScrollView都会被销毁并重新初始化，直接丢失之前的状态（比如滚动位置、已加载数据）。

解决方案 #

1. 移除ZStack上的.id(feedViewModel.selectedTab)：这是解决问题的关键，让两个ScrollView实例始终保存在视图树中，仅通过透明度和层级控制显示与否。
2. 确保视图始终存在：用opacity控制显示隐藏，zIndex控制层级，选中的Tab视图处于最上层，未选中的视图只是隐藏而非销毁。
3. 优化布局稳定性：给ZStack添加frame(maxHeight: .infinity)，确保两个ScrollView占满可用空间，避免布局偏移。

修改后的FeedView核心代码 #

struct FeedView: View {
    @StateObject var feedViewModel = FeedViewModel()
    @State private var isInitialLoad = true
    let user: User
    @State private var isUploadPostViewPresented = false
    @StateObject var allPostsManager = PostManager()
    @StateObject var followingPostsManager = PostManager()
    @StateObject var airportData = AirportData()
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0){
                FeedTabBar(
                    selectedTab: $feedViewModel.selectedTab
                )
                Divider()
                
                ZStack {
                    RefreshableScrollView(showsIndicators: false, onRefresh: { done in
                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                            self.allPostsManager.refreshPosts()
                            done()
                        }
                    }) {
                        VStack(spacing: 8) {
                            ForEach(allPostsManager.posts, id: \.self) { post in
                                PostCard(post: post, user: user)
                            }
                        }
                        .padding(.top, 8)
                        .frame(maxWidth: .infinity)
                    }
                    .zIndex(feedViewModel.selectedTab == 0 ? 1 : 0)
                    .opacity(feedViewModel.selectedTab == 0 ? 1 : 0)
                    .hidden(feedViewModel.selectedTab != 0)
                    
                    RefreshableScrollView(showsIndicators: false, onRefresh: { done in
                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                            self.followingPostsManager.refreshPostsFollowing()
                            done()
                        }
                    }) {
                        VStack(spacing: 8) {
                            ForEach(followingPostsManager.posts, id: \.self) { post in
                                if user.isFollowing(post.username) {
                                    PostCard(post: post, user: user)
                                }
                            }
                        }
                        .padding(.top, 8)
                        .frame(maxWidth: .infinity)
                    }
                    .zIndex(feedViewModel.selectedTab == 1 ? 1 : 0)
                    .opacity(feedViewModel.selectedTab == 1 ? 1 : 0)
                    .hidden(feedViewModel.selectedTab != 1)
                }
                .frame(maxHeight: .infinity)
                .navigationBarTitle("")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Image("logo")
                            .resizable()
                            .scaledToFit()
                            .frame(height: 25)
                            .padding(.bottom)
                    }
                }
                .overlay(
                    NavigationLink(
                        destination: UploadPostView(tabIndex: feedViewModel.selectedTabBinding, airports: airportData.airports),
                        isActive: $isUploadPostViewPresented,
                        label: {
                            EmptyView()
                        }
                    )
                )
                .overlay(
                    Button(action: {
                        isUploadPostViewPresented = true
                    }) {
                        Image(systemName: "plus")
                            .font(.system(size: 24, weight: .regular))
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.blue)
                            .clipShape(Circle())
                            .shadow(radius: 8)
                    }
                    .padding(.trailing, 16)
                    .padding(.bottom, 16),
                    alignment: .bottomTrailing
                )
            }
            .onAppear {
                if isInitialLoad {
                    allPostsManager.fetchPosts()
                    followingPostsManager.fetchPostsFollowing()
                    isInitialLoad = false
                }
            }
        }
    }
}

额外说明 #

• 使用.hidden()替代单纯的opacity(0)，可确保未选中视图虽不可见，但依然保留布局和状态，同时不会响应用户交互（Tab切换场景下无需交互）。
• PostManager通过@StateObject初始化，只要视图不被销毁，其状态就会被保留，切换Tab时不会重新加载数据，有效降低带宽消耗。
• 若滚动位置仍未保留，iOS 17+可给RefreshableScrollView添加.scrollPosition绑定，或通过UIScrollView代理手动保存滚动位置，视图不被销毁的情况下SwiftUI默认会保留滚动状态。

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