SwiftUI 3中如何调整TabView分页指示器的配色方案

iOS 16+ 原生实现（推荐） #

iOS 16 及以上系统提供了原生修饰符，可以直接修改单个TabView的分页指示器配色，不会影响全局其他组件：

TabView {
    ViewOne()
    ViewTwo()
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
// 选中页指示器颜色
.tint(.darkGray)
// 未选中页指示器颜色
.backgroundStyle(.lightGray)

iOS 15 及更低版本实现 #

低版本SwiftUI没有提供针对单个分页指示器的原生修改接口，可以通过两种方式实现：

全局修改所有分页指示器配色 #

在App入口的初始化方法中修改UIKit的全局外观：

@main
struct YourApp: App {
    init() {
        // 未选中页指示器颜色
        UIPageControl.appearance().pageIndicatorTintColor = .lightGray
        // 选中页指示器颜色
        UIPageControl.appearance().currentPageIndicatorTintColor = .darkGray
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

仅修改当前页面的分页指示器配色 #

如果不想影响其他页面的分页指示器样式，可以在当前页面的生命周期方法中临时修改，离开页面时恢复默认值：

struct YourTabPage: View {
    var body: some View {
        TabView {
            ViewOne()
            ViewTwo()
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        .onAppear {
            UIPageControl.appearance().pageIndicatorTintColor = .lightGray
            UIPageControl.appearance().currentPageIndicatorTintColor = .darkGray
        }
        .onDisappear {
            // 恢复系统默认配色
            UIPageControl.appearance().pageIndicatorTintColor = nil
            UIPageControl.appearance().currentPageIndicatorTintColor = nil
        }
    }
}

完全自定义指示器样式 #

如果需要实现更复杂的自定义样式，可以隐藏系统默认指示器，自行实现分页控件：

struct CustomTabPage: View {
    // 记录当前选中页码
    @State private var currentPage = 0
    var body: some View {
        ZStack(alignment: .bottom) {
            TabView(selection: $currentPage) {
                ViewOne().tag(0)
                ViewTwo().tag(1)
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never)) // 隐藏系统指示器
            
            // 自定义指示器
            HStack(spacing: 8) {
                ForEach(0..<2) { index in
                    Circle()
                        .fill(currentPage == index ? .darkGray : .lightGray)
                        .frame(width: 8, height: 8)
                }
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 6)
            .background(.black.opacity(0.2))
            .cornerRadius(8)
            .padding(.bottom, 8)
        }
    }
}

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