SwiftUI：@Published变量变更后UI不更新问题求助

问题根源 #

1. 值类型副本不同步：Post是结构体（值类型），NewView接收的selectedPost是原始Post的拷贝。当DataStore中原始Post的isLiked状态修改后，这个副本不会自动同步，导致UI展示旧状态。
2. @Published数组更新检测机制：直接修改数组中值类型元素的属性（如posts[index].isLiked.toggle()），SwiftUI的@Published无法检测到数组变化——因为数组本身的内存引用未改变，只有替换整个元素才能触发发布通知。

解决步骤 #

1. 修改DataStore的toggle方法：先拷贝目标Post，修改状态后替换回数组，触发@Published的更新通知。
2. 详情页通过ID获取最新Post：不再直接传递Post副本，而是传递Post的ID，通过DataStore实时获取最新实例，确保UI始终展示最新状态。

修改后的代码 #

1. 修正DataStore类 #

struct Post: Identifiable{
    var id = UUID().uuidString
    var postImage: String
    var title: String
    var description: String
    var starRating: Int
    var numberOfRatings : Int
    var postRating : Double
    var postDuration : Int
    var postLanguage : String
    var publishedBy : String
    var publishedYear : Int
    var isLiked : Bool
    var author : String
}

class DataStore: ObservableObject {
    @Published var posts = [
        Post(postImage: "post1", title: "Black Widow", description: "some description", starRating: 4, numberOfRatings: 251, postRating: 7.1, postDuration: 134, postLanguage: "English", publishedBy: "Alina", publishedYear: 2001, isLiked: false, author: "someAuthor1"),
    ]
    // 假设Album是已定义的收藏模型
    @Published var albums: [Album] = []
    
    func togglePostLike(post: Post) {
        guard let index = posts.firstIndex(where: { $0.id == post.id }) else { return }
        // 拷贝元素修改后替换回数组，触发@Published更新
        var updatedPost = posts[index]
        updatedPost.isLiked.toggle()
        posts[index] = updatedPost
    }
}

2. 修正列表视图（play） #

struct play: View {
    @State var selectedPostId: String? // 存储Post的ID而非副本
    @EnvironmentObject private var dataStore : DataStore
    @State var switchView = false
    
    var body: some View {
        if !switchView {
            ForEach(dataStore.posts, id:\.id) {post in
                ZStack {
                    Image(post.postImage)
                    
                    // 帖子上的点赞按钮
                    Image(systemName: post.isLiked ? "heart.fill" : "heart")
                        .font(.system(size: 30))
                        .foregroundColor(post.isLiked ? .red : .black)
                        .offset(x: 100, y: 150)
                        .onTapGesture {
                            dataStore.togglePostLike(post: post)
                            let favoriteItem = Album(title: post.title, author: post.author, postImage: post.postImage)
                            // 根据更新后的状态处理收藏
                            if post.isLiked {
                                dataStore.albums.append(favoriteItem)
                            } else {
                                if let index = dataStore.albums.firstIndex(of: favoriteItem) {
                                    dataStore.albums.remove(at: index)
                                }
                            }
                        }
                }
                .onTapGesture {
                    selectedPostId = post.id
                    switchView = true
                }
            }
        } else {
            NewView(postId: selectedPostId!)
                .environmentObject(dataStore)
        }
    }
}

3. 修正详情视图（NewView） #

struct NewView: View {
    @EnvironmentObject private var dataStore : DataStore
    let postId: String // 接收Post的ID
    
    // 通过ID实时获取最新的Post实例
    private var selectedPost: Post? {
        dataStore.posts.first(where: { $0.id == postId })
    }

    var body: some View {
        VStack {
            if let post = selectedPost {
                Text(post.isLiked ? "已点赞" : "未点赞")
                
                if post.isLiked {
                    Circle()
                        .foregroundColor(.red)
                        .frame(width: 50, height: 50)
                        .overlay(
                            Image(systemName: "heart")
                                .font(.system(size: 25))
                                .foregroundColor(.white)
                        )
                    Text("取消收藏")
                } else {
                    Circle()
                        .strokeBorder(.black, lineWidth: 2.5)
                        .frame(width: 50, height: 50)
                        .overlay(
                            Image(systemName: "heart")
                                .font(.system(size: 25))
                                .foregroundColor(.black)
                        )
                    Text("加入收藏")
                }
            }
        }
        .onTapGesture {
            guard let post = selectedPost else { return }
            dataStore.togglePostLike(post: post)
            let favoriteItem = Album(title: post.title, author: post.author, postImage: post.postImage)
            // 根据更新后的状态处理收藏
            if post.isLiked {
                dataStore.albums.append(favoriteItem)
            } else {
                if let index = dataStore.albums.firstIndex(of: favoriteItem) {
                    dataStore.albums.remove(at: index)
                }
            }
        }
    }
}

额外说明 #

• 原代码中列表视图的点赞按钮位置错误，已调整到ForEach内部的每个帖子视图中，确保能访问当前post变量。
• 收藏逻辑已修正为基于更新后的isLiked状态执行，避免逻辑颠倒。

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