SwiftUI导航栏自定义标题在真机/模拟器中被裁剪问题

问题根源 #

iOS 18对NavigationStack的布局逻辑做了更新，父视图（RootView）的navigationTitle、searchable、toolbar配置会影响导航栏的高度计算缓存。从RootView转场到VehiclePositionView时，系统未正确重新计算自定义标题的布局范围，导致转场结束后标题被裁剪——而Xcode预览是孤立渲染详情页，不受父视图配置干扰，因此显示正常。

修复方案 #

方案1：详情页显式重置导航栏布局

在VehiclePositionView中强制指定导航栏显示模式，显式设置自定义标题尺寸，并在视图出现时触发导航栏布局刷新：

struct VehiclePositionView: View {
    let vehicle: Vehicle
    
    var body: some View {
        // 详情页内容
        Text("车辆位置详情")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    // 自定义标题视图
                    HStack(alignment: .center, spacing: 8) {
                        Image(vehicle.imageName)
                            .resizable()
                            .frame(width: 24, height: 24)
                        VStack(alignment: .leading, spacing: 2) {
                            Text(vehicle.licensePlate)
                                .font(.headline)
                            Text(vehicle.model)
                                .font(.caption)
                                .foregroundStyle(.secondary)
                        }
                    }
                    .frame(height: 44) // 显式设置高度匹配导航栏默认值
                }
            }
            .onAppear {
                // 强制刷新导航栏布局，修正计算偏差
                UIApplication.shared.connectedScenes
                    .compactMap { $0 as? UIWindowScene }
                    .first?.windows
                    .first?.rootViewController?.navigationController?
                    .navigationBar.setNeedsLayout()
            }
    }
}

方案2：父视图根据导航栈动态调整配置

在RootView中通过导航路径状态，判断是否进入详情页，动态关闭父视图的searchable和不必要的toolbar元素，避免干扰子视图导航栏：

struct RootView: View {
    @State private var navigationPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            VehicleListView()
                .navigationTitle("车辆列表")
                // 仅在非详情页显示搜索栏
                .searchable(text: .constant(""), isPresented: .constant(navigationPath.isEmpty))
                .toolbar {
                    if navigationPath.isEmpty {
                        // 仅在非详情页显示父视图toolbar内容
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button("添加") {}
                        }
                    }
                }
                .navigationDestination(for: Vehicle.self) { vehicle in
                    VehiclePositionView(vehicle: vehicle)
                        .navigationTitle("") // 清空父视图残留标题
                }
        }
    }
}

方案3：改用自定义导航栏容器（彻底规避系统布局问题）

如果上述方案无效，可完全自定义导航栏替代系统NavigationBar：

struct VehiclePositionView: View {
    let vehicle: Vehicle
    
    var body: some View {
        VStack(spacing: 0) {
            // 自定义导航栏
            HStack(alignment: .center, spacing: 8) {
                Button(action: { /* 返回逻辑 */ }) {
                    Image(systemName: "chevron.left")
                }
                Spacer()
                HStack(alignment: .center, spacing: 8) {
                    Image(vehicle.imageName)
                        .resizable()
                        .frame(width: 24, height: 24)
                    VStack(alignment: .leading, spacing: 2) {
                        Text(vehicle.licensePlate)
                            .font(.headline)
                        Text(vehicle.model)
                            .font(.caption)
                    }
                }
                Spacer()
                Button("刷新") {}
            }
            .padding(.horizontal, 16)
            .frame(height: 44)
            .background(Color(.systemBackground))
            
            // 详情页内容
            ScrollView {
                Text("车辆位置详情内容")
            }
        }
        .ignoresSafeArea(edges: .top)
    }
}

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