I have been attempting to add some color to the top of the screen near the notch. I seem to have run into a problem with the color not displaying when used with a Form.
I tried using List and VStack--List also doesn't display the green color while VStack does work, but destroys the text formatting. I tried using a ZStack above the Color.green line but this didn't seem to have any impact and possibly not necessary.
This first struct below works fine displaying the title at the top with green background.
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { g in
Color.green
.frame(height: g.safeAreaInsets.top, alignment: .top)
.ignoresSafeArea(.container, edges: .top)
}
Spacer()
}
.toolbar {
ToolbarItem(placement: .principal) {
Text("Title")
}
}
}
}
In the struct below I added an empty form which causes the color to not be displayed (adding text to the form doesn't change anything).
So I am wondering if I left something out and if there is a work-around to fix this. Thanks for looking!
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { g in
Color.green
.frame(height: g.safeAreaInsets.top, alignment: .top)
.ignoresSafeArea(.container, edges: .top)
Form {
}
}
Spacer()
}
.toolbar {
ToolbarItem(placement: .principal) {
Text("Title")
}
}
}
}
You could try something different using toolbarBackground, as
shown in this example code:
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
Form {
Text("testing")
}
Spacer()
}
.toolbar {
ToolbarItem(placement: .principal) {
Text("Title")
}
}
.toolbarBackground(Color.green, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
}
}
}