处理Swiftui中的动态列表

Question

我在swiftui中有一个navigationView，其中左窗格和右窗格显示名称列表。左窗格是可选的，每个选择都在右手窗格中都有自己的列表。左窗格和右窗格都从同一类型中获取其数据是类dataprovider。这是为了简单性而进行的，不是因为这是一项要求。

UI中有一个按钮，可以在左窗格和右侧窗格上添加数据，以供左窗格的第一个元素添加数据。

我在Mac上运行此操作，而不是在iPhone或iPad上运行。

代码看起来像这样：

//
//  DemoApp.swift
//  Shared
//
//  Created by Fred Appelman on 08/06/2022.
//

import SwiftUI

@main
struct DemoApp: App {
    var body: some Scene {
        WindowGroup {
            LeftPane()
        }
    }
}

class DataProvider: ObservableObject, Identifiable, Hashable {
    static func == (lhs: DataProvider, rhs: DataProvider) -> Bool {
        lhs.id == rhs.id
    }
    func hash(into hasher: inout Hasher) { hasher.combine(id) }
    
    let id = UUID()
    @Published var name: String
    @Published var data: [DataProvider]
    
    init(name: String, data: [DataProvider]) {
        self.name = name
        self.data = data
    }
}

struct RightPane: View {
    @Binding var dataProvider: DataProvider?
    
    var body: some View {
        if let dataProvider = dataProvider {
            List(dataProvider.data, id: \.self) { dataProvider in
                Text(dataProvider.name)
            }
        } else {
            Text("Select in left pane")
        }
    }
}

struct LeftPane: View {
    @State var data: [DataProvider] = [
        DataProvider(name: "left-a", data: [
            DataProvider(name: "right-a1", data: []),
            DataProvider(name: "right-a2", data: [])
        ]),
        DataProvider(name: "left-b", data: [
            DataProvider(name: "right-b1", data: []),
            DataProvider(name: "right-b2", data: [])
        ]),
    ]
    @State private var dataProvider: DataProvider?
    
    var body: some View {
        NavigationView {
            List(data, id: \.self, selection: $dataProvider) { element in
                Text(element.name)
            }
            RightPane(dataProvider: $dataProvider)
        }
        Button("Add extra data")
        {
            // Add to left pane
            let extraDataLeftPane = DataProvider(name: "left-c", data: [
                DataProvider(name: "right-c1",data: []),
                DataProvider(name: "right-c2",data: [])
            ])
            data.append(extraDataLeftPane)

            // Add to right pane
            data[0].data.append(DataProvider(name: "right-a3", data: []))
        }
    }
}

启动此应用程序时，可以选择左窗格元素，并显示右窗格值。到目前为止，一切都很好。

然后选择左窗格中的顶部元素，然后按按钮添加额外的数据。

这些额外的数据立即显示在左窗格中，但没有在右窗格中显示。它仅在左窗格中单击，然后重新选择顶部条目时才显示。

那么，我该怎么做才能立即在右手窗格中显示数据？

Answer 1

@binding不知道或不知道您的价值是否可观察到，仅在更改值时就在乎。由于您正在修改参考类型的属性（dataprovider），因此您不会更改存储在绑定中的值，因此没有任何内容触发重新绘制。

在右窗格中有一个观察到的对象是更有意义的：

struct RightPane: View {
    @ObservedObject var dataProvider: DataProvider

    var body: some View {
        List(dataProvider.data, id: \.self) { dataProvider in
                Text(dataProvider.name)
        }
    }
}

将条件的物体移回左窗格：

NavigationView {
            List(data, id: \.self, selection: $dataProvider) { element in
                Text(element.name)
            }
            if let selection = dataProvider {
                RightPane(dataProvider: selection)
            } else {
                Text("Select in left pane")
            }
        }

不过，这只能解决您当前的问题。如果您在数组中突变单个数据提供商的属性，则同一件事也适用于左窗格 - 数组本身没有突变，因此您的状态变量不会触发重复。您应该将存储为@StateObject的根数据提供商对象，然后从该对象的数据属性中驱动左窗格。

然后，您将需要使用一个特定的视图，该视图将每个单独的提供商带有并观察到直接分配的字符串的文本，以便注意更改。另一种选择是，每个数据提供商都会观察其子女，并发送对象会发生变化，但是如果您有这些对象的复杂树，这些对象将导致许多不必要的重新绘制。