SwiftUI: Form pushes all navigation links on navigation stack

Question

The idea is to use a Settings View in my App using a Form. However, it seems the Form itself pushes all NavigationLinks from the List view onto the navigation stack (at once). The typical (correct?) expected behaviour when not wrapped in a Form, is that the id of the NavigationLink is only pushed onto the stack when used. See also code.

Code where the behaviour is as expected - only values for NavigationLinks that are used are pushed onto the stack :

struct NumberView: View {
 @Binding var navigationPath: [Int]
 var number: Int
 var max: Int
 var body: some View {
 let next: Int = number < max ? number + 1 : 1
 return Form {
 Section {
 Text("This is sheet with number: \(number)")
 NavigationLink("Progress to number: \(next)", value: next)
 Button("Go back") {
 print("navigationPath: \(navigationPath)")
 navigationPath.removeLast()
 }
 Button("Go back to root") { // unwind to root
 print("navigationPath: \(navigationPath)")
 navigationPath.removeAll()
 }
 }
 .navigationTitle("Pick")
 }
 }
}
struct SettingsView: View {
 
 @State var navigationPath: [Int] = []
 private let numberArray: [Int] = [1, 2, 3, 4]
 
 var body: some View {
 NavigationStack (path: $navigationPath) {
 List(numberArray, id: \.self) { number in
 NavigationLink("Pick a number: \(number)", value: number)
 }
 .navigationDestination(for: Int.self) { number in
 NumberView(navigationPath: $navigationPath, number: number, max: numberArray.max()!)
 }
 .navigationTitle("Pick your number")
 }
 }
}

Now the same code, however, with the List in Settings View wrapped into a Form. In this scenario all NavigationLinks are pushed onto the stack regardless of the actual navigation itself.

struct SettingsView: View {
 
 @State var navigationPath: [Int] = []
 private let numberArray: [Int] = [1, 2, 3, 4]
 
 var body: some View {
 NavigationStack (path: $navigationPath) {
 Form {
 List(numberArray, id: \.self) { number in
 NavigationLink("Pick a number: \(number)", value: number)
 }
 .navigationDestination(for: Int.self) { number in
 NumberView(navigationPath: $navigationPath, number: number, max: numberArray.max()!)
 }
 }
 .navigationTitle("Pick your number")
 }
 }
}

• user453575457: Did you find any solution? Struggling on this now

Answer 1

Simply move the navigationDestination() modifier from the List view to the Form view.

struct SettingsView: View {
 @State var navigationPath: [Int] = []
 private let numberArray: [Int] = [1, 2, 3, 4]
 var body: some View {
 NavigationStack (path: $navigationPath) {
 Form {
 List(numberArray, id: \.self) { number in
 NavigationLink("Pick a number: \(number)", value: number)
 }
 }
 .navigationDestination(for: Int.self) { number in
 NumberView(navigationPath: $navigationPath, number: number, max: numberArray.max()!)
 }
 .navigationTitle("Pick your number")
 }
 }
}