求助：Swift中隐藏Toolbar时如何避免视图垂直偏移？

问题描述 #

我正在学习Swift iOS开发，当前应用的ContentView是带顶部透明Toolbar的MapView：

• Toolbar按钮位于.topLeading，点击显示侧边菜单
• 使用.toolbarBackground(.hidden, for: .navigationBar)隐藏Toolbar背景，显示菜单时正常
• 但在侧边菜单中通过NavigationLink跳转新视图时，视图会在约半秒后垂直偏移；返回侧边菜单时，侧边菜单元素也会出现相同偏移
• 已定位问题源于.toolbarBackground(.hidden)，注释后偏移消失；动态切换Toolbar显隐（.toolbar(showMenu ? .hidden : .visible)）也会引发相同问题

原代码 #

struct ContentView: View {

    @State private var mapOpacity = 1.0
    @State private var toggled = true
    @State private var showMenu = false
    @State private var locationSheetToggle = false
    
    @ObservedObject var locationManager = LocationManager.sharedLocationManager
    
    var body: some View {
        NavigationStack {
            ZStack {
                ZStack {
                    VStack {
                        MapView().ignoresSafeArea(edges: [.leading, .trailing])
                    }
                    .opacity(toggled ? 1.0 : 0.5)
                    .blur(radius: toggled ? 0.0 : 4.0)
                    
                    //Toggle
                    VStack {
                        Spacer()
                        
                        HStack {
                            Text("Map Toggle")
                            Toggle("Map Toggle", isOn: $toggled).labelsHidden()
                            
                        }
                        .padding(.bottom, 20)
                        .padding(.leading, 10)
                        
                    }
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
                    
                    ZStack {
                        VStack(alignment: .center) {
                            Group {
                                HStack {
                                    Image(systemName: "pause.circle")
                                        .resizable()
                                        .foregroundStyle(.red)
                                        .scaledToFit()
                                    
                                    Image(systemName: "exclamationmark.triangle")
                                        .resizable()
                                        .foregroundStyle(.yellow)
                                        .scaledToFit()
                                }
                                .frame(width: 100, height: 50)
                                
                                Text("Location tracking paused. No new paths will be drawn")
                                    .fontWeight(.medium)
                                    .padding()
                            }
                        }
                        .padding()
                        .background(.ultraThinMaterial)
                        .clipShape(RoundedRectangle(cornerRadius: 25))
                        .transition(.symbolEffect)

                    }
                    .animation(.easeInOut, 
                               value: LocationManager.sharedLocationManager.locationPaused || LocationManager.sharedLocationManager.authStatus == .denied)
                    .frame(width: 250, height: 750, alignment: .top)
                    .opacity(LocationManager.sharedLocationManager.locationPaused || LocationManager.sharedLocationManager.authStatus == .denied ? 1.0 : 0.0)

                }
                
                .onAppear(perform: {
                    if locationManager.authStatus != .authorizedAlways {
                        locationSheetToggle.toggle()
                    }
                }).sheet(isPresented: $locationSheetToggle, content: {
                    LocationRequestView(locationSheetToggle: $locationSheetToggle)
                })
                
                SideMenuView(isShowing: $showMenu)
            }
            .toolbar {
                ToolbarItemGroup(placement: .topBarLeading) {
                    Button(action: {
                        showMenu.toggle()
                    }, label: {
                        Image(systemName: "line.3.horizontal.circle.fill")
                            .foregroundStyle(.primary)
                            .frame(width: 45, height: 45)
                            .background(Color(UIColor.systemGray5))
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                        
                    })
                    .opacity(showMenu ? 0.0 : 1.0)
                }
            }
            .toolbarBackground(.hidden, for: .navigationBar)
        }
    }
}

解决方案 #

问题核心是toolbarBackground(.hidden)会移除NavigationBar的布局占位空间，导致跳转时系统重新计算布局引发偏移。我们需要保留Toolbar的布局高度，仅隐藏背景和按钮：

1. 移除原有的.toolbarBackground(.hidden, for: .navigationBar)
2. 设置Toolbar背景为透明，保留布局空间
3. 通过opacity和disabled控制按钮的显示与交互，而非动态隐藏Toolbar

修改后的关键代码片段：

NavigationStack {
    ZStack {
        // 原有内容保持不变
        SideMenuView(isShowing: $showMenu)
    }
    .toolbar {
        ToolbarItemGroup(placement: .topBarLeading) {
            Button(action: {
                showMenu.toggle()
            }, label: {
                Image(systemName: "line.3.horizontal.circle.fill")
                    .foregroundStyle(.primary)
                    .frame(width: 45, height: 45)
                    .background(Color(UIColor.systemGray5))
                    .clipShape(RoundedRectangle(cornerRadius: 10))
            })
            .opacity(showMenu ? 0.0 : 1.0)
            .disabled(showMenu) // 菜单显示时禁用按钮，避免误触
        }
    }
    // 替换隐藏背景为透明背景，保留Toolbar布局高度
    .toolbarBackground(Color.clear, for: .navigationBar)
    // 可选：隐藏Toolbar底部分隔线
    .toolbarBorder(.hidden, for: .navigationBar)
}

额外优化 #

如果需要侧边菜单完全覆盖顶部区域，可在SideMenuView中添加.ignoresSafeArea(edges: .top)，确保菜单顶到屏幕顶部，同时不影响NavigationStack的布局稳定性。

原理说明 #

toolbarBackground(.hidden)会让NavigationBar从布局树中移除占位空间，动态切换Toolbar显隐也会触发布局重计算，导致跳转时的垂直偏移。保持Toolbar的布局空间（即使背景透明、按钮隐藏），就能避免这种布局波动，同时实现预期的视觉效果。

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