I have a form container with a Navigation Stack at the top level. In a section I have a Navigation link followed by Picker(s) . On its own the navigation link works correctly but when a HStack with Text and Picker is added the navlink breaks . When the link is selected the picker list is presented. It seems others have had this issue which is usually solved by adding the NavigationStack , which is already at the top level. Any guidance is appreciated ( or work around - I added a section between the link and picker but that didn't help ) Joel
NavigationLink/Picker
Hi @drjoel could you please post a small, focused, code snippet that shows the issue? Ideally this will be a few lines of code that I can put into my own project in order to try to reproduce this and see what the issue is here. Thank you!
Sydney
Hi Sydney, There is an initial NavigationStack in the leading view ;
VStack(alignment: .leading) { HStack { NavigationLink(destination: MultiSelectPartialView(selectedProcedures: $selectedPartial)) { Text("Partial") } .frame(width: 75) Text("Selected are:") Text(selectedPartial.joined(separator: ",")) .foregroundColor(Color(.red)) .font(.subheadline) Spacer() }
HStack {
Text("Base Material (Non-Metal)")
.font(.subheadline)
Picker("",selection: $selectedBaseMaterial) {
ForEach(basematareials, id: \.self ) { base in
Text(base.description)
.tag(base.description)
}
}
.frame(width: 150)
.pickerStyle(.automatic)
.bold()
.foregroundColor(Color(.red))
Spacer()
Text("Metal Framework")
.font(.subheadline)
Picker("",selection: $selectedMetal) {
ForEach(metalFramework, id: \.self ) { metal in
Text(metal.description)
.tag(metal.description)
}
}
.frame(width: 150)
.pickerStyle(.automatic)
.bold()
.foregroundColor(Color(.red))
}
@drjoel thanks for posting that!
Two options here.
- Use 2 sections instead of one. If the first
HStack
is in oneSection
and the secondHStack
is in a secondSection
, the navigation links will work. - Use a
List
instead of aVStack
Best, Sydney
Thanks Sydney,
I did try to split the sections but didn't seem to work , but will try again.
Didn't think of list but will try that as well.
The NavigationLink is for a multiselect list so may rethink the interface for multiple selections
Joel
Tested both
- Substituted List for Stack, no errors but same issue
- Separated by sections ( code given ) , no errors but same issue
VStack(alignment: .leading) { Section(header: Text("List")){ // Test section 1 HStack { NavigationLink(destination: MultiSelectPartialView(selectedProcedures: $selectedPartial)) { Text("Partial") } .frame(width: 75) Text("Selected are:") Text(selectedPartial.joined(separator: ",")) .foregroundColor(Color(.red)) .font(.subheadline) Spacer() }
Section(header: Text("Pickers")) { // Test section 2
HStack {
Text("Base Material (Non-Metal)")
.font(.subheadline)
Picker("",selection: $selectedBaseMaterial) {
ForEach(basematareials, id: \.self ) { base in
Text(base.description)
.tag(base.description)
}
}
.frame(width: 150)
.pickerStyle(.automatic)
.bold()
.foregroundColor(Color(.red))
//Spacer()
Text("Metal Framework")
.font
Both recommendations I couldn't get to work. Switched to toggle controls which was accepted by SwiftUI. Just curious why the navlink is not contained and leaks into the picker control
VStack(alignment: .leading) {
/* HStack { // NOT Working
NavigationLink(destination: MultiSelectPartialView(selectedProcedures: $selectedPartial)) {
Text("Partial")
}
.frame(width: 75)
Text("Selected are:")
Text(selectedPartial.joined(separator: ","))
.foregroundColor(Color(.red))
.font(.subheadline)
Spacer()
}*/
HStack {
Text("Selected are:")
.font(.subheadline)
Toggle("Upper", isOn: $upper)
.font(.subheadline)
Toggle("Lower", isOn: $lower)
.font(.subheadline)
Toggle("Both", isOn: $both)
.font(.subheadline)
Toggle("Custom Tray", isOn: $customTray)
.font(.subheadline)
```Joel
With toggle controls if the text toggle description is clicked the initial picker list is displayed. No problem if the actual toggle is clicked.
Is there an issue in mixing controls in a form container ? A specific order ?