44. Пример работы с TabView

В этой статье посмотрим как можно использовать TabView для навигации.

Сделаем приложение с двумя табами:

В этой статье я использую инициализатор TabView с передачей выбранного таба, что в будущем можно использовать для управления выбранным табом с любого экрана.

Например, можно держать @Published-свойство с выбранным табом в ObservableObject-классе и менять его по необходимости.

Для работы с TabView понадобится enum Tab, и в моем примере вся информация для табов будет находиться прямо внутри enum:

enum Tab: String, Identifiable, CaseIterable {
    var id: String { rawValue } // Для удобного использования внутри `ForEach`
     
    case home
    case settings
     
    private var imageName: String {
      self == .home ? "house" : "gear"
    }
     
    /// Лейбл, который нажимает пользователь (по аналогии с обычной кнопкой)
    var tabItemLabel: some View {
      Label(
        title: { Text(rawValue.capitalized) },
        icon: { Image(systemName: imageName) }
      )
    }
     
    /// Экран, соответствующий табу
    @ViewBuilder
    var screen: some View {
      switch self {
      case .home: TVHomeScreen()
      case .settings: TVSettingsScreen()
      }
    }
  }

Корневой экран, где лежит TabView, реализован так:

struct TVRootScreen: View {
  /// Это свойство можно менять для смены выбранного таба
  @State private var selectedTab = Tab.home
   
  var body: some View {
    TabView(selection: $selectedTab) {
      ForEach(Tab.allCases) { tab in
        tab.screen
          .tabItem { tab.tabItemLabel }
          .tag(tab)
      }
    }
  }
}

extension TVRootScreen {
  enum Tab: String, Identifiable, CaseIterable { ... }
}

Дополнительно может быть полезным видео от apple про навигацию, в котором рассказывают о том как правильно организовать навигацию для комфортного использования приложения - там есть и про NavigationStack, и про TabView.

Код для этой статьи можно посмотреть тут, а другие статьи - тут.