SwiftUI自定义UIPageControl轮播指示器不显示问题排查求助

我尝试用SwiftUI的TabView结合基于UIPageControl的自定义圆点指示器实现图片轮播，但圆点始终不显示。创建圆点指示器的代码仅在视图初始化时执行一次，API加载图片数据后，PageControl既不更新圆点数量，也不重新绘制。

相关代码 #

HomePageView 代码 #

import SwiftUI

class DotIndicator: ObservableObject {
    @Published var maxImages = 0
    @Published var selectedImageIndex = 0
}


struct HomePageView: View {
    
    @State var appConfigurations = AppConfigData(infoPages: [], approvals: [])
    
    @ObservedObject var slideIndicator = DotIndicator()
    
    var body: some View {
        ZStack{
            BackgroundEffect()
            VStack{
                NavigationBar()
                
                Spacer().frame(height:0)
                
                TabView{
                    ForEach(appConfigurations.infoPages ?? [], id: \.key){infoPage in
                        AsyncImage(url: URL(string: infoPage.bannerImage ?? "")){ phase in
                            switch phase{
                            case .empty:
                                ProgressView()
                                    .progressViewStyle(.circular)
                            case .success(let image):
                                image.resizable()
                                    .aspectRatio(contentMode: .fill)
                            case .failure:
                                Image("megatrends-image")
                            @unknown default:
                                EmptyView()
                            }
                        }.tag(infoPage)
                        .frame(width: ScreenWidth(), height: ScreenHeight() * 0.32)
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                .frame(width: ScreenWidth(), height: ScreenHeight() * 0.32)
                .task {
                    appConfigurations = await getAppConfig()
                    
                    slideIndicator.maxImages = appConfigurations.infoPages?.count ?? 0
                    
                    slideIndicator.selectedImageIndex = 0
                }
                
                Spacer().frame(height:18)
                
                PageControl(maxImages: $slideIndicator.maxImages, currentImage: $slideIndicator.selectedImageIndex)

                Spacer().frame(height:58)
                
                CallBackButtons()
                
                Spacer()
                
                CreateTicketButton()
            }
        }
    }
}

PageControl 代码 #

import Foundation
import SwiftUI

struct PageControl: UIViewRepresentable{
    
    @Binding var maxImages: Int
    @Binding var currentImage: Int
    
    func makeUIView(context: Context) -> UIPageControl {
        
        print("Calling")
        
        let control = UIPageControl()
        control.backgroundStyle = .minimal
        control.numberOfPages = maxImages
        control.currentPage = currentImage
        control.currentPageIndicatorTintColor = UIColor.blue
        control.pageIndicatorTintColor = UIColor.black
        control.backgroundColor = UIColor.clear
        control.isUserInteractionEnabled = false
        
        return control
    }
    
    func updateUIView(_ uiView: UIPageControl, context: Context) {
        uiView.currentPage = currentImage
    }
}

问题排查与修复方案 #

1. 补全PageControl的更新逻辑 #

你的updateUIView方法只同步了当前选中页码，没有处理总页数（maxImages）的变化。API返回数据后，slideIndicator.maxImages更新，但UIPageControl的numberOfPages没同步，导致圆点不显示。修改PageControl的updateUIView：

func updateUIView(_ uiView: UIPageControl, context: Context) {
    uiView.numberOfPages = maxImages
    uiView.currentPage = currentImage
}

2. 绑定TabView的滑动页码 #

当前代码手动设置了初始页码，但用户滑动TabView时，页码不会同步到selectedImageIndex。需要给TabView添加selection绑定，并修正tag类型：

TabView(selection: $slideIndicator.selectedImageIndex) {
    ForEach(Array(appConfigurations.infoPages ?? []).enumerated(), id: \.element.key) { index, infoPage in
        AsyncImage(url: URL(string: infoPage.bannerImage ?? "")){ phase in
            // 原有逻辑不变
        }
        .tag(index) // 用索引作为tag，匹配Int类型的selectedImageIndex
        .frame(width: ScreenWidth(), height: ScreenHeight() * 0.32)
    }
}

3. 自动同步数据变化 #

仅在task中设置一次maxImages不够，添加onChange监听数据变化，确保任何时候图片列表更新，指示器都能同步：

.onChange(of: appConfigurations.infoPages) { newPages in
    slideIndicator.maxImages = newPages?.count ?? 0
    slideIndicator.selectedImageIndex = 0
}

4. 处理初始空状态 #

初始时maxImages为0，UIPageControl不会显示圆点，可以添加条件判断隐藏空状态的指示器：

if slideIndicator.maxImages > 0 {
    PageControl(maxImages: $slideIndicator.maxImages, currentImage: $slideIndicator.selectedImageIndex)
}

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