SwiftUI 跨视图和视图模型保持数据最新

Question

我来自react-native 背景，我无法理解 SwiftUI 中 MVVM 的特定部分：拥有相同实体的多个视图。

我正在构建一个带有帖子的简单社交媒体应用。这些帖子可以在Homepage 和任何用户的Profile 页面上查看。

这就是视图模型的样子

struct HomepagePosts: ObservableObject {
  @Published var posts = [Post]()

  ... rest of logic
}

struct ProfilePosts: ObservableObject {
  @Published var posts = [Post]()

  ... rest of logic
}

我的问题如下。如果用户刚刚发布了帖子，则该帖子将显示在主页和他的个人资料中。如果用户决定更新帖子怎么办？帖子将如何在所有地方更新？

在 React 中，这是通过规范化状态来完成的。不是保留单独的 posts 数组，而是保留 2 个 postIds 数组和一个字典，其中 postId 作为键，整个 Post 对象作为值。这样一来，更新帖子就会在一个地方更新它，并且每个视图都会直接更新。

你如何在 SwiftUI 中做到这一点？

Answer 1

这里有一些代码来说明上面的注释。我相信你想用一个模型对象来构造它。

struct Post: Identifiable {
  let id: String
  let text: String
}

class Model: ObservableObject {
  @Published var posts: [Post] = []
}

@main
struct TestApp: App {
  // @StateObject var model = Model()
  var body: some Scene {
    WindowGroup {
      Homepage()
       // .environmentObject(model)
    }
  }
}

struct Homepage: View {
  // @EnvironmentObject var model: Model
  @StateObject var model = Model() // holds array of homepage posts
  @State private var newPost: String = ""
  @State private var showProfile = false
  var body: some View {
    VStack {
      TextField("new post", text: $newPost) { _ in
      } onCommit: {
        model.posts.append(Post(id: UUID().uuidString, text: newPost))
        newPost = ""
      }
      Divider()
      ScrollView {
        ForEach(model.posts) { post in
          Text(post.text).padding()
        }
      }
      Divider()
      Button("Profile") {
        showProfile = true
      }
      .sheet(isPresented: $showProfile) {
        Profile()
      }
    }
    .padding()
  }
}

struct Profile: View {
  // @EnvironmentObject var model: Model
  @StateObject var model = Model() // holds array of profile posts
  var body: some View {
    Text("You have \(model.posts.count) posts")
  }
}

Answer 2

struct 无法确认ObservableObject 协议。只有class 可以这样做。因此，HomepagePosts 和 ProfilePosts 必须是 class 类型。

---

您不必为帖子创建两个不同的类。为视图之间共享的数据使用单个 ObservableObject。

struct Post: Identifiable {
    let id: UUID = UUID()
    let content: String
}

class PostModel: ObservableObject {
    @Published var posts: [Post] = []
}

将PostModel 的单个实例传递给HomepagePosts 和ProfilePosts。

struct ContentView: View {
    @ObservedObject var postModel: PostModel = PostModel()
    
    var body: some View {
        TabView {
            ProfilePostsView(postModel: postModel)
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
            
            HomepageView(postModel: postModel)
                .tabItem {
                    Label("Home", systemImage: "house")
                }
        }
    }
}

---

所有代码都准备好测试了。

struct Post: Identifiable {
    let id: UUID = UUID()
    let content: String
}

class PostModel: ObservableObject {
    @Published var posts: [Post] = []
}


struct ContentView: View {
    @ObservedObject var postModel: PostModel = PostModel()
    
    var body: some View {
        TabView {
            ProfilePostsView(postModel: postModel)
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
            
            HomepageView(postModel: postModel)
                .tabItem {
                    Label("Home", systemImage: "house")
                }
        }
    }
}



struct ProfilePostsView: View {
    @ObservedObject var postModel: PostModel

    var body: some View {
        NavigationView {
            VStack {
                List(postModel.posts) { post in
                    Text(post.content)
                }
            }
        }
    }
}


struct HomepageView: View {
    @ObservedObject var postModel: PostModel
    
    var body: some View {
        NavigationView {
            VStack {
                Button(action: {
                    self.postModel.posts.append(Post(content: "Hello \(Date())"))
                }, label: {
                    Text("Add new Posts")
                })
                List(postModel.posts) { post in
                    Text( post.content)
                }
            }
        }
    }
}

在上面的代码中，如果您在HomepageView 中添加新帖子，相同的帖子会自动添加到第二个选项卡（ProfilePostsView）中。如果您这样做，它们将被更新。

---

postModel 也可以是HomepagePosts 和ProfilePosts 的属性。

更多信息：

---

https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app

注意：这种方法类似于 Cenk Bilgen