Search code examples
swiftuiswiftui-navigationlink

In swiftui how do i only make a navigation link active after a selection is made?


In swiftui how do i only make a navigation link active after a selection is made? I've included a screenshot. I'd like to be able to select either one option or multiple, but don't want the next button to be highlighted until at least one option is chosen.

(Screenshot)

import SwiftUI

struct AudienceView: View {
    
    @State var isOn_w = false
    @State var isOn_m = false
    @State var isOn_g = false
    @State var isOn_b = false
    
    
    var body: some View {
        
        VStack {
            Text("Audience")
                .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                .font(.title2)
                .frame(
                      minWidth: 0,
                      maxWidth: .infinity,
                      alignment: .center
                    )
            
            Spacer()
            
            ScrollView{
                    


                    Toggle(isOn: $isOn_w)
                                        {Text("Women")
                                                .WithDefaultButtonTextFormatting()
                                        }
                                                .WithDefaultToggleSelectedFormatting()
                                    
                                    
                    Toggle(isOn: $isOn_m)
                                    {Text("Men")
                                            .WithDefaultButtonTextFormatting()
                                    }
                                            .WithDefaultToggleSelectedFormatting()
                    
                    
                    Toggle(isOn: $isOn_g)
                                        {Text("Girls")
                                                .WithDefaultButtonTextFormatting()
                                        }
                                                .WithDefaultToggleSelectedFormatting()
                    
                                    
                    Toggle(isOn: $isOn_b)
                                    {Text("Boys")
                                            .WithDefaultButtonTextFormatting()
                                    }
                                            .WithDefaultToggleSelectedFormatting()
                }
            NavigationLink(destination: AgeCategoryView(), label: {Text("Next")})
                .padding(.bottom)
        }
        
    }
}

Solution

  • You can add an .opacity() modifier to you Navigation Link to show it only when condition is met. You can provide logic for selection like this:

    var selectionMade: Bool {
        if isOn_w == true || isOn_m == true || isOn_g == true || isOn_b == true {
            return true 
        } else {
            return false 
        }
    }
    

    And than attach it to you Navigation Link:

    NavigationLink(destination: AgeCategoryView(), label: {Text("Next")})
                    .padding(.bottom)
                    .opacity(selectionMade ? 1 : 0)