如何让TabView的.page样式分页控件背景样式保持显示

你在使用.tabViewStyle(.page)实现图片轮播时，通过UIPageControl.appearance().backgroundStyle = .prominent给分页指示点添加背景，但切换页面后背景消失——这是因为SwiftUI在页面切换时会重置UIPageControl的样式。以下是几种可行的解决方案：

方案1：全局初始化时设置样式 #

在App启动时全局配置UIPageControl的外观，确保所有分页控件都保持背景样式：

@main
struct YourApp: App {
    init() {
        // 全局设置UIPageControl的背景样式
        UIPageControl.appearance().backgroundStyle = .prominent
        // 可额外配置指示点颜色
        UIPageControl.appearance().currentPageIndicatorTintColor = .white
        UIPageControl.appearance().pageIndicatorTintColor = .gray
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

优点：实现简单，一劳永逸；缺点：会影响App内所有UIPageControl控件。

方案2：监听页面切换重新设置样式 #

针对单个TabView，通过监听选中索引的变化，每次切换页面时重新应用背景样式：

struct ContentView: View {
    @State private var selectedIndex = 0
    let imageNames = ["img1", "img2", "img3"]
    
    var body: some View {
        TabView(selection: $selectedIndex) {
            ForEach(imageNames.indices, id: \.self) { index in
                Image(imageNames[index])
                    .resizable()
                    .scaledToFill()
                    .tag(index)
            }
        }
        .tabViewStyle(.page)
        .onAppear {
            UIPageControl.appearance().backgroundStyle = .prominent
        }
        .onChange(of: selectedIndex) { _ in
            // 页面切换后重新设置背景样式
            DispatchQueue.main.async {
                UIPageControl.appearance().backgroundStyle = .prominent
            }
        }
    }
}

优点：仅针对当前TabView生效；缺点：依赖系统控件的外观设置，存在被系统样式覆盖的可能。

方案3：自定义分页指示器（最稳妥） #

完全自定义分页控件，摆脱系统样式的限制，实现100%可控：

// 自定义UIPageControl的SwiftUI包装器
struct CustomPageControl: UIViewRepresentable {
    var pageCount: Int
    @Binding var currentPage: Int
    
    func makeUIView(context: Context) -> UIPageControl {
        let pageControl = UIPageControl()
        pageControl.numberOfPages = pageCount
        pageControl.backgroundStyle = .prominent
        pageControl.currentPageIndicatorTintColor = .white
        pageControl.pageIndicatorTintColor = .gray
        return pageControl
    }
    
    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.currentPage = currentPage
        // 每次更新时强制保持背景样式
        uiView.backgroundStyle = .prominent
    }
}

// 使用示例
struct ContentView: View {
    @State private var currentPage = 0
    let imageNames = ["img1", "img2", "img3"]
    
    var body: some View {
        VStack(spacing: 16) {
            TabView(selection: $currentPage) {
                ForEach(imageNames.indices, id: \.self) { index in
                    Image(imageNames[index])
                        .resizable()
                        .scaledToFill()
                        .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏系统默认分页器
            .frame(height: 300)
            
            // 添加自定义分页指示器
            CustomPageControl(pageCount: imageNames.count, currentPage: $currentPage)
        }
    }
}

优点：样式完全可控，不会被系统重置；缺点：需要额外编写包装代码。

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