SwiftUI使用NavigationView切换标签时如何保存视图状态

问题根源 #

switch分支控制视图显隐时，未匹配分支的视图会被SwiftUI从视图树中彻底销毁，视图内部的私有状态（@State、@StateObject修饰的属性）会随实例释放，切回时重新初始化新视图实例，因此状态全部重置。

可选解决方案 #

方案1：ZStack堆叠显隐（改造成本最低，无侵入）

直接将分支切换逻辑替换为堆叠+透明度控制，不会销毁视图实例，所有内部状态会自动保留，不需要修改子视图原有代码：

enum SelectedTab {
    case checklist
    case altitude
}

@State var selectedTab: SelectedTab = .checklist // 取消可选类型更易用

var body: some View {
    NavigationView {
        ZStack { // 替换原有的VStack
            ChecklistView()
                .opacity(selectedTab == .checklist ? 1 : 0)
                .disabled(selectedTab != .checklist) // 不可见时禁用交互，避免误触下层视图
            AltitudeView()
                .opacity(selectedTab == .altitude ? 1 : 0)
                .disabled(selectedTab != .altitude)
        }
        // 原有自定义工具栏逻辑保持不变，点击修改selectedTab即可
    }
}

适用场景：标签数量在5个以内，每个子视图没有极端复杂的渲染逻辑，是大多数场景的首选方案。

方案2：状态上移统一管理（适合需要跨页面共享状态、持久化状态的场景）

把所有子视图需要保留的状态抽到公共可观察对象中，由父层持有，子视图重建时直接读取公共状态即可恢复：

1. 定义公共状态管理器

class TabStateManager: ObservableObject {
    // 保存Checklist视图的所有需要持久化的状态
    @Published var checklistScrollOffset: CGPoint = .zero
    @Published var checklistToggleStates: [Bool] = []
    @Published var checklistInputContent = ""
    
    // 保存Altitude视图的所有需要持久化的状态
    @Published var altitudeValue: Double = 0
    // 其余需要保存的状态按需求补充
}

2. 父视图持有状态管理器，传入子视图

@StateObject private var stateManager = TabStateManager()
@State var selectedTab: SelectedTab = .checklist

var body: some View {
    NavigationView {
        VStack {
            switch selectedTab {
                case .checklist:
                    ChecklistView(state: stateManager)
                case .altitude:
                    AltitudeView(state: stateManager)
            }                
        }
    }
}

3. 子视图内部将原来的@State属性改为从传入的stateManager读取/修改即可。

方案3：复用系统TabView能力

SwiftUI内置的TabView原生支持子视图状态缓存，切换时不会销毁实例，隐藏自带的分页指示器后就可以对接自定义工具栏：

@State var selectedTab: SelectedTab = .checklist

var body: some View {
    NavigationView {
        TabView(selection: $selectedTab) {
            ChecklistView()
                .tag(SelectedTab.checklist)
            AltitudeView()
                .tag(SelectedTab.altitude)
        }
        .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏系统自带的分页指示器
        // 原有自定义工具栏逻辑保持不变，点击修改selectedTab即可
    }
}

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