实现MapAnnotation坐标更新滑动动画及地址更新视图不刷新问题排查

需求 #

当接收到坐标数据时，使地图上的MapAnnotation平滑滑动至新位置，且每次坐标变更都触发该动画。

现有代码 #

SwiftUI视图代码 #

struct ContentView: View {
@StateObject var request = Requests()
@State private var mapRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 56.946285, longitude: 24.105078), span: MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02))

var body: some View {
    Map(coordinateRegion: $mapRegion, annotationItems: request.users){ user in
        withAnimation(.linear){
            MapAnnotation(coordinate: CLLocationCoordinate2D(latitude: user.latitude, longitude: user.longitude)) {
                AnnotationView(requests: request, user: user)
            }
        }
    }
}

struct AnnotationView: View{
    @ObservedObject var requests: Requests
    @State private var showDetails = false
    let user: User
    
    var body: some View{
        ZStack{
            if showDetails{
                withAnimation(.easeInOut) {
                    RoundedRectangle(cornerRadius: 10)
                        .foregroundColor(.white)
                        .frame(width: 180, height: 50)
                        .overlay{
                            VStack{
                                Text(user.name)
                                    .foregroundColor(.black)
                                    .font(.title3)
                                Text(user.address)
                                    .foregroundColor(.gray)
                            }
                        }
                        .offset(y: -50)
                }
            }
            
            Circle()
                .frame(width: 35, height: 35)
                .foregroundColor(.white)
            
            AsyncImage(url: URL(string: user.image)) { image in
                image
                    .resizable()
                    .frame(width: 30, height: 30)
                    .clipShape(Circle())
                    .scaledToFit()
            } placeholder: {
                Image(systemName: "person.circle")
            }
            .onTapGesture {
                self.showDetails.toggle()
            }
        }
    }
}

ViewModel代码 #

class Requests: ObservableObject {
    @Published var users: [User] = [] // 修正原代码语法错误：原写法为@Published var users = User，应为数组类型

    func collectUsers(_ response: String){
        if users.count != 0{
            var data = response.components(separatedBy: "\n")
            data.removeLast()
            
            for newData in data{
                var components = newData.components(separatedBy: ",")
                var userID = components[0].components(separatedBy: " ")
                userID.removeFirst()
                components[0] = userID[0]
                
                if let index = self.users.firstIndex(where: { $0.id == Int(components[0]) }){
                    self.getAddress(latitude: Double(components[1])!, longitude: Double(components[2])!) { address in
                        DispatchQueue.main.async {
                            self.users[index].address = address
                            self.users[index].latitude = Double(components[1])!
                            self.users[index].longitude = Double(components[2])!
                        }
                    }
                }
            }
        }else{
            var userData = response.components(separatedBy: ";")
            userData.removeLast()
            
            let users = userData.compactMap { userString -> User? in
                let userProperties = userString.components(separatedBy: ",")
                
                var idPart = userProperties[0].components(separatedBy: " ")
                if idPart.count == 2{
                    idPart.removeFirst()
                }
                
                guard userProperties.count == 5 else { return nil }
                guard let id = Int(idPart[0]),
                      let latitude = Double(userProperties[3]),
                      let longitude = Double(userProperties[4]) else { return nil }
                
                var collectedUser = User(id: id, name: userProperties[1], image: userProperties[2], latitude: latitude, longitude: longitude, address: "")
               
                return collectedUser
            }
            DispatchQueue.main.async {
                self.users = users
            }
        }
    }

    func getAddress(latitude: Double, longitude: Double, completion: @escaping (String) -> Void){
        let location = CLLocation(latitude: latitude, longitude: longitude)
        let geocoder = CLGeocoder()
        
        geocoder.reverseGeocodeLocation(location) { (placemarks, error) in
            if error == nil {
                let placemark = placemarks?[0]
                if let thoroughfare = placemark?.thoroughfare, let subThoroughfare = placemark?.subThoroughfare {
                    let collectedAddress = thoroughfare + subThoroughfare
                    completion(collectedAddress)
                }
            } else {
                print("Could not get address \(error!.localizedDescription)")
            }
        }
    }
}

疑问 #

调用getAddress方法后，为何视图不会随每次坐标接收而更新？

问题分析 #

1. User类型的可观测性缺失：

   • 如果User是结构体（值类型），直接修改数组中User的属性（如latitude/longitude）不会触发@Published var users的更新——SwiftUI的@Published仅在整个数组被替换时发送变更通知，无法检测数组内部元素的属性变化。
   • 原代码中User未遵循Identifiable协议，Map的annotationItems无法正确识别每个标注的唯一性，易导致视图更新异常。

2. 动画触发位置错误：
   当前将withAnimation包裹在MapAnnotation外部，这种写法无法让坐标变化时触发平滑滑动动画，动画需要绑定到坐标变化的状态上。

3. 数据更新方式无效：
   在getAddress的回调中直接修改users[index].latitude等属性，对于值类型的User来说，这种操作不会让SwiftUI感知到users数组的变化，自然不会刷新视图。

解决方案 #

方案1：将User改为遵循Identifiable的结构体，更新时替换整个实例 #

1. 修正User结构体，添加Identifiable协议：

struct User: Identifiable {
    let id: Int
    var name: String
    var image: String
    var latitude: Double
    var longitude: Double
    var address: String
}

2. 修改ViewModel中更新用户数据的逻辑，创建新的User实例替换数组中的旧实例，触发@Published更新：

if let index = self.users.firstIndex(where: { $0.id == Int(components[0]) }){
    guard let lat = Double(components[1]), let lon = Double(components[2]) else { return }
    self.getAddress(latitude: lat, longitude: lon) { address in
        DispatchQueue.main.async {
            // 创建新实例替换旧实例，触发数组变更通知
            var updatedUser = self.users[index]
            updatedUser.address = address
            updatedUser.latitude = lat
            updatedUser.longitude = lon
            self.users[index] = updatedUser
        }
    }
}

3. 调整视图中的动画触发方式，给Map添加动画修饰符：

struct ContentView: View {
    @StateObject var request = Requests()
    @State private var mapRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 56.946285, longitude: 24.105078), span: MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02))

    var body: some View {
        Map(coordinateRegion: $mapRegion, annotationItems: request.users){ user in
            MapAnnotation(coordinate: CLLocationCoordinate2D(latitude: user.latitude, longitude: user.longitude)) {
                AnnotationView(requests: request, user: user)
            }
        }
        // 绑定动画到users数组的变化，坐标更新时自动触发平滑动画
        .animation(.linear, value: request.users)
    }
}

方案2：将User改为ObservableObject类（引用类型） #

1. 修改User为继承ObservableObject的类，并将需要更新的属性标记为@Published：

class User: ObservableObject, Identifiable {
    let id: Int
    @Published var name: String
    @Published var image: String
    @Published var latitude: Double
    @Published var longitude: Double
    @Published var address: String

    init(id: Int, name: String, image: String, latitude: Double, longitude: Double, address: String) {
        self.id = id
        self.name = name
        self.image = image
        self.latitude = latitude
        self.longitude = longitude
        self.address = address
    }
}

2. 此时ViewModel中直接修改User的属性即可触发视图更新，无需替换整个实例：

if let index = self.users.firstIndex(where: { $0.id == Int(components[0]) }){
    guard let lat = Double(components[1]), let lon = Double(components[2]) else { return }
    self.getAddress(latitude: lat, longitude: lon) { address in
        DispatchQueue.main.async {
            self.users[index].address = address
            self.users[index].latitude = lat
            self.users[index].longitude = lon
        }
    }
}

3. 用withAnimation包裹属性更新，确保动画触发：

DispatchQueue.main.async {
    withAnimation(.linear) {
        self.users[index].address = address
        self.users[index].latitude = lat
        self.users[index].longitude = lon
    }
}

额外注意事项 #

• 处理Double转换时避免强制解包（!），建议用可选绑定处理，防止崩溃。

内容的提问来源于stack exchange，提问作者Ivars