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

Question

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?

SwiftUI

3.0k

Posted by

Jaanus

Reply

Add a Comment

Answer 1

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

Posted by

Jaanus

Add a Comment

Answer 2

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.

Posted by

OOPer

Add a Comment

Answer 3

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.

Posted by

Jaanus

Add a Comment

Answer 4

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
						}
				}
		}
}

Posted by

OOPer

Add a Comment

Answer 5

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.

Posted by

Jaanus

Add a Comment

Answer 6

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

Posted by

Jaanus

Add a Comment

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

Accepted Reply

Replies