SwiftUI中如何修改PageTabViewStyle的分页指示器颜色与背景？

要自定义TabView分页指示器的活跃/非活跃颜色以及背景，你可以结合SwiftUI修饰符和UIKit的UIPageControl外观配置实现，以下是具体方案：

方案一：全局配置（影响所有TabView分页指示器） #

适合整个App需要统一分页指示器样式的场景，直接在View初始化方法中配置全局外观：

import SwiftUI

struct Test: View {
    var items = [1, 2, 3]
    
    init() {
        // 设置非活跃指示器颜色
        UIPageControl.appearance().pageIndicatorTintColor = .black.withAlphaComponent(0.3)
        // 设置活跃指示器颜色（若使用SwiftUI的tint，此配置会被覆盖）
        UIPageControl.appearance().currentPageIndicatorTintColor = .orange
        // 设置指示器背景颜色
        UIPageControl.appearance().backgroundColor = .blue.withAlphaComponent(0.2)
        // iOS 16+ 可配置背景突出样式
        if #available(iOS 16.0, *) {
            UIPageControl.appearance().backgroundStyle = .prominent
        }
    }
    
    var body: some View {
        HStack {
            TabView {
                ForEach(items, id: \.self) { item in
                    Text("\(item)")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.gray)
                }
            }
            .tabViewStyle(.page)
            .indexViewStyle(.page(backgroundDisplayMode: .always))
            .tint(.orange) // SwiftUI tint优先级高于UIAppearance的活跃颜色配置
        }
        .background(Color.red)
    }
}

方案二：局部配置（仅影响当前TabView） #

如果只想修改单个TabView的样式，避免影响全局其他控件，可在onAppear临时修改配置，onDisappear时恢复原始设置：

import SwiftUI

struct Test: View {
    var items = [1, 2, 3]
    // 保存原始样式配置
    @State private var originalNonActiveTint: UIColor?
    @State private var originalActiveTint: UIColor?
    @State private var originalBgColor: UIColor?
    
    var body: some View {
        HStack {
            TabView {
                ForEach(items, id: \.self) { item in
                    Text("\(item)")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.gray)
                }
            }
            .tabViewStyle(.page)
            .indexViewStyle(.page(backgroundDisplayMode: .always))
            .tint(.orange)
            .onAppear {
                // 保存原始配置
                originalNonActiveTint = UIPageControl.appearance().pageIndicatorTintColor
                originalActiveTint = UIPageControl.appearance().currentPageIndicatorTintColor
                originalBgColor = UIPageControl.appearance().backgroundColor
                
                // 应用当前TabView的自定义样式
                UIPageControl.appearance().pageIndicatorTintColor = .purple.withAlphaComponent(0.4)
                UIPageControl.appearance().currentPageIndicatorTintColor = .orange
                UIPageControl.appearance().backgroundColor = .green.withAlphaComponent(0.1)
            }
            .onDisappear {
                // 恢复原始配置
                UIPageControl.appearance().pageIndicatorTintColor = originalNonActiveTint
                UIPageControl.appearance().currentPageIndicatorTintColor = originalActiveTint
                UIPageControl.appearance().backgroundColor = originalBgColor
            }
        }
        .background(Color.red)
    }
}

关键说明 #

• 活跃指示器颜色：优先使用SwiftUI的tint修饰符，其优先级高于UIAppearance的配置。
• 非活跃指示器颜色：通过UIPageControl.appearance().pageIndicatorTintColor设置。
• 背景颜色：使用UIPageControl.appearance().backgroundColor配置，iOS16+可额外通过backgroundStyle调整背景显示效果。

内容的提问来源于stack exchange，提问作者let me down slowly