SwiftUI 中的地图和滚动视图答案

【问题标题】：Map and Scrollview in SwiftUISwiftUI 中的地图和滚动视图
【发布时间】：2021-11-03 00:58:35
【问题描述】：

我正在尝试将地图显示为 ScrollView 的一部分，但 ScrollView 似乎只是导致地图消失。无论 Map 是 ScrollView 的子还是其他，都会发生这种情况。

有什么建议吗？（请原谅我很糟糕的代码，我正在学习。）

struct DetailView: View {
    @ObservedObject var person: Person
    @State private var data = Data()
    @State private var showingEditView = false
    @State private var savedLocation: [SavedLocation] = []
    @State private var coordinateRegion = MKCoordinateRegion()
    @State private var annotation = MapMarker(coordinate: CLLocationCoordinate2D(), tint: Color.orange)
    var body: some View {
        GeometryReader { proxy in
            ScrollView(.vertical) {
                VStack {
                    Image(uiImage: UIImage(data: self.data) ?? UIImage())
                        .resizable()
                        .scaledToFit()
                        .frame(maxWidth: proxy.size.width * 0.7)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.white, lineWidth: 1))
                        .shadow(radius: 5)
                    
                    Text(person.name ?? "")
                    Text(person.email ?? "")
                    Text(person.phoneNumber ?? "")
                    Text(person.notes ?? "")
                }
                
                Map(coordinateRegion: $coordinateRegion, interactionModes: MapInteractionModes.init(), showsUserLocation: false, userTrackingMode: nil, annotationItems: savedLocation) { annotation in
                    MapMarker(coordinate: annotation.location, tint: Color.orange)
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Edit") {
                        self.showingEditView = true
                    }
                }
            }
            .onAppear {
                ProfilePictureLoader.getProfilePicture(using: person.id!) { result in
                    switch result {
                    case .success(let data):
                        self.data = data
                    case .failure(let error):
                        print("\(error.localizedDescription)")
                    }
                }
                self.coordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: person.coordinate!.latitude, longitude: person.coordinate!.longitude), latitudinalMeters: 200, longitudinalMeters: 200)
                let savedLocation = SavedLocation(id: person.id!, lat: person.coordinate!.latitude, long: person.coordinate!.longitude)
                self.savedLocation.append(savedLocation)
            }
        }
    }
}

【问题讨论】：

如果你给Map一个明确的框架会发生什么？喜欢.frame(width: 300, height: 300)？现在，它在ScrollView 和 GeometryReader 内，它们都将填满所有可用空间，至少在ScrollView 的情况下，不会约束孩子View的大小。
@jnpdx 成功了，干杯！也感谢您的解释。
当然——我已将其添加为答案，以便可以接受。很高兴它成功了！

标签： swift swiftui mapkit

【解决方案1】：

ScrollView 占用所有可用空间并且不会限制子视图的大小。因为Map 的作用类似，没有父级的大小限制，在ScrollView 内，它可以折叠成空（例如0,0 的框架）。

要解决此问题，您可以向地图添加显式 frame 修饰符以告知其大小：

Map(...) { ... }.frame(width: 300, height: 300)

【讨论】：