SwiftUI中如何让内容视图延伸至导航栏下方

要实现内容视图像ZStack那样始终延伸至导航栏下方，切换导航栏状态时内容不偏移，核心是让视图忽略顶部安全区域，让导航栏覆盖在内容之上而非挤压内容空间。以下是具体修改方案：

关键调整点 #

• 让内容视图忽略顶部安全区域，使背景和内容延伸到导航栏所在的屏幕顶部区域
• 设置导航栏背景为半透明/透明，确保下方内容可见
• 固定内容的位置，避免受导航栏状态影响

修改后的完整代码 #

import SwiftUI

@main
struct ViewDismissApp: App {
    var body: some Scene {
        WindowGroup {
            MyTabView()
        }
    }
}

struct MyTabView: View {
    var body: some View {
        TabView {
            NavigationView {
                RandomView(title: "tab 1")
            }
            .tabItem {
                Text("Tab 1")
            }

            NavigationView {
                RandomView(title: "tab 2")
            }
            .tabItem {
                Text("Tab 2")
            }
        }
    }
}

struct RandomView: View {
    let title: String
    
    var body: some View {
        NavigationLink {
            ChildView()
        } label: {
            Text(title)
        }
    }
}

struct ChildView: View {
    @State private var showNavigationbar = true
    @State private var hideTabbar = true

    var body: some View {
        mainBody()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.green)
            .edgesIgnoringSafeArea(.top) // 忽略顶部安全区域，让背景延伸到导航栏下方
            .toolbar(hideTabbar ? .hidden : .visible, for: .tabBar)
            // 设置导航栏背景：显示时用默认半透明，隐藏时透明
            .toolbarBackground(showNavigationbar ? .bar : .hidden, for: .navigationBar)
            .navigationBarHidden(!showNavigationbar)
            .navigationBarTitleDisplayMode(.inline)
            .onAppear {
                hideTabbar = true
            }
            .onDisappear {
                hideTabbar = false
            }
    }
    
    private func mainBody() -> some View {
        VStack {
            // 固定顶部padding，确保文本位置不受导航栏状态影响
            Text("Tap here to hide NavigationBar")
                .padding(.top, 64) // 数值对应导航栏+状态栏的高度，可按需调整
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .onTapGesture(perform: {
            showNavigationbar.toggle()
        })
        .background(Color.yellow)
    }
}

原理说明 #

• edgesIgnoringSafeArea(.top) 让内容视图突破顶部安全区域限制，直接延伸到屏幕最顶部，导航栏会覆盖在视图之上
• toolbarBackground 控制导航栏背景的显示状态，确保导航栏显示时能看到下方的绿色背景，隐藏时不遮挡内容
• 固定的.padding(.top, 64) 让文本始终处于导航栏下方的位置，切换导航栏状态时不会发生偏移

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