Change Navigation Back Button and Navigation Title for each nested navigation links inside one list?

Viewed 65

This is my code:

Vstack{

      List{

            HStack{

                NavigationLink() {
                    Text("Change your email")
                        .font(.headline)
                        .fontWeight(.bold)
                        .foregroundColor(Color("Color"))
                    
                    TextField("Email",text: $Email)
                        .padding()
                        .keyboardType(.default)
                        .background(Color.white)
                        .textFieldStyle(.roundedBorder)
                        .shadow(color: Color.gray.opacity(0.1), radius: 5, x: 0, y: 2)
                    Spacer()
                } label: {
                    Image(systemName: "rectangle.and.pencil.and.ellipsis")
                    Text("Check your email")
                        .foregroundColor(Color("Color"))
                    
                }
        

            }

// how can i add them ?

              HStack{
                NavigationLink {
                    Text("Change your password")
                        .font(.headline)
                        .fontWeight(.bold)
                        .foregroundColor(Color("Color"))
                    
                    TextField("password",text: $password)
                        .padding()
                        .keyboardType(.default)
                        .background(Color.white)
                        .textFieldStyle(.roundedBorder)
                        .shadow(color: Color.gray.opacity(0.1), radius: 5, x: 0, y: 2)
                    Spacer()
                } label: {
                    Image(systemName: "rectangle.and.pencil.and.ellipsis")
                    Text("Check your password")
                        .foregroundColor(Color("Color"))
                    
                }
        

            }
            }
       }

i want to change the back button and navigation title for each navigation link!

but it is not happening inside each navigation ,it will be only done on the list itself !

1 Answers

Welcome to Stack Overflow! Please take the tour and see: How do I ask a good question? and How to create a Minimal, Reproducible Example (MRE).

To answer your question, just put them inside of the NavigationLink.

var body: some View {
    NavigationLink() {
        Text("Change your email")
            .font(.headline)
            .fontWeight(.bold)
            .foregroundColor(Color("Color"))
        
        TextField("Email",text: $email)
            .padding()
            .keyboardType(.default)
            .background(Color.white)
            .textFieldStyle(.roundedBorder)
            .shadow(color: Color.gray.opacity(0.1), radius: 5, x: 0, y: 2)
        Spacer()
            .navigationTitle("Title 2") <-- This can go on any of these views
    } label: {
        Image(systemName: "rectangle.and.pencil.and.ellipsis")
        Text("Check your email")
            .foregroundColor(Color("Color"))
        
    }
    .navigationTitle("Title 1") <-- This is for the main view
}

A couple of things with the code. First, the view code inside of the NavigationLink() really should be abstracted to its own view struct. It makes your code more readable.

Also, convention in Swift is to use lower case to start the name of a variable, upper case is reserved for types. You will notice I lowercased your email variable name, but if you were talking about its type, you would use String.

Related