SwiftUI自定义TabBar中如何防止视图销毁并保留状态？

你的问题根源在于用switch切换视图时，未选中的Tab视图会被SwiftUI销毁，再次切换回来就会重新初始化，自然丢失之前的状态。解决思路很简单：不要销毁未选中的视图，而是把它们全部渲染出来，通过隐藏（opacity）和禁止交互（allowsHitTesting）来控制显示。

修改后的完整代码 #

enum Tab: CaseIterable {
    case myWords
    case addWord
    case training
    case settings
    
    // 假设你原来的title属性定义在这里
    var title: String {
        switch self {
        case .myWords: return "my_words_key"
        case .addWord: return "add_word_key"
        case .training: return "training_key"
        case .settings: return "settings_key"
        }
    }
}

// 可选：懒加载视图，优化初始性能
struct LazyView<Content: View>: View {
    let build: () -> Content
    init(_ build: @autoclosure @escaping () -> Content) {
        self.build = build
    }
    var body: Content {
        build()
    }
}

@Themed struct TabBarView: View {
    @State private var selectedTab: Tab = .myWords
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 所有Tab视图堆叠，通过选中状态控制显示/交互
            ZStack {
                makeNavigationView(for: .myWords) { LazyView(MyWordsView()) }
                    .opacity(selectedTab == .myWords ? 1 : 0)
                    .allowsHitTesting(selectedTab == .myWords)
                
                makeNavigationView(for: .addWord) { LazyView(AddWordView()) }
                    .opacity(selectedTab == .addWord ? 1 : 0)
                    .allowsHitTesting(selectedTab == .addWord)
                
                makeNavigationView(for: .training) { LazyView(QuickTrainingView()) }
                    .opacity(selectedTab == .training ? 1 : 0)
                    .allowsHitTesting(selectedTab == .training)
                
                makeNavigationView(for: .settings) { LazyView(SettingsView()) }
                    .opacity(selectedTab == .settings ? 1 : 0)
                    .allowsHitTesting(selectedTab == .settings)
            }
            
            // 底部Tab按钮栏保持不变
            HStack(spacing: 0) {
                TabButton(text: "My words", image: "Tabs/Words", selected: makeBinding(for: .myWords))
                TabButton(text: "Add word", image: "Tabs/Add", selected: makeBinding(for: .addWord))
                TabButton(text: "Training", image: "Tabs/Play", selected: makeBinding(for: .training))
                TabButton(text: "Settings", image: "Tabs/Settings", selected: makeBinding(for: .settings))
            }
        }
        .ignoresSafeArea(.keyboard)
    }
    
    private func makeNavigationView(for tab: Tab, content: () -> some View) -> some View {
        NavigationView {
            content()
                .navigationBarTitleDisplayMode(.inline)
                .navigationTitle(String(localeKey: tab.title))
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .accentColor(theme.color(.lightBlue))
    }
    
    private func makeBinding(for tab: Tab) -> Binding <Bool> {
        Binding <Bool>(get: { selectedTab == tab },
                       set: { if $0 == true { selectedTab = tab } })
    }
}

关键说明 #

1. 视图堆叠与状态保留：用ZStack包裹所有Tab对应的视图，未选中的视图只是将opacity设为0并禁用交互，不会被销毁，因此视图的所有状态（包括NavigationView的导航栈、输入内容、滚动位置等）都会被完整保留。
2. 懒加载优化：通过LazyView包装每个Tab的内容视图，只有第一次切换到该Tab时才会创建视图实例，避免初始加载过多视图影响性能，同时切换回来时状态依然保留。
3. 按钮交互逻辑不变：底部Tab按钮的绑定逻辑无需修改，依然通过selectedTab控制选中状态。

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