SwiftUI 自定义 TabView 指示器

Question

我无法将页面所在的指示器居中。 我不能忽视左右的意见。 当页数增加时，当右边的指针数大于左边的指针数时，我所在页面的指针难免会向左偏移。

struct OnboardingView: View {
    
    var pages: [Page] = [
        Page(page: PageOne()),
        Page(page: PageTwo()),
        Page(page: PageThree()),
    ]
    @State var offset: CGFloat = 0
    var body: some View {
        ScrollView(.init()) {
            TabView {
                ForEach(pages.indices, id: \.self) { item in
                    
                    if item == 0 {
                        AnyView(_fromValue: pages[item].page)
                            .overlay(
                                GeometryReader { proxy -> Color in
                                    let minX = proxy.frame(in: .global).minX
                                    DispatchQueue.main.async {
                                        withAnimation(.default) {
                                            self.offset = -minX
                                        }
                                    }
                                    return Color.clear
                                }
                                .frame(width: 0, height: 0)
                                ,alignment: .leading
                            )
                    } else {
                        AnyView(_fromValue: pages[item].page)
                    }
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .overlay(
                HStack(spacing: 15) {
                    
                    ForEach(pages.indices, id: \.self) { item in
                        
                        ZStack {
                            Capsule()
                                .foregroundColor(Color.white)
                                .frame(width: getCurrentPageIndex() == item ? 20 : 7, height: 20)
                                .frame(maxWidth: getCurrentPageIndex() == item ? .infinity : nil, alignment: .center)
                                
                        }
                    }
                }
                .padding(.horizontal)
                .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
                .padding(.bottom, 10)
                ,alignment: .bottom
            )
        }
        .ignoresSafeArea()
    }
    
    func getCurrentPageIndex() -> Int {
        let index = Int(round(Double(offset / getScreenWidth())))
        return index
    }
    
    func getOffset() -> CGFloat {
        let progress = offset / getScreenWidth()
        
        return 22 * progress
    }
}

struct OnboardingView_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingView()
    }
}

struct Page: Identifiable {
    var id = UUID()
    var page: Any
}

extension View {
    func getScreenWidth() -> CGFloat {
        return UIScreen.main.bounds.width
    }
}

Answer 1

.overlay(
  HStack(spacing: 15) {
    ForEach(pages.indices, id: \.self) { item in
      ZStack {
        Capsule()
          .foregroundColor(Color.white)
          .frame(width: getCurrentPageIndex() == item ? 20 : 7, height: 20)
      }
    }
  }
  .padding(.horizontal)
  .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
  .padding(.bottom, 10), alignment: .bottom
)