Why can’t I use @Binding to manage NavigationList selection state?

Question

Jaanus OP

Created Jul ’20

Replies 5

Boosts 0

Views 3.2k

Participants 2

Consider this view:

Code Block swiftimport SwiftUI
struct ContentView: View {
		@State var selection: ListObject?
		var objects: [ListObject]
		var body: some View {
				NavigationView {
						List {
								ForEach(objects) { object in
										NavigationLink(
												destination:
														ListObjectView(object: object), tag: object, selection: $selection,
												label: {
														Text(object.text)
												})
								}
						}.listStyle(SidebarListStyle())
						.toolbar {
								ToolbarItem {
										Button("Push item") {
												selection = objects.first
										}
								}
						}
						Text("Empty view, pick something.").padding()
				}.onAppear {
						DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
								selection = objects.first
						}
				}
		}
}

This is a simple list, where I can programmatically control the selection, and push another view into the navigation stack. I demonstrate two ways of doing this here, both with a timer and then with a button. Everything works as expected.

Now, when I change the @State variable to @Binding, and pass it in from outside, this suddenly stops working. No matter what I do, I can no longer programmatically change the selection. What’s more, the list UI itself stops working: when I tap on a list item, nothing happens, and no detail view appears.

Why do @State and @Binding behave differently here? Why does navigation link selection work with one, but not the other?

Answered by Jaanus in 678858022

The behavior of this has improved in recent versions. Now everything works as expected.

Boost

Answer 1

OOPer OP

Jul ’20

Why do @State and @Binding behave differently here? Why does navigation link selection work with one, but not the other?

That depends on the outside, and how the @State var is declared. Please show enough code.

0

Answer 2

Jaanus OP

Jul ’20

Here is the non-working version with binding.

Main app:

Code Block swift@main
struct ListSelectionApp: App {
		@StateObject var viewModel = ViewModel()
		var body: some Scene {
				WindowGroup {
						ContentView(selection: $viewModel.listSelection, objects: [ListObject(text: "first"), ListObject(text:"second"), ListObject(text: "third")])
				}
		}
}

ViewModel:

Code Block swiftimport Foundation
struct ListObject: Identifiable, Hashable {
		let id = UUID()
		let text: String
}
class ViewModel: ObservableObject {
		@Published var listSelection: ListObject?
		{
				didSet {
						print("did set list selection to \(String(describing: listSelection))")
				}
		}
}

ContentView:

Code Block swiftimport SwiftUI
struct ContentView: View {
		@Binding var selection: ListObject?
		var objects: [ListObject]
		var body: some View {
				NavigationView {
						List {
								ForEach(objects) { object in
										NavigationLink(
												destination:
														ListObjectView(object: object), tag: object, selection: $selection,
												label: {
														Text(object.text)
												})
								}
						}.listStyle(SidebarListStyle())
						.toolbar {
								ToolbarItem {
										Button("Push item") {
												selection = objects.first
										}
								}
						}
						Text("Empty view, pick something.").padding()
				}.onAppear {
						DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
								selection = objects.first
						}
				}
		}
}

When the timer fires or when tapping the button, didSet of the ViewModel property is called as expected, but the UI doesn’t update.

0

Answer 3

OOPer OP

Jul ’20

As far as I have tried till now, @Binding does not directly trigger UI updates.
You may need @State, @ObservableObject or @StateObject somewhere in the view hierarchy.

For example:

Code Block @main
struct ListSelectionApp: App {
		@StateObject var viewModel = ViewModel()
		var body: some Scene {
				WindowGroup {
						ContentView(viewModel: viewModel, objects: [ListObject(text: "first"), ListObject(text:"second"), ListObject(text: "third")])
				}
		}
}

Code Block struct ContentView: View {
		@ObservedObject var viewModel: ViewModel
		var objects: [ListObject]
		var body: some View {
				NavigationView {
						List {
								ForEach(objects) { object in
										NavigationLink(
												destination:
														ListObjectView(object: object), tag: object, selection: $viewModel.listSelection,
												label: {
														Text(object.text)
												})
								}
						}.listStyle(SidebarListStyle())
						.toolbar {
								ToolbarItem {
										Button("Push item") {
												viewModel.listSelection = objects.first
										}
								}
						}
						Text("Empty view, pick something.").padding()
				}.onAppear {
						DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
								viewModel.listSelection = objects.first
						}
				}
		}
}

0

Answer 4

Jaanus OP

Jul ’20

Interesting. I tried to run exactly this, with the viewModel being an ObservedObject that gets passed in. When tapping on the list items, the UI works but appears glitchy, there are some weird flashing artifacts. Updating the selection with timer or external button press does not work.

0

Answer 5

Jaanus OP

Jun ’21

Accepted Answer

The behavior of this has improved in recent versions. Now everything works as expected.

0