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

【问题标题】：How to make custom navigation bar background color to go beyond safe area in SwiftUI如何使自定义导航栏背景颜色超出 SwiftUI 中的安全区域
【发布时间】：2021-07-24 21:40:11
【问题描述】：

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

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

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

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

【问题讨论】：

标签： swift swiftui safearealayoutguide

【解决方案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!
    }
}

结果：

【讨论】：