使用 SwiftUI 创建像 Apple 地图应用程序一样适应宽屏幕的工作表菜单

Question

如何使用 SwiftUI 创建像 Apple 地图应用一样适应宽屏的工作表菜单

Apple 地图应用横屏侧页菜单

我尝试直接使用Sheet，通过获取sheetPresentationController改变高度并允许与背景交互，但是在iPad或横置iPhone中，我找不到合适的方法将菜单对齐到一侧并允许其交互与背景。

我也尝试过使用其他第三方配置，但适配不多，而且外观也不太像sheet。我需要如何像Apple Map应用程序中那样制作这样的表格菜单？

我尝试在sheetPresentationController中设置sourceView，但没有成功。直接在iPad上使用Sheet会显示在屏幕中央，适配横屏iPhone时会出现问题

Answer 1

您可以尝试这种简单的方法，使用

ZStack

在

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