En este tutorial vamos a ver como usar NavigationStack en SwiftUI. En muchas aplicaciones habrás experimentado una interfaz de navegación. Este tipo de UI típicamente consiste en una navigation bar y una lista de datos, permitiendo a los usuarios navegar a una vista detallada cuando hacen tap en el contenido.
En UIKit, implementamos este tipo de interfaz utilizando UINavigationController. En SwiftUI, utilizabamos el componente NavigationView que ahora es llamado NavigationStack desde iOS 16.
Implementando una NavigationStack
Para incrustar una vista de lista en un NavigationStack, simplemente necesitabas envolver la lista con un NavigationStack de esta manera:
NavigationStack{
List {
ForEach(restaurants) { restaurant in
BasicImageRow(restaurant: restaurant)
}
}
.listStyle(.plain)
}
Una vez lo hayas hecho verás una barra de navegación vacía. Para asignar un título a la barra, inserta el modifier navigationBarTitle como se puede apreciar a continuación:
NavigationStack{
List {
ForEach(restaurants) { restaurant in
BasicImageRow(restaurant: restaurant)
}
}
.listStyle(.plain)
.navigationTitle("Restaurants")
}El resultado en XCode es el siguiente:
Personalizando la NavigationStack
Por defecto, la barra de navegación está establecida para aparecer como un título largo. Sin embargo, si quieres mantener la barra de navegación compacta y desactivar el uso de un título largo lo puedes hacer con el modifier navigationBarTitleDisplayMode.
El parámetro especifica la apariencia de la barra de navegación, determinando donde debe aparecer como un título largo o un título compacto.
Por defecto está puesto en .automatic, que significa que el título largo es el usado. En el siguiente código, lo ponemos a .inline, indicando usar un título compacto.
.navigationBarTitleDisplayMode(.automatic)
1 comment