44. Пример работы с TabView
Oleg991В этой статье посмотрим как можно использовать 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
.
Код для этой статьи можно посмотреть тут, а другие статьи - тут.