I have a ZStack that contains a vstack and an overlay in form of a view that I’ve created EditHabitNameOverlay. My problem is that I fade the original view and disable it when the overlay is shown, but I can’t manage to make the main view extend to the full screen’s height, because the split of fades doesn’t seem right in the image attached. I’ve tried infinities with frames but it didn’t work.
var body: some View {
NavigationView {
ScrollView {
ZStack(alignment: .center) {
VStack(spacing: 0) {
...
}
if showEditNameOverlay {
Color(.black)
.ignoresSafeArea()
.opacity(0.3)
EditHabitNameOverlay(passedHabit: passedHabit) {
withAnimation {
showEditNameOverlay.toggle()
}
}
}
}
}
.background(.fWhite)
.ignoresSafeArea()
.onAppear {
vm.fetchMonthDays(savedDays: savedDays)
}
}
}
>Solution :
The ZStack in your code is just affecting the content of the VStack and not the whole View. So you need the ZStack to encapsulate the ScrollView:
var body: some View {
NavigationView {
ZStack(alignment: .center) {
ScrollView {
VStack(spacing: 0) {
...
}
}.background(.fWhite)
if showEditNameOverlay {
Color(.black)
.ignoresSafeArea()
.opacity(0.3)
EditHabitNameOverlay(passedHabit: passedHabit) {
withAnimation {
showEditNameOverlay.toggle()
}
}
}
}.ignoresSafeArea()
.onAppear {
vm.fetchMonthDays(savedDays: savedDays)
}
}
}
