[SUI] NavigationStack

Un NavigationStack es un componente que presenta una vista base y permite presentar otras vistas encima de ella.

• init(path:root:): path es un Binding que almacena la ruta de navegación hecha. root retorna la primera vista presentada.

El NavigationStack pinta una barra de navegación en la parte superior de la pantalla que se puede modificar con esto:

• navigationTitle(_:): Configura el título de la vista con un String localizado.
• navigationBarTitleDisplayMode(_:): Configura el modo de despliegue del título, de tipo NavigationBarItem.TitleDisplayMode, que puede ser automatic, inline o large.
• navigationBarBackButtonHidden(_:): Oculta el botón para ir hacia atrás
• statusBarHidden(_:): Define la visibilidad de la barra de estado.

struct ContentView: View {
  let scrums: [DailyScrum]

  var body: some View {
    NavigationStack {
      List(scrums) { scrum in
        NavigationLink {
          // ⚠️ Esta es la pantalla destino visitada al seleccionar una reunión de la lista
          Text(scrum.title)
        } label: {
          // ⚠️ Cada elemento de la lista, de tipo CardView, se envuelve en un NavigationLink
          CardView(scrum: scrum)
        }
        .listRowBackground(scrum.theme)
      }
      // ⚠️⚠️⚠️ Se le puso este título a la pantalla inicial. Notar que List tiene el título, no NavigationStack. Si se le pone a NavigationStack, no se muestra nada.
      .navigationTitle("Daily Scrums")
      .toolbar {
        Button(action: {}) {
          Image(systemName: "plus")
        }
        .accessibilityLabel("New Scrum")
      }
    }
  }
}

struct DailyScrum: Identifiable {
  let id: UUID = UUID()
  let theme: Color
  let title: String
  let participants: Int
  let length: Int
}

struct CardView: View {
  let scrum: DailyScrum
  var body: some View {
    VStack(alignment: .leading) {
      Text(scrum.title)
        .fontWeight(.bold)

      HStack {
        HStack {
          Image(systemName: "person.3")
          Text(scrum.participants.description)
        }
        .accessibilityLabel("Number of participants")

        Spacer()

        HStack {
          Text(scrum.length.description)
          Image(systemName: "clock")
        }
        .accessibilityLabel("Meeting length")
      }
      .padding(.top)
      .font(.caption)
      .foregroundStyle(.primary)
    }
    .padding(.horizontal)
  }
}

Al seleccionar alguno de los elementos de la lista, se efectúa la navegación hacia la siguiente pantalla que solo tiene un Text con el título de la reunión.

Título del NavigationStack

Por defecto, el título del NavigationStack es automatic. Esto significa que las vistas dentro de la jerarquía de navegación tendrán un título grande que se hace pequeño al desplazar la lista hacia arriba.

Si se aplica .navigationBarTitleDisplayMode(.inline), el comportamiento descrito antes cambiará por simplemente presentar el título pequeño.

struct ContentView: View {
  let scrums: [DailyScrum]

  var body: some View {
    NavigationStack {
      List(scrums) { scrum in
        NavigationLink {
          Text(scrum.title)
        } label: {
          CardView(scrum: scrum)
        }
        .listRowBackground(scrum.theme)
      }
      // ⚠️ Notar que se aplica navigationBarTitleDisplayMode a List, que es el contenido de NavigationStack. De lo contrario no funciona.
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("Daily Scrums")
      .toolbar {
        Button(action: {}) {
          Image(systemName: "plus")
        }
        .accessibilityLabel("New Scrum")
      }
    }
  }
}