So I've been playing around with SwiftUI and I can't seem to stack NavigationView
correctly with ScrollView
and ZStack
.
I'm trying to achieve a view with a .black
background. Code below:
MainView.swift
var body: some View {
NavigationView {
ChildView()
}
}
ChildView.swift
var body: some View {
ZStack {
Color.black.edgesIgnoringSafeArea(.all)
ScrollView {
...
}
}
}
The above code gives me a black background but breaks the navigation bar behaviour.
So it seems like the the navigation doesn't go from the scrollEdgeAppearance
to standardAppearance
when scrolling.
Any ideas?
Put the ScrollView
up as far as possible, otherwise the header animation will not work. The following code does what you want:
struct ChildView: View {
var body: some View {
ScrollView {
VStack(spacing: 20) {
ForEach(0..<40) { _ in
Text("Hello, World!")
.frame(maxWidth: .infinity)
}
}
.background(Color.green.edgesIgnoringSafeArea(.all))
}
.navigationBarTitle("Discover")
}
}
struct ContentView: View {
var body: some View {
NavigationView {
ChildView()
}
}
}
To achieve a completely black background, even if you scroll up the bottom, you have to fiddle around in UINavigationController
. While there, I also changed the navigation bar colors to achieve your look and feel. Note that this doesn't keep track of whether the user enabled dark mode or not.
extension UINavigationController {
override open func viewDidLoad() {
super.viewDidLoad()
overrideUserInterfaceStyle = .dark
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = UIColor.black
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.