SwiftUI TabView限制指示器数量：8页仅显示3个圆点指示器

要实现始终显示3个页面指示器，同时保留完整的页面滑动功能，我们需要根据当前页面索引动态计算指示器的状态，而非直接遍历所有页面。以下是修改后的完整代码：

import SwiftUI

struct OnBoardingModel {
    let image: String
    let title: String
    let subTitle: String
}

struct OnBoardingView: View {
    @State private var currentStep = 0
    
    let datas = [
        OnBoardingModel(image: "onboard1", title: "OnBoard1", subTitle: "OnBoard1"),
        OnBoardingModel(image: "onboard1", title: "OnBoard2", subTitle: "OnBoard2"),
        OnBoardingModel(image: "onboard1", title: "OnBoard3", subTitle: "OnBoard3"),
        OnBoardingModel(image: "onboard1", title: "OnBoard4", subTitle: "OnBoard4"),
        OnBoardingModel(image: "onboard1", title: "OnBoard5", subTitle: "OnBoard5"),
        OnBoardingModel(image: "onboard1", title: "OnBoard6", subTitle: "OnBoard6"),
        OnBoardingModel(image: "onboard1", title: "OnBoard7", subTitle: "OnBoard7"),
        OnBoardingModel(image: "onboard1", title: "OnBoard8", subTitle: "OnBoard8")
    ]
    
    var body: some View {
        VStack {
            TabView(selection: $currentStep) {
                ForEach(0..<datas.count, id: \.self) { index in
                    VStack {
                        Image(datas[index].image)
                            .resizable()
                            .frame(width: 250, height: 250)
                        
                        Text(datas[index].title)
                            .font(.title)
                            .fontWeight(.bold)
                        
                        Text(datas[index].subTitle)
                            .font(.subheadline)
                    }
                    .tag(index)
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            
            // 替换原指示器为动态3个指示器
            HStack(spacing: 8) {
                ForEach(0..<3, id: \.self) { indicatorIndex in
                    let targetPage = targetPage(for: indicatorIndex)
                    if targetPage == currentStep {
                        Rectangle()
                            .frame(width: 20, height: 10)
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                            .foregroundStyle(Color("hanBlue"))
                    } else {
                        Circle()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.gray)
                    }
                }
            }
            
            Button(action: {
                if currentStep < datas.count - 1 {
                    currentStep += 1
                } else {
                    // 完成引导后的逻辑
                }
            }) {
                Text("Continue")
            }
        }
    }
    
    // 计算每个指示器对应的目标页面索引
    private func targetPage(for indicatorIndex: Int) -> Int {
        let totalPages = datas.count
        // 前2页：指示器固定显示前3个页面
        if currentStep <= 1 {
            return indicatorIndex
        }
        // 最后2页：指示器固定显示最后3个页面
        else if currentStep >= totalPages - 2 {
            return totalPages - 3 + indicatorIndex
        }
        // 中间页面：指示器显示当前页及前后各1页
        else {
            return currentStep - 1 + indicatorIndex
        }
    }
}

#Preview {
    OnBoardingView()
}

关键逻辑说明 #

1. 动态指示器计算：通过targetPage(for:)方法根据当前页面索引，决定3个指示器分别对应哪个页面：
   • 当前处于前2页时，指示器固定展示第0、1、2页的状态
   • 当前处于最后2页时，指示器固定展示倒数第3、2、1页的状态
   • 当前处于中间页面时，指示器展示当前页及前后各一页的状态
2. 指示器样式：保留原有的活跃态（矩形）和非活跃态（圆形）样式，仅调整展示数量和对应关系
3. 保留滑动功能：TabView的页面切换逻辑完全保留，用户可正常滑动浏览所有8个引导页

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