DEV Community

GoyesDev
GoyesDev

Posted on

[SUI] NavigationStack

#swift #ios #swiftui

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:

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")
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode 
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)
  }
}
Enter fullscreen mode Exit fullscreen mode

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")
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)