How to make the mapkit view half the size and stay on top?

Question

I am using Mapkit to show the user location. I want the map to fill half of the screen and stay on the top side. This is the code I tried to make the map stay top. However, I have shrunken the map, but I can't get the map go to the top. Any help will be very appreciated.

ZStack(alignment: .top){
            MapView().ignoresSafeArea(.all,edges: .all)
                .environmentObject(mapData).frame(height: sizeOfMap, alignment: .topLeading)
}

Answer 1

The right way of doing this is using GeometryReader to keep layout same on every device!

---

struct ContentView: View {
    
    var body: some View {
        
        GeometryReader { proxy in
            
            VStack(spacing: 0.0) {
                
                ZStack {
                    
                    Color.blue
                    
                    Text("MapView here!") // MapView()
                    
                }
                .frame(height: proxy.size.height/2)
                
                
                ZStack {
                    
                    Color.red
                    
                    Text("other View here!")
                    
                }
                .frame(height: proxy.size.height/2)
                
                
            }

        }
        .ignoresSafeArea()
        
    }
    
}