swift - 在 SwiftUI 中创建一个包含自定义类数组的列表
问题描述
我尝试在 SwiftUI 中创建自定义类列表,但在 UI 更新方面一直存在问题。我使我的类符合BindableObject
并在属性更改时正确调用didChange.send()
函数,但是当我更改自定义类的属性时,更改似乎没有传递到数组,因为视图没有更新大批。
这是我的意思的一个基本示例:
class Media: BindableObject, Identifiable {
typealias PublisherType = PassthroughSubject<Void, Never>
var didChange = PublisherType()
var id: Int {
didSet {
didChange.send()
}
}
var name: String {
didSet {
print("Name changed from \(oldValue) to \(self.name)")
didChange.send()
}
}
init(id: Int, name: String) {
self.id = id
self.name = name
}
}
struct ContentView : View {
@State private var media = [
Media(id: 0, name: "Name 0"),
Media(id: 1, name: "Name 1"),
Media(id: 2, name: "Name 2"),
Media(id: 3, name: "Name 3"),
]
var body: some View {
VStack {
List(media) { media in
Text(media.name)
}
HStack {
Button(action: {
self.media.first!.name = "Name \(Int.random(in: 100...199))"
}) {
Text("Change")
}
Button(action: {
self.media.append(Media(id: 4, name: "Name 4"))
}) {
Text("Add")
}
}
}
}
}
当按下“更改”按钮时,它只是更改数组中第一个媒体对象的名称,这不会导致重新渲染视图。当我按下“添加”按钮时,他将一个对象添加到数组中,因此重新渲染 UI 并显示第一个对象的更改名称(通过按下“更改”)。
现在我的问题是,如果有办法将 Publisher 的发布者链接到 PublisherMedia
的发布者Array<Media>
,那么当Media
Publisher 触发时,Array<Media>
Publisher 也会触发,从而导致视图重新呈现。
当我Text(media.name)
在单独的视图中移动时(将媒体作为@State
属性保存,它按预期工作,因为子视图本身请求重新渲染。
但是假设我不想使用自定义视图而只是一个简单的Text
视图,有什么办法可以做到这一点?
解决方案
你正在混合两种不同的东西。@State 旨在用于视图内部的任何内容。虽然@BindableObject 是为了保存视图外部的东西(即您的数据模型)。当你定义一个@BindableObject 时,你不是用@State 引用它,而是用@ObjectBinding。
我不知道是怎么回事,但是如果你打算使用@State,那么实现应该是这样的:
struct Media {
var id: Int
var name: String
init(id: Int, name: String) {
self.id = id
self.name = name
}
}
struct ContentView : View {
@State var media = [
Media(id: 0, name: "Name 0"),
Media(id: 1, name: "Name 1"),
Media(id: 2, name: "Name 2"),
Media(id: 3, name: "Name 3"),
]
var body: some View {
VStack {
List(media.identified(by: \.id)) { media in
Text(media.name)
}
HStack {
Button(action: {
self.media[0].name = "Name \(Int.random(in: 100...199))"
}) {
Text("Change")
}
Button(action: {
self.media.append(Media(id: 4, name: "Name 4"))
}) {
Text("Add")
}
}
}
}
}
您主要将@State 用于视图的某些内部状态,但也用于原型设计。您对 Media 对象的意图是什么?
更新
使用@ObjectBinding 实现它:
假设您在 SceneDelegate 中实例化您的 CustomView,您需要将库传递给它:
if let windowScene = scene as? UIWindowScene {
let window = UIWindow(windowScene: windowScene)
let library = MediaLibrary(store: [Media(id: 0, name: "Name 0"),
Media(id: 1, name: "Name 1"),
Media(id: 2, name: "Name 2"),
Media(id: 3, name: "Name 3")])
window.rootViewController = UIHostingController(rootView: ContentView(library: library))
self.window = window
window.makeKeyAndVisible()
}
和实施:
struct Media {
let id: Int
var name: String
init(id: Int, name: String) {
self.id = id
self.name = name
}
}
class MediaLibrary: BindableObject {
typealias PublisherType = PassthroughSubject<Void, Never>
var didChange = PublisherType()
var store: [Media] {
didSet {
didChange.send()
}
}
init(store: [Media]) {
self.store = store
}
}
struct ContentView : View {
@ObjectBinding var library: MediaLibrary
var body: some View {
VStack {
List(self.library.store.identified(by: \.id)) { media in
Text(media.name)
}
HStack {
Button(action: {
self.library.store[0].name = "Name \(Int.random(in: 100...199))"
}) {
Text("Change")
}
Button(action: {
self.library.store.append(Media(id: 4, name: "Name 4"))
}) {
Text("Add")
}
}
}
}
}
推荐阅读
- flutter - 从 ListView 中的实例调用 setState
- python - 如何从数据框中删除行头
- python - 401 客户端错误:未经授权的 url:https://storage.scrapinghub.com/collections
- linux - cmake install() 行为?如果给出此指令,为什么二进制会在 PWD 中查找
- c++ - 这个数组是如何改变它的值的?
- node.js - 无法解析依赖,参考根项目-next@"^9.5.6-canary.13, next-routes@"^1.4.2"
- swift - Swift - 类的链式继承以初始化对象
- javascript - 视口比例更改时导航工具栏不缩放
- r - 在 Windows 上安装用于数据科学堆栈的 R 的当前选项
- reactjs - 在 github 页面中部署后,在 reactjs 中获取不起作用