如何调整SwiftUI中NavigationBar的高度？

问题 #

我的NavigationBar变得过大，如何在SwiftUI中控制它的高度？

相关代码片段：

.navigationBarBackButtonHidden(false)
.navigationBarTitle("Sunrise Sunset", displayMode: .inline)
.navigationBarColor(backgroundColor: .gray, titleColor: .white)

自定义的navigationBarColor实现代码：

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?
    var titleColor: UIColor?
    init(backgroundColor: UIColor?, titleColor: UIColor?) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: titleColor ?? .white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: titleColor ?? .white]
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    }

    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    Color(self.backgroundColor ?? .clear)
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}

extension View {
    func navigationBarColor(backgroundColor: UIColor?, titleColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor, titleColor: titleColor))
    }
}

问题原因 #

导航栏视觉上过高，是因为自定义NavigationBarModifier的body中额外添加了一个覆盖安全区域顶部的颜色视图，该视图与系统导航栏叠加后，造成了导航栏整体被拉长的错觉。

解决方法 #

移除多余的颜色视图，直接通过UINavigationBarAppearance配置导航栏样式即可，修改后的代码如下：

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?
    var titleColor: UIColor?
    
    init(backgroundColor: UIColor?, titleColor: UIColor?) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        // 使用不透明背景配置，替代透明背景
        coloredAppearance.configureWithOpaqueBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: titleColor ?? .white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: titleColor ?? .white]
        
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        // 强制关闭半透明效果，确保高度符合系统默认
        UINavigationBar.appearance().isTranslucent = false
    }

    func body(content: Content) -> some View {
        // 直接返回原内容，移除多余的ZStack和颜色层
        content
    }
}

extension View {
    func navigationBarColor(backgroundColor: UIColor?, titleColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor, titleColor: titleColor))
    }
}

关键修改说明 #

1. 替换背景配置方法：将configureWithTransparentBackground()改为configureWithOpaqueBackground()，确保导航栏背景完全不透明，避免视图叠加问题。
2. 关闭半透明效果：添加UINavigationBar.appearance().isTranslucent = false，强制导航栏使用系统默认的不透明高度。
3. 移除多余视图：删除body中的ZStack和安全区域颜色层，这是导致视觉高度异常的核心原因。

修改后，导航栏会恢复系统默认高度，同时保留自定义的背景色和标题文字颜色。

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