如何修改SwiftUI TabView的点指示器为选中时的圆角矩形？

默认的SwiftUI TabView分页指示器（PageTabViewStyle）无法直接修改选中点的形状，我们可以通过隐藏默认指示器，自行实现一个自定义组件来达到需求效果——选中项显示圆角矩形，未选中项保持圆点样式。

实现步骤 #

1. 自定义分页指示器组件 #

创建一个绑定选中索引的自定义视图，根据当前页码切换指示器样式：

struct CustomPageIndicator: View {
    let pageCount: Int
    @Binding var currentPage: Int
    // 可自定义颜色、尺寸参数
    let activeColor: Color = .blue
    let inactiveColor: Color = .gray.opacity(0.3)
    let activeIndicatorWidth: CGFloat = 24
    let inactiveIndicatorSize: CGFloat = 6
    let cornerRadius: CGFloat = 3
    
    var body: some View {
        HStack(spacing: 8) {
            ForEach(0..<pageCount, id: \.self) { index in
                if index == currentPage {
                    // 选中状态：圆角矩形
                    Rectangle()
                        .fill(activeColor)
                        .frame(width: activeIndicatorWidth, height: inactiveIndicatorSize)
                        .cornerRadius(cornerRadius)
                } else {
                    // 未选中状态：圆点
                    Circle()
                        .fill(inactiveColor)
                        .frame(width: inactiveIndicatorSize, height: inactiveIndicatorSize)
                }
            }
        }
        .frame(height: inactiveIndicatorSize)
        .padding(.horizontal)
        .animation(.easeInOut, value: currentPage) // 添加切换动画
    }
}

2. 在TabView中集成自定义指示器 #

隐藏默认的分页指示器，将自定义组件绑定到TabView的选中索引：

struct ContentView: View {
    @State private var currentPage = 0
    // 示例页面数据
    let pages = ["首页", "分类", "我的", "设置"]
    
    var body: some View {
        VStack {
            TabView(selection: $currentPage) {
                ForEach(0..<pages.count, id: \.self) { index in
                    Text(pages[index])
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.white)
                        .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏默认指示器
            .frame(height: 300) // 自定义TabView高度
            
            // 添加自定义分页指示器
            CustomPageIndicator(pageCount: pages.count, currentPage: $currentPage)
                .padding(.bottom, 20)
        }
    }
}

扩展优化 #

• 可以根据需求调整activeIndicatorWidth、cornerRadius等参数，适配不同的UI风格
• 如果需要跟随滑动进度的过渡效果，可以结合UIPageViewController的代理回调，或者使用SwiftUI的GeometryReader获取滑动偏移量来实现更细腻的动画

内容的提问来源于stack exchange，提问作者Sambhav