Cómo ocultar un TabBar en SwiftUI

Marcelo Laprea

12 septiembre, 20232min de lectura

A partir de iOS 16 podemos hacer uso de toolbar(_:for:) para ocultar el TabBar en nuestra aplicación. Este método recibe dos parámetros visibility y bars. Veamos para que sirve cada uno:

• visibility: es de tipo Visibility y especifica la visibilidad que se le quiere dar al toolbar.

public enum Visibility {
    case automatic
    case hidden
    case visible
}

Para nuestro ejemplo usaremos .hidden ya que lo que queremos es ocultar el TabBar.

• bars: la barra a la que quieres actualizar su visibilidad. Podemos usar las siguientes opciones: .bottomBar, .navigationBar, .tabBar y .automatic.

Ejemplo de como ocultar un TabBar

1. Creamos un TabBar, y dentro añadiremos una vista llamada HomeView.

struct ContentView: View {
  var body: some View {
    TabView {
      HomeView()
        .tabItem {
          Label("", systemImage: "house.fill")
        }
    }
  }
}

2. Creamos la vista HomeView con un navigationLink que nos llevará a una nueva vista llamada DetailView.

struct HomeView: View {
  var body: some View {
    NavigationStack {
      NavigationLink("Navigate to detail") {
        DetailView()
      }
    }
  }
}

struct DetailView: View {
  var body: some View {
    Text("Detail View")
  }
}

3. Hacemos uso del método toolbar(_:for:), definiendo que queremos ocultar el .tabBar cuando naveguemos al DetailView.

struct HomeView: View {
  var body: some View {
    NavigationStack {
      NavigationLink("Navigate to detail") {
        DetailView()
          .toolbar(.hidden, for: .tabBar)
      }
    }
  }
}