©️ OverlookArt

TabView

开始使用

用于切换多个子视图的 Tab 组件。类似于 UIKit 中的 UITabBarController

1TabView {
2    CostomView()
3    CostomView()
4    ...
5}
Important

TabView 中嵌入5个以上的子视图后, 第5个及以后子视图的将会被 More 的 视图替换。

配置 tabItem

tabItem 接收一个 Label 组件,用于显示在标签页上。

1TabView {
2    CostomView()
3        .tabItem {
4            Label("title", systemImage: "star.fill")
5        }
6    ...
7}

配置强调色

accentColor 属性类似于 UITabBarControllerbarTintColor 属性,用于设置 tabItem 的强调色。

1TabView {
2    ...
3}.accentColor(.red)

TabView 样式效果

tabViewStyle 属性用于控制 TabView 的展示样式与交互方式。

  • .automatic: 呈现效果及交互方式类似于 UIKit 中的 UITabBarController
  • .page: 呈现效果及交互方式类似于 UIKit 中的 UIPageViewController
  • .sidebarAdaptable: 适用于侧边栏布局的 TabView 样式, 在 iPadOS 和 macOS 上表现为侧边栏, 在 iOS 上表现为底部 Tab 栏
1TabView {
2    ...
3}.tabViewStyle(.automatic)