Cambiar el color de la Navigation Bar en SwiftUI

Para cambiar el color de la barra de navegación o navigation bar en SwiftUI en iOS, necesitamos aplicar el modificador toolbarBackground a la vista de contenido de NavigationStack.

toolbarBackground acepta 2 parámetros:

ShapeStyle: el estilo que se mostrará como fondo de la barra.

ToolbarPlacement: Las barras donde colocar el estilo. Queremos cambiar el color de la barra de navegación, así que lo configuraremos en .navigationBar

En este ejemplo de Xcode estableceremos el color de fondo de la barra en azul:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Hello, SwiftUI!")
            }
            .navigationTitle("Navigation Title")
            .toolbarBackground(

                // 1
                .blue,
                // 2
                for: .navigationBar)
        }
    }
}

1) Establecemos el color en azul.

2) Configuramos .navigationBar para ToolbarPlacement para aplicar el color de fondo a la barra de navegación.

Una vez que movemos el contenido hacia arriba, la barra de navegación se vuelve visible y el color es azul.

Visibilidad de fondo

Para controlar la visibilidad del fondo utilizamos una variación del modificador .toolbarBackground que acepta Visibilidad en lugar de ShapeStyle.

Echale un vistazo a éste ejemplo:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Hello, SwiftUI!")
            }
            .navigationTitle("Navigation Title")
            .toolbarBackground(
                .blue,
                for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)

        }
    }
}