SwiftUI：UI在 @Published 变量更改时未更新

huangapple
go评论89阅读模式
英文:

SwiftUI: UI does not update on @Published var change

问题

这是你提供的代码的翻译部分：

模型：

  1. struct Post: Identifiable{
  2.     var id = UUID().uuidString
  3.     var postImage: String
  4.     var title: String
  5.     var description: String
  6.     var starRating: Int
  7.     var numberOfRatings : Int
  8.     var postRating : Double
  9.     var postDuration : Int
  10.     var postLanguage : String
  11.     var publishedBy : String
  12.     var publishedYear : Int
  13.     var isLiked : Bool
  14.     var author : String
  15. }
  17. class DataStore: ObservableObject {
  18.     @Published var posts = [
  19.         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"),
  20.     ]
  21.     
  22.     func togglePostLike(post: Post) {
  23.         if let index = posts.firstIndex(where: { $0.id == post.id }) {
  24.             posts[index].isLiked.toggle()
  25.         }
  26.     }
  27. }

视图：

  1. struct play: View {
  2.     @State var selectedPost : Post?
  3.     @EnvironmentObject private var dataStore : DataStore
  4.     
  5.     @State var switchView = false
  6.     
  7.     var body: some View {
  8.         if switchView == false {
  9.             // 在迭代中，我称每个元素为 "post"
  10.             Image(systemName: post.isLiked ? "heart.fill" : "heart")
  11.                 .font(.system(size: 30))
  12.                 .foregroundColor(.red)
  13.                 .offset(x: 100, y: 150)
  14.                 .onTapGesture {
  15.                     if post.isLiked == true {
  16.                         dataStore.togglePostLike(post: post)
  17.                         let removeFromFavorite = Album(title: post.title, author: post.author, postImage: post.postImage)
  18.                         if let index = dataStore.albums.firstIndex(of: removeFromFavorite) {
  19.                             dataStore.albums.remove(at: index)
  20.                         }
  21.                     } else {
  22.                         dataStore.togglePostLike(post: post)
  23.                         let addToFavorite = Album(title: post.title, author: post.author, postImage: post.postImage)
  24.                         dataStore.albums.append(addToFavorite)
  25.                     }
  26.                 }
  27.             
  28.             // 迭代所有的帖子，然后将 "selectedPost" 的值设置为点击的帖子
  29.             ForEach(dataStore.posts, id:\.id) {post in
  30.                 Image("\(post.postImage)")
  31.                     .onTapGesture {
  32.                         selectedPost = post
  33.                         switchView = true
  34.                     }
  35.             }
  36.             
  37.             switchView = true
  38.         } else {
  39.             NewView(selectedPost: selectedPost!)
  40.                 .environmentObject(dataStore)
  41.         }
  42.     }
  43. }
  45. struct NewView: View {
  46.     @EnvironmentObject private var dataStore : DataStore
  47.     
  48.     var selectedPost : Post
  49.     
  50.     var body: some View {
  51.         VStack {
  52.             Text(String(selectedPost.isLiked))
  53.             if selectedPost.isLiked {
  54.                 Circle()
  55.                     .foregroundColor(.red)
  56.                     .frame(width: 50, height: 50, alignment: .center)
  57.                     .foregroundColor(.black)
  58.                     .overlay(
  59.                         Image(systemName: "heart")
  60.                             .font(.system(size: 25))
  61.                             .foregroundColor(.white)
  62.                     )
  63.                 Text("Save")
  64.             } else {
  65.                 Circle()
  66.                     .strokeBorder(.black, lineWidth: 2.5)
  67.                     .frame(width: 50, height: 50, alignment: .center)
  68.                     .foregroundColor(.black)
  69.                     .overlay(
  70.                         Image(systemName: "heart")
  71.                             .font(.system(size: 25))
  72.                             .foregroundColor(.black)
  73.                     )
  74.                 Text("Save")
  75.             }
  76.         }
  77.         .onTapGesture {
  78.             dataStore.togglePostLike(post: selectedPost)
  79.             if selectedPost.isLiked == true {
  80.                 let removeFromFavorite = Album(title: selectedPost.title, author: selectedPost.author, postImage: selectedPost.postImage)
  81.                 if let index = dataStore.albums.firstIndex(of: removeFromFavorite) {
  82.                     dataStore.albums.remove(at: index)
  83.                 }
  84.             } else {
  85.                 let addToFavorite = Album(title: selectedPost.title, author: selectedPost.author, postImage: selectedPost.postImage)
  86.                 dataStore.albums.append(addToFavorite)
  87.             }
  88.         }
  89.     }
  90. }

请注意，代码中可能存在一些 HTML 编码（例如 "）或未定义的变量（例如 post 和 Album），你需要根据实际情况进行调整。

英文:

So I have this model, and for simplicity I have only included one element in the posts variable. In my view I am displaying all the elements in the array and when an element is clicked, the view changes to only display information about that one post.

In this new view I have a button that indicates wether the isLiked value in the model is liked or not. I toggle between the states by using the togglePostLike function in the class.

If isLiked == false the button should have no color, and be red if it its true. The problem is that the UI doesn’t update the color / isLiked value immediately.
I also have the same functionality somewhere else in my code, but there it updates just fine.

How can I solve this?

Model:

  1. struct Post: Identifiable{
  2. var id = UUID().uuidString
  3. var postImage: String
  4. var title: String
  5. var description: String
  6. var starRating: Int
  7. var numberOfRatings : Int
  8. var postRating : Double
  9. var postDuration : Int
  10. var postLanguage : String
  11. var publishedBy : String
  12. var publishedYear : Int
  13. var isLiked : Bool
  14. var author : String
  15. }
  16. class DataStore: ObservableObject {
  17. @Published var posts = [
  18. 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"),
  19. ]
  20. func togglePostLike(post: Post) {
  21. if let index = posts.firstIndex(where: { $0.id == post.id }) {
  22. posts[index].isLiked.toggle()
  23. }
  24. }
  25. }

View
UPDATED VIEW
UPDATED VIEW 2

I have added a code block to show how I use dataStore and display the posts.

  1.  This update is to show how the two view work together. 
  2. struct play: View {
  3. @State var selectedPost : Post?
  4. @EnvironmentObject private var dataStore : DataStore
  5. @State var switchView = false
  6. var body: some View {
  7. if switchView == false {
  8. // When iterating I call each element "post"
  9. Image(systemName: post.isLiked ? "heart.fill" : "heart")
  10. .font(.system(size: 30))
  11. .foregroundColor(.red)
  12. .offset(x: 100, y: 150)
  13. .onTapGesture {
  14. if post.isLiked == true {
  15. dataStore.togglePostLike(post: post)
  16. let removeFromFavorite = Album(title: post.title, author: post.author, postImage: post.postImage)
  17. if let index = dataStore.albums.firstIndex(of: removeFromFavorite) {
  18. dataStore.albums.remove(at: index)
  19. }
  20. } else {
  21. dataStore.togglePostLike(post: post)
  22. let addToFavorite = Album(title: post.title, author: post.author, postImage: post.postImage)
  23. dataStore.albums.append(addToFavorite)
  24. }
  25. }
  26. // Iterate all the posts and then give "selectedPost" the value of the clicked post
  27. ForEach(dataStore.posts, id:\.id) {post in
  28. Image("\(post.postImage)")
  29. .onTapGesture {
  30. selectedPost = post
  31. switchView = true
  32. }
  33. }
  34. switchView = true
  35. } else {
  36. NewView(selectedPost: selectedPost!)
  37. .environmentObject(dataStore)
  38. }
  39. }
  40. }
  41. struct NewView: View {
  42. @EnvironmentObject private var dataStore : DataStore
  43. var selectedPost : Post
  44. var body: some View {
  45. VStack {
  46. Text(String(selectedPost.isLiked))
  47. if selectedPost.isLiked {
  48. Circle()
  49. .foregroundColor(.red)
  50. .frame(width: 50, height: 50, alignment: .center)
  51. .foregroundColor(.black)
  52. .overlay(
  53. Image(systemName: "heart")
  54. .font(.system(size: 25))
  55. .foregroundColor(.white)
  56. )
  57. Text("Save")
  58. } else {
  59. Circle()
  60. .strokeBorder(.black, lineWidth: 2.5)
  61. .frame(width: 50, height: 50, alignment: .center)
  62. .foregroundColor(.black)
  63. .overlay(
  64. Image(systemName: "heart")
  65. .font(.system(size: 25))
  66. .foregroundColor(.black)
  67. )
  68. Text("Save")
  69. }
  70. }
  71. .onTapGesture {
  72. dataStore.togglePostLike(post: selectedPost)
  73. if selectedPost.isLiked == true {
  74. let removeFromFavorite = Album(title: selectedPost.title, author: selectedPost.author, postImage: selectedPost.postImage)
  75. if let index = dataStore.albums.firstIndex(of: removeFromFavorite) {
  76. dataStore.albums.remove(at: index)
  77. }
  78. } else {
  79. let addToFavorite = Album(title: selectedPost.title, author: selectedPost.author, postImage: selectedPost.postImage)
  80. dataStore.albums.append(addToFavorite)
  81. }
  82. }
  83. }
  84. }

答案1

得分: 0

I am answering my own question here, but I can’t really explain the "why's" so feel free to add a comment with further explanation to my post.

我在这里回答自己的问题，但我无法真正解释 "为什么"，所以请随时在我的帖子下添加进一步的解释评论。

I managed to fix the problem by changing var selectedPost : Post to a @Binding, as such: @Binding var selectedPost : Post.

我成功修复了问题，方法是将 var selectedPost : Post 更改为 @Binding var selectedPost : Post。

I then also changed the .onTapGesture in the NewView to this:

然后我还将NewView中的.onTapGesture 更改为以下内容：

英文:

I am answering my own question here, but I can’t really explain the "why´s" so feel free to add a comment with further explanation to my post.

I managed to fix the problem by changing var selectedPost : Post to a @Binding, as such: @Binding var selectedPost : Post.

I then also changed the .onTapGesture in the NewView to this:

  1. .onTapGesture {
  2. dataStore.togglePostLike(post: selectedPost)
  3. if selectedPost.isLiked == true {
  4. // This line is new
  5. selectedPost.isLiked = false
  6. let removeFromFavorite = Album(title: selectedPost.title, author: selectedPost.author, postImage: selectedPost.postImage)
  7. if let index = dataStore.albums.firstIndex(of: removeFromFavorite) {
  8. dataStore.albums.remove(at: index)
  9. }
  10. } else {
  11. // This line is new
  12. selectedPost.isLiked = true
  13. let addToFavorite = Album(title: selectedPost.title, author: selectedPost.author, postImage: selectedPost.postImage)
  14. dataStore.albums.append(addToFavorite)
  15. }
  16. }

答案2

得分: -1

  1.     class DataStore: ObservableObject {
  2.      var posts = [
  3.         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")
  4.     ]
  6.     func togglePostLike(post: Post) {
  7.         if let index = posts.firstIndex(where: { $0.id == post.id }) {
  8.             posts[index].isLiked.toggle()
  9.             objectWillChange.send() // refresh ui
  10.         }
  11.     }
  12.     }
  14. Next add onReceive SwiftUIView
  16.     .onReceive(dataStore.objectWillChange) { _ in 
  17.        // update State here 
  18.     }
英文: 
  1. class DataStore: ObservableObject {
  2. var posts = [
  3. 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")
  4. ]
  5. func togglePostLike(post: Post) {
  6. if let index = posts.firstIndex(where: { $0.id == post.id }) {
  7. posts[index].isLiked.toggle()
  8. objectWillChange.send() // refresh ui
  9. }
  10. }
  11. }

Next add onReceive SwiftUIView

  1. .onReceive(dataStore.objectWillChange) { _ in 
  2. // update State here 
  3. }

huangapple
  • 本文由 发表于 2023年5月25日 14:51:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76329588.html
  • model
  • publish
  • swiftui
  • user-interface
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定