You might want to consider implementing a Navigation Bar Appearance ViewModifier and applying it to your VStack
struct MainView: View {
var body: some View {
ScrollView {
Text("Text")
}
.frame(maxWidth: .infinity)
}
}
struct TabBarView: View {
var body: some View {
Color.pink
.frame(maxWidth: .infinity)
.frame(height: 55)
}
}
struct ContentView: View {
var body: some View {
NavigationView {
VStack(spacing: 0) {
MainView()
TabBarView() // Commenting this out fixes the problem.
}
.background(.red) // Commenting this out _also_ fixes the problem.
.opaqueNavigationBar(
foregroundColor: .white,
backgroundColor: .systemBrown,
tintColor: .systemIndigo,
shadowColor: .darkGray)
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("Main View")
}
}
}
public struct OpaqueNavigationBarAppearance: ViewModifier {
public init(
font: UIFont = .preferredFont(forTextStyle: .headline),
largeTitleFont: UIFont = .preferredFont(forTextStyle: .largeTitle),
foregroundColor: UIColor = .clear,
backgroundColor: UIColor = .secondarySystemBackground,
tintColor: UIColor = .clear,
shadowColor: UIColor = .clear) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.titleTextAttributes = [.foregroundColor: foregroundColor, .font: font]
appearance.largeTitleTextAttributes = [.foregroundColor: foregroundColor, .font: largeTitleFont]
appearance.shadowColor = shadowColor
appearance.backgroundColor = backgroundColor
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
UINavigationBar.appearance().compactAppearance = appearance
UINavigationBar.appearance().tintColor = tintColor
}
public func body(content: Content) -> some View {
return content
}
}
public extension View {
func opaqueNavigationBar(
font: UIFont = .preferredFont(forTextStyle: .headline),
largeTitleFont: UIFont = .preferredFont(forTextStyle: .largeTitle),
foregroundColor: UIColor = .clear,
backgroundColor: UIColor = .secondarySystemBackground,
tintColor: UIColor = .clear,
shadowColor: UIColor = .clear) -> some View {
ModifiedContent(
content: self,
modifier: OpaqueNavigationBarAppearance(
font: font,
largeTitleFont: largeTitleFont,
foregroundColor: foregroundColor,
backgroundColor: backgroundColor,
tintColor: tintColor,
shadowColor: shadowColor))
}
}
Topic:
UI Frameworks
SubTopic:
UIKit
Tags: