如何使自定义导航栏背景颜色超出 SwiftUI 中的安全区域
How to make custom navigation bar background color to go beyond safe area in SwiftUI
我实现了一个自定义导航栏,它只是一个带有标题文本和一个用于关闭该视图的箭头的视图。我只希望导航栏的背景颜色超出顶部安全区域,同时内容遵守安全区域限制
这是自定义导航栏的代码:
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()
}
}
}
下面我附上了当前视图的屏幕截图:
你应该在深红色背景上放一个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!
}
}
结果:
我实现了一个自定义导航栏,它只是一个带有标题文本和一个用于关闭该视图的箭头的视图。我只希望导航栏的背景颜色超出顶部安全区域,同时内容遵守安全区域限制
这是自定义导航栏的代码:
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()
}
}
}
下面我附上了当前视图的屏幕截图:
你应该在深红色背景上放一个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!
}
}
结果: