Un NavigationStack es un componente que presenta una vista base y permite presentar otras vistas encima de ella.
init(path:root:):pathes unBindingque almacena la ruta de navegación hecha.rootretorna 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 unStringlocalizado.
navigationBarTitleDisplayMode(_:): Configura el modo de despliegue del título, de tipoNavigationBarItem.TitleDisplayMode, que puede serautomatic,inlineolarge.
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")
}
}
}
}
SOCIAL SHARE CARD GENERATOR