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

Question

我实现了一个自定义导航栏，它只是一个带有标题文本的 View 和一个关闭 View 的箭头。我只希望导航栏的背景颜色超出顶部安全区域，而内容遵守安全区域限制
这是自定义导航栏的代码:

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)
    }
}

这是使用自定义导航栏的示例 View 的代码:

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

下面我附上了当前 View 的屏幕截图:

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!
    }
}

结果: