SwiftUI：结合TabView使用大尺寸NavigationTitle为何CPU负载过高？

问题现象 #

在SwiftUI中结合使用TabView与NavigationStack时，若将大尺寸导航标题（.navigationBarTitleDisplayMode(.large)）绑定到动态状态变量（如示例中的selected），会出现模拟器冻结、CPU负载超过100%的情况；但将导航标题改为固定字符串时，代码运行完全正常。

复现代码 #

import SwiftUI

@main
struct TESTApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView()
                    .navigationViewStyle(.stack)
            }
        }
    }
}

struct ContentView: View {
    let array = ["A","B","C"]
    @State private var selected: String?
    @State private var showElement = false

    var body: some View {
        List {
            ForEach(array, id:\.self) { element in
                Text(element)
                    .onTapGesture {
                        selected = element
                        showElement = true
                    }
            }
        }
        .navigationDestination(isPresented: $showElement, destination: { 
            ChildView(array: array, selected: selected)
        })
        .navigationTitle("List")
    }
}

struct ChildView: View {
    let array: [String]
    @State var selected: String = "A"

    init(array: [String], selected: String? = nil) {
        self.array = array
        self._selected = State(initialValue: selected ?? (array.first ?? "A"))
    }

    var body: some View {
        VStack {
            TabView(selection: $selected) {
                ForEach(array, id:\.self) { element in
                    Text(element)
                        .tag(element)
                }
            }
            .indexViewStyle(.page(backgroundDisplayMode: .always))
            .tabViewStyle(.page(indexDisplayMode: .always))
        }
        .navigationBarTitleDisplayMode(.large)
        .navigationTitle(selected)
    }
}

问题原因 #

本质是无限重渲染循环导致的性能崩溃：

• 当selected状态变化时，navigationTitle(selected)会触发导航栏更新，进而导致ChildView的body重新计算；
• TabView的selection绑定到selected，视图重计算又会再次触发selected的状态响应，往复循环不断消耗CPU资源，最终导致模拟器冻结。

解决方案 #

方案1：分离标题状态与选中状态 #

通过单独的状态变量管理导航标题，仅在selected变化时更新标题，避免直接绑定导致的循环：

struct ChildView: View {
    let array: [String]
    @State private var selected: String = "A"
    @State private var navigationTitle: String = "A"

    init(array: [String], selected: String? = nil) {
        self.array = array
        let initialValue = selected ?? (array.first ?? "A")
        self._selected = State(initialValue: initialValue)
        self._navigationTitle = State(initialValue: initialValue)
    }

    var body: some View {
        VStack {
            TabView(selection: $selected) {
                ForEach(array, id:\.self) { element in
                    Text(element)
                        .tag(element)
                }
            }
            .indexViewStyle(.page(backgroundDisplayMode: .always))
            .tabViewStyle(.page(indexDisplayMode: .always))
            // 监听选中状态变化，更新导航标题
            .onChange(of: selected) { newValue in
                navigationTitle = newValue
            }
        }
        .navigationBarTitleDisplayMode(.large)
        .navigationTitle(navigationTitle)
    }
}

方案2：使用ObservableObject管理状态 #

将状态逻辑抽离到独立的ViewModel中，减少视图层的重计算范围：

class ChildViewModel: ObservableObject {
    let array: [String]
    @Published var selected: String
    
    init(array: [String], selected: String?) {
        self.array = array
        self.selected = selected ?? (array.first ?? "A")
    }
}

struct ChildView: View {
    @StateObject private var viewModel: ChildViewModel

    init(array: [String], selected: String? = nil) {
        self._viewModel = StateObject(wrappedValue: ChildViewModel(array: array, selected: selected))
    }

    var body: some View {
        VStack {
            TabView(selection: $viewModel.selected) {
                ForEach(viewModel.array, id:\.self) { element in
                    Text(element)
                        .tag(element)
                }
            }
            .indexViewStyle(.page(backgroundDisplayMode: .always))
            .tabViewStyle(.page(indexDisplayMode: .always))
        }
        .navigationBarTitleDisplayMode(.large)
        .navigationTitle(viewModel.selected)
        // 标记视图身份，限制重渲染范围
        .id(viewModel.selected)
    }
}

两种方案核心都是打破动态标题与TabView选择状态之间的循环依赖，避免不必要的无限重渲染，从而解决CPU过载和模拟器冻结问题。

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