How to use SwiftUI to create a sheet menu that adapts to a wide screen like the Apple Maps App

Question

The bounty expires in 7 days. Answers to this question are eligible for a +50 reputation bounty. Kunwar Sahni wants to draw more attention to this question.

How to use SwiftUI to create a sheet menu that adapts to a wide screen like the Apple Maps App

页次横向屏幕应用表菜单

I tried to use Sheet directly and changed the height and allowed to interact with the background by getting sheetPresentationController, but in the iPad or horizontal iPhone, I can t find a suitable way to align the menu to one side and allow it to interact with the background.

I also tried to use other third-party configurations, but there are not many adaptations, and the appearance is not similar to sheet. How do I need to make such a sheet menu just like in Apple Map app?

我试图将来文方意见列入主席团的议事录中,但还是做了一些工作。在iPad直接使用Sheet将显示在屏幕中心,在适应横向iP时会出现问题。

Answer 1

You could try this simple approach, using a ZStack to display a side "view/sheet menu" over the Map.

 import Foundation
 import SwiftUI
 import MapKit
 import CoreLocation
 
 
struct ContentView: View {
    var body: some View {
        MainView()
    }
}

struct MainView: View {
    @State private var cameraPosition: MapCameraPosition = .camera(
        MapCamera(centerCoordinate: CLLocationCoordinate2D(latitude: 35.685, longitude: 139.7514), distance: 8000.0, heading: 0, pitch: 0))
    
    @State var showMenu = false
    
    var body: some View {
        Button("Show Menu") {
            showMenu.toggle()
        }.buttonStyle(.bordered)
        
        ZStack(alignment: .topLeading) {
            Map(position: $cameraPosition)
            if showMenu {
                SheetLikeView()
            }
        }
    }
    
}

struct SheetLikeView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.white.opacity(0.9)
            VStack(alignment: .leading) {
                HStack {
                    Text("Salt Lake City").bold()
                    Spacer()
                    Image(systemName: "square.and.arrow.up")
                    Image(systemName: "xmark")
                }.padding(.leading, 10)
                Text("more views").padding(20)
                // .... more views
            }
        }.frame(width: 222, height: 333)
         .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

How to use SwiftUI to create a sheet menu that adapts to a wide screen like the Apple Maps App

友情链接