Popup view pushes current view SwiftUI

Question

I'm trying to reuse some design from here, but I can't get it to center on the screen, it pushes the view to the top. How can I display a pop up like this without pushing the view, just put it on top of the view. Should an Alert be used? How?

import SwiftUI

struct DatePicker: View {
    
    @State var hours: Int = 0
    @State var minutes: Int = 0
    @State private var newEatenMealTime = Date()
    @State private var showingNewMealTime = false
    
    var body: some View {
       
        VStack {
            Button(action: {
                self.showingNewMealTime = true
            }) {
                Text("Click me")
            }
            
            if $showingNewMealTime.wrappedValue {
                VStack(alignment: .center) {
                    ZStack{
                        Color.black.opacity(0.4)
                            .edgesIgnoringSafeArea(.vertical)
                        // this one is it
                        VStack(spacing: 20) {
                            Text("Time between meals")
                                .bold().padding()
                                .frame(maxWidth: .infinity)
                                .background(Color.yellow)
                                .foregroundColor(Color.white)

                            HStack {
                                Spacer()
                                VStack {
                                    Picker("", selection: $hours){
                                        ForEach(0..<4, id: \.self) { i in
                                            Text("\(i) hours").tag(i)
                                        }
                                    }
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                }

                                VStack {
                                    Picker("", selection: $minutes){
                                        ForEach(0..<60, id: \.self) { i in
                                            Text("\(i) min").tag(i)
                                        }
                                    }
                                    .frame(width: 150, height: 120)
                                    .clipped()
                                }
                            }

                            Spacer()

                            Button(action: {
                                self.showingNewMealTime = false
                            }){
                                Text("Close")
                            } .padding()
                        }
                        .frame(width:300, height: 300)
                        .background(Color.white)
                        .mask(RoundedRectangle(cornerRadius: 20))
                        .shadow(radius: 20)
                    }
                }
            }
        }
        
        
        
        
        
        
    }
}

struct DatePicker_Previews: PreviewProvider {
    static var previews: some View {
        DatePicker()
    }
}

If you see at the top, the click me shouldn't be there, the click me was at the center of the screen, once the pop up shows up, it gets pushed.

Would it be better to use Alert? But how do I accomplish the same there? — , Jul 07 '20 at 18:38

score 2 · Accepted Answer · answered Jul 07 '20 at 18:39

2

Just use ZStack instead of VStack. Tested with Xcode 11.4 / iOS 13.4

var body: some View {

    ZStack {                // << here
        Button(action: {

answered Jul 07 '20 at 18:39

Asperi

228,894
20
464
690

That worked for this simple example, but views inside views is a little trickier, but I see now what's going on. Thanks – Jul 07 '20 at 18:47
How can I include a datepicker in an alert? I think this would be a better approach. Should I create a different question? Something like this: https://stackoverflow.com/questions/60836608/how-to-create-an-alert-with-datepicker-in-swiftui – Jul 07 '20 at 18:57

Popup view pushes current view SwiftUI

1 Answers1