Question 88725 in IOS Swift Question posted in
The official documentation can be found here.

SwiftUI: Displaying the navigation bar using NavigationStack – Ios swift

I want to display a navigation bar having an orange background color and a title with white color.

Everything works fine with this setup:

    let navigationBarAppearance = UINavigationBarAppearance()
    navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor(Color.white)]
    navigationBarAppearance.backgroundColor = .orange
    
    UINavigationBar.appearance().standardAppearance = navigationBarAppearance
    UINavigationBar.appearance().compactAppearance = navigationBarAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance

And the source code for my screen looks like this:

struct ScreenView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Row", destination: Text("Tapped on row"))
            }
        }
        .navigationTitle("List")
        .navigationBarTitleDisplayMode(.inline)
    }
}

The result:

enter image description here

If I replace the NavigationView with a NavigationStack, the navigation bar disappears.

Is there something that I miss?

Tags:

2

Answers


  1. 0

    Using SwiftUI only and NavigationStack, you can achieve a white title text on an orange background,
    with this code.

    struct ScreenView: View {
    var body: some View {
        NavigationStack {
            List(0..<50, id: .self) { _ in
                NavigationLink("Row", destination: Text("Tapped on row"))
            }
            .toolbar {
                ToolbarItem(placement: .principal) { Text("List").foregroundColor(.white) }
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarBackground(Color.orange, for: .navigationBar)
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScreenView()
    }
}
    Login or Signup to reply.
  2. 0

    You have to apply your .navigationTitle() modifier to views that are inside of NavigationStack

            NavigationStack {
        List {
            NavigationLink("Row", destination: Text("Tapped on row"))
        }
        .navigationTitle("List")
        .navigationBarTitleDisplayMode(.inline)
    }

    That seems to fix that problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search