如何使自定义导航栏背景颜色超出 SwiftUI 中的安全区域

Question

我实现了一个自定义导航栏，它只是一个带有标题文本和一个用于关闭该视图的箭头的视图。我只希望导航栏的背景颜色超出顶部安全区域，同时内容遵守安全区域限制

这是自定义导航栏的代码：

struct CustomNavigationBar: View {
    
    @Environment(\.presentationMode) var presentationMode
    let title: String
    
    var body: some View {
        HStack {
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }, label: {
                Image(systemName: "chevron.left")
                    .font(.title2)
                    .foregroundColor(Globals.Color.background)
            })
            Spacer()
            Text(title)
                .font(.title2)
                .bold()
                .foregroundColor(Globals.Color.background)
            Spacer()
        }
        .padding()
        .background(Globals.Color.crimson)
    }
}

以下是使用自定义导航栏的示例视图的代码：

var body: some View {
    ZStack {
        VStack {
            CustomNavigationBar(title: "Sample Title")
            Spacer()
        }
    }
}

下面我附上了当前视图的屏幕截图：

Answer 1

你应该在深红色背景上放一个ignoresSafeArea。

struct CustomNavigationBar: View {
    
    @Environment(\.presentationMode) var presentationMode
    let title: String
    
    var body: some View {
        HStack {
            
            Button(action: {
                presentationMode.wrappedValue.dismiss()
            }, label: {
                Image(systemName: "chevron.left")
                    .font(.title2)
                    .foregroundColor(Color.white)
            })
            Spacer()
            Text(title)
                .font(.title2)
                .bold()
                .foregroundColor(Color.white)
            Spacer()
            
        }
        .padding()
        .background(Color.red.ignoresSafeArea()) /// here!
    }
}

结果：

如何使自定义导航栏背景颜色超出 SwiftUI 中的安全区域

How to make custom navigation bar background color to go beyond safe area in SwiftUI

swift

swiftui

safearealayoutguide