Handle a dynamic list in SwiftUI - swiftui

Question

I have a NavigationView in SwiftUI where the left pane and right pane show a list of names. The left pane is selectable and each selection has its own list in the right hand pane. Both the left pane and right pane are getting their data from the same type being the class DataProvider. This is done for simplicity and not because that is a requirement.
There is a button in the UI that adds data to both the left pane and to the right hand pane for the first element of the left pane.
I am running this on a Mac and not on an iPhone or iPad.
The code looks like this:
//
// 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: []))
}
}
}
When this application is started the left pane elements can be selected and the right pane values are shown. So far so good.
Then select the top element in the left pane and push the button to add extra data.
This extra data shows immediately in the left pane but does not show in the right pane. It will only show if you click away in the left pane and then re-select the top entry.
So, what can I do to make the data show immediately in the right hand pane?

Answer 1

A #Binding doesn't know or care if your value is observable, it only cares if the value is changed. Since you're modifying a property of a reference type (DataProvider), you're not altering the value stored in the binding, so nothing is triggering a redraw.
It makes more sense to have an observed object in the right pane:
struct RightPane: View {
#ObservedObject var dataProvider: DataProvider
var body: some View {
List(dataProvider.data, id: \.self) { dataProvider in
Text(dataProvider.name)
}
}
}
And move the conditional back to the left pane:
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")
}
}
This only solves your current problem, though. The same thing is going to apply to the left pane if you mutate a property of an individual data provider in the array - there is no mutation of the array itself, so your state variable will not trigger a redraw. You should have a root data provider object stored as a #StateObject, and drive your left pane from the data property of that object.
You'll then want to use a specific view which takes and observes each individual provider, rather than a Text with a directly assigned string, so that changes are noticed. The alternative is that each data provider observes its children and sends object will change, but if you have a complex tree of these objects that is going to lead to a lot of unnecessary redraws.