SwiftUI 中的地图和滚动视图

Posted 2023-02-24

【中文标题】SwiftUI 中的地图和滚动视图

【英文标题】：Map and Scrollview in SwiftUI

【发布时间】：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 成功了，干杯！也感谢您的解释。

当然——我已将其添加为答案，以便可以接受。很高兴它成功了！

【参考方案1】：

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

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

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