Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

VStack doesn't fill all screen height (frame infinity doesn't work)

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)
        }
    }
}

App Image

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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)
        }
    }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading