SwiftUI指定TabView样式的tabViewStyle

在 SwiftUI 中，TabView 是一个用于组织多页面内容的容器，它支持多种分页和标签样式，通过 .tabViewStyle() 方法可以指定 TabView 的样式。

常用的 tabViewStyle

以下是常用的 tabViewStyle 及其特点：

1、DefaultTabViewStyle

.tabViewStyle(DefaultTabViewStyle())

特点: 这是默认的 TabView 样式。

用途: 在支持的设备上，通常会显示底部的 Tab Bar，并允许用户通过点击标签切换视图。

常见场景: 移动端应用的底部导航栏。

示例代码：

TabView {
    Text("首页")
        .tabItem {
            Label("首页", systemImage: "house")
        }
    Text("设置")
        .tabItem {
            Label("设置", systemImage: "gear")
        }
}
.tabViewStyle(DefaultTabViewStyle())

2、PageTabViewStyle

.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))

特点: 适用于分页内容，支持水平滑动切换页面。

选项:

.indexDisplayMode:

.automatic: 根据内容动态显示分页指示器。

.always: 始终显示分页指示器。

.never: 不显示分页指示器。

常见场景: 实现类似于轮播图或图文滑动的效果。

示例代码：

TabView {
    Text("第一页")
        .background(Color.red)
    Text("第二页")
        .background(Color.blue)
    Text("第三页")
        .background(Color.green)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

3、交互动画和自定义效果

除了 PageTabViewStyle 和 DefaultTabViewStyle，还可以通过配合 @State 和 onTapGesture，为 TabView 实现自定义动画效果。例如在切换时调整视图大小或添加过渡动画。

总结

使用 .tabViewStyle() 可以为 TabView 赋予不同的外观和交互模式。

默认选项: DefaultTabViewStyle 适用于底部导航。

分页切换: PageTabViewStyle 适合轮播图或分屏场景。

自定义扩展: 配合 GeometryReader 等工具实现更复杂的效果。

相关文章

SwiftUi选项卡式视图切换TabView：https://fangjunyu.com/2024/12/09/swiftui%e9%80%89%e9%a1%b9%e5%8d%a1%e5%bc%8f%e8%a7%86%e5%9b%be%e5%88%87%e6%8d%a2tabview/