SwiftUI自定义TabBar切换时视图重载，如何保留视图状态？

问题原因 #

用switch语句切换视图时，未选中的视图会被SwiftUI从视图层级中移除并销毁，再次切换回来时会重新初始化，导致滚动位置、输入内容等状态全部丢失。

解决方案：保持所有子视图存活 #

通过让所有子视图始终存在于视图层级中，仅通过opacity和offset控制显示/隐藏，就能保留每个视图的状态。

修改后的完整代码 #

struct Home: View {
    @State var selectedIndex = 0
    @State var presented = false
    let icons = ["house", "hands.sparkles", "plus", "message", "person"]
    
    // 预定义所有子视图，确保仅初始化一次
    private var tabViews: [AnyView] {
        [
            AnyView(HomePage()),
            AnyView(NavigationView { Discover() }),
            AnyView(LogoutForNow()),
            AnyView(LogoutForNow()),
            AnyView(NavigationView { Profile2() })
        ]
    }
    
    var body: some View {
        VStack {
            Spacer()
                .fullScreenCover(isPresented: $presented) {
                    VStack {
                        Text("Create Post Here")
                        Button("Close") {
                            presented.toggle()
                        }
                    }
                }
            
            // 用ZStack承载所有子视图，仅显示选中项
            ZStack {
                ForEach(0..<tabViews.count, id: \.self) { index in
                    tabViews[index]
                        .opacity(selectedIndex == index ? 1 : 0)
                        .offset(x: selectedIndex == index ? 0 : UIScreen.main.bounds.width)
                        .allowsHitTesting(selectedIndex == index)
                }
            }
            
            HStack {
                ForEach(0..<5, id: \.self) { number in
                    Spacer()
                    Button(action: {
                        if number == 2 {
                            presented.toggle()
                        } else {
                            selectedIndex = number
                        }
                    }) {
                        if number == 2 {
                            Image(systemName: icons[number])
                                .font(.system(size: 25, weight: .regular))
                                .foregroundColor(.white)
                                .frame(width: 50, height: 50)
                                .background(Color.blue)
                                .cornerRadius(25)
                        } else {
                            Image(systemName: icons[number])
                                .font(.system(size: 25, weight: .regular))
                                .foregroundColor(selectedIndex == number ? .black : Color(UIColor.lightGray))
                        }
                    }
                    Spacer()
                }
            }
        }
    }
}

关键改动说明 #

• tabViews数组：提前将所有子视图包装成AnyView，确保每个视图只初始化一次，避免切换时重复创建。
• ZStack承载视图：所有子视图常驻于视图层级中，不会被销毁，自然保留状态。
• opacity+offset控制显示：选中的视图正常显示，未选中的视图透明且偏移到屏幕外，视觉上完全隐藏。
• allowsHitTesting：仅选中的视图能响应用户交互，避免透明视图干扰操作。

额外优化建议 #

• 若需要切换动画，可给opacity和offset添加.animation(.easeInOut, value: selectedIndex)，实现平滑过渡效果。
• 如果子视图内存占用较高，可结合LazyVStack和hidden属性，但opacity+offset的方式更简单稳定。

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