SwiftUI Editable NavigationTitle

user_7399286 0
Viewed 731

Is it possible to make the navigation title of SwiftUI editable? Unfortunately the navigationTitle modifier only accepts Text views and not TextField views. I want to do this instead of just using a text field below the navigation bar because I still want the nice default behaviour of having the modified title appear in the navigation bar inline when the user scrolls down and the navigation bar allocates space for the navigation title whether you define one or not.

navigationview navigationbar swiftui textfield swift
2 Answers

You can place a custom view in your NavigationView at the position where the title might be expected to go by specifying a ToolbarItem with a placement value of .principal, for example in the code below. I've added the RoundedBorderTextFieldStyle to make the text field more visible:

struct EditableTitleView: View {
  @State private var editableTitle: String = "My Title"
    var body: some View {
      NavigationView {
        Text("View with editable title")
          .toolbar {
            ToolbarItem(placement: .principal) {
              TextField("Title", text: $editableTitle)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            }
          }
      }
    }
}

Screen grab of sample TextField in title bar

Note that if you also add a navigationTitle modifier into your view, its default large style on iOS will still display beneath the toolbar, but if it scrolls off the page it while disappear while your principal item will remain on screen. If you set .navigationBarTitleDisplayMode(.inline) then the larger style title will never display.

I mention this because you should consider keeping a title for your view anyway, for a couple of reasons:

  1. If a NavigationLink pushes a view on the stack, you want a meaningful name to appear in the back button and the list of stacked views that appear on long press.
  2. I haven't checked what happens with VoiceOver when you have a navigation subview without a title. The more you override native behaviour, the more you need to consider whether you are making your app less accessible than the SwiftUI defaults provide.
user_13265180

Try a TextField inside of a ToolbarItem in the principal slot of the toolbar. Create a computed property for the destination and give it an editable navigation title, too.

TextField Navigation Title

struct TextFieldNavigationTitleView: View {
    @State var mainTitle = "Main Menu"
    @State var areaOneTitle = "Area One"

    var body: some View {
        NavigationView {
            NavigationLink("App Area One", destination: areaOne)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    TextField("Navigation Title", text: $mainTitle)
                }
            }
        }
    }
    
    var areaOne : some View {
        Text("AREA ONE")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    TextField("Area One Title", text: $areaOneTitle)
                }
            }
    }
}
user_152045500
Related