I’ve created CustomNavigationContainerView with CustomNavBar and content material. In that, we will change title, again button, subtitle, show nav bar and background of nav bar. The issue is once we apply clear colour to background colour of nav bar via prefrenceKey it at all times take white colour. I do not know whether or not it’s a bug or one thing i miss. Any assist or suggestion can be appreciated. The code can be as comply with:
CustomNavigationContainerView:
struct CustomNavBarContainerView<Content material: View>: View {
let content material: Content material
@State personal var backgroundColor: Shade = .clear
init(@ViewBuilder content material: () -> Content material) {
self.content material = content material()
}
var physique: some View {
VStack(spacing: 0) {
CustomNavBarView(backgroundColor: backgroundColor)
content material
.body(maxWidth: .infinity, maxHeight: .infinity)
}
.onPreferenceChange(CustomNavBarBackgroundColorPrefrenceKey.self, carry out: { worth in
self.backgroundColor = worth
})
}
}
struct CustomNavBarContainerView_Previews: PreviewProvider {
static var previews: some View {
CustomNavBarContainerView {
ZStack {
Shade.inexperienced.ignoresSafeArea()
Textual content("Whats up, world!")
.foregroundColor(.white)
.customNavBarItems(backgroundColor: .purple)
}
}
}
}
CustomPreferenceKey
struct CustomNavBarBackgroundColorPrefrenceKey: PreferenceKey {
static var defaultValue: Shade = .clear
static func scale back(worth: inout Shade, nextValue: () -> Shade) {
worth = nextValue()
}
}
extension View {
func customNavigationBarBackgroundColor(_ colour: Shade) -> some View {
desire(key: CustomNavBarBackgroundColorPrefrenceKey.self, worth: colour)
}
func customNavBarItems(backgroundColor: Shade = .clear) -> some View {
self
.customNavigationBarBackgroundColor(backgroundColor)
}
}
CustomNavBarView:
struct CustomNavBarView: View {
@Atmosphere(.presentationMode) var presentationMode
let showBackButton: Bool
let title: String
let subtitle: String?
let backgroundColor: Shade
var physique: some View {
HStack {
if showBackButton {
backButton
}
Spacer()
titleSection
Spacer()
if showBackButton {
backButton
.opacity(0)
}
}
.padding()
.padding(.horizontal, 10)
.tint(Shade.theme.black)
.foregroundColor(Shade.theme.black)
.font(.headline)
.background(backgroundColor)
}
}
struct CustomNavBarView_Previews: PreviewProvider {
static var previews: some View {
VStack {
CustomNavBarView(showBackButton: true, title: "TItle right here", subtitle: "Subtitle goes right here", backgroundColor: .clear)
Spacer()
}
.background(.purple)
}
}
extension CustomNavBarView {
personal var backButton: some View {
Button(motion: {
presentationMode.wrappedValue.dismiss()
}, label: {
Picture(systemName: "chevron.left")
.font(.title)
})
}
personal var titleSection: some View {
VStack(spacing: 4) {
Textual content(title)
.font(.title)
.fontWeight(.semibold)
if let subtitle = subtitle {
Textual content(subtitle)
}
}
}
}