Search code examples
swiftuikitswiftui

How to customize navigation bar in swiftui


How to implement this navigation bar in swiftui .it is looks like default .largeTitle but have different height and right button Navigation as needed


Solution

  • This is the best solution I could come up with. You basically set the title generated by the navigation bar to an empty string, and construct your own title view in the leading view of the navigation bar.

    import SwiftUI
    
    struct NavigationBarView: View {
        var body: some View {
            NavigationView {
                Text("NavigationBarView")
                    .navigationBarTitle("") //Set title to none so that it won't put the bottom title
                    .navigationBarItems(leading:
                        //This is your made up title, put in the leading view so it is up top aligned with the plus button
                        Text("Navigation Bar").font(.largeTitle).bold()
                        //This is the plus button, on the right side, aka trailing view
                        , trailing: Button(action: {
    
                        }, label: {
                                Image(systemName: "plus.circle")
                        })
                )
    
            }
        }
    }
    

    enter image description here