CODEWITHSUNDEEP
swiftswiftui
Charklewis
Charklewis

Reputation: 5621

How to customise navigation title in SwftUI

I have a very simple NavigationStack that I would like to customise the title, but I can't seem to find the right modifiers to achieve this.

NavigationStack {
    List {
        NavigationLink {
            Text("My Child View")
        } label: {
            Label("Child View")
        }
    }.navigationTitle("Parent View")
}

I would like to change how the font looks for the .navigationTitle and be able to add a button to the right. When I add a .font modifier to .navigationTitle it adds it to the list items, not the title. And .navigationTitle only appears to accept a string.

I am looking to achieve the below (my button will be a + rather than a chevron).

enter image description here

From what I can tell, I can't use navigationTitle to achieve this. However, if I don't use that, then the back button has the wrong title (it uses the text Back instead of Parent View).

Upvotes: 2

Views: 1646

Answers (1)

Ashley Mills
Ashley Mills

Reputation: 53082

You can achieve both using the .toolbar modifier:

    public var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    Text("My Child View")
                } label: {
                    Label("Child View", systemImage: "questionmark")
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Text("Parent View")
                        .font(.system(size: 22, weight: .bold))
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        
                    } label: {
                        Image(systemName: "plus")
                    }

                }
            }
        }
    }

enter image description here

Upvotes: 3

Related Questions