SwiftUI - How To Set Child Screen Title

Question

I have a SwiftUI Home screen:

import SwiftUI

struct HomeView: View {
    @State private var navigateToSettingsView : Bool = false
    
    var body: some View {
        NavigationView {
            if navigateToSettingsView {
                NavigationLink(destination: UserSettingsView(), isActive: $navigateToSettingsView) {
                    EmptyView()
                }
                .navigationTitle("Home") // This overrides the word Back with Home on the child back button
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        VStack {
                            Text("User Settings").font(.headline)
                        }
                    }
                }
            }
            else {
                NavigationLink(destination: Text("Hello, I am HomeView child screen")) {
                    homeScreen
                }
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        Button(action: {
                            navigateToSettingsView = true
                        }) {
                            Image(systemName: "gearshape")
                        }
                    }
                    ToolbarItemGroup(placement: .navigationBarLeading) {
                        Text("App Name")
                    }
                }
            }
        }
    }
}

extension HomeView {
    private var homeScreen: some View {
        VStack {
            Text("Hello, I am HomeView")
        }
        .frame(maxWidth: .infinity)
    }
}

The UserSettingsView is just basic right now:

import SwiftUI

struct UserSettingsView: View {
    var body: some View {
        VStack {
            Text("I am a UserSettingsView")
        }
    }
}

What I am struggling with is setting the title of the child screen when the user clicks on the Gear icon. The ToolbarItem seems to be ignored. How do you set the title of the child screen so that it has a title of User Settings?

Answer 1

I believe you can achieve what you want using a cleaner approach.

The example below replaces the Button with another NavigationLink. It maintains the Home text instead of Back, but it also shows a title in the user settings screen. The only catch is that the title is in the center of the top area, not in the leading position.

Note that the @State variable does not exist anymore.

struct Example: View {
    
    var body: some View {
        NavigationView {
                NavigationLink(destination: Text("Hello, I am HomeView child screen")) {
                    Text("I'm a home screen")
                }
                .navigationTitle("Home")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        NavigationLink(destination: UserSettingsView().navigationTitle("User settings")) {
                            Image(systemName: "gearshape")
                        }
                    }
                    ToolbarItemGroup(placement: .navigationBarLeading) {
                        Text("App Name")
                    }
            }
        }
    }
}