SwiftUI: custom Pagination on TabView PageTabViewStyle not working properly

Question

I'm working on a custom Tabview Pagination and the below image is what I am trying to archive. The idea is when the textEditor if filled and user move to the next question ( tab index ), the Capsule will be filled with color.

However, my current code causing this weird UI

Here is The Progress View:

struct ProgressBarView: View {
@Binding var progress : [Progress]
let numberOfPages: Int
let currentIndex: Int

var columns: [GridItem] { [GridItem] (repeating: GridItem(.flexible(minimum: 30)), count: progress.count) }

var body: some View {
    GeometryReader{ geometry in
        HStack{
            LazyVGrid(columns: columns, alignment: .leading){
                ForEach(0..<numberOfPages) { index in // 1
                  if shouldShowIndex(index) {

                      CapsuleView(currentIndex: currentIndex, index: index)
                      .id(index) // 4
                  }
                }
            }
//...
        }
    }
}

  func shouldShowIndex(_ index: Int) -> Bool {
    ((currentIndex - 1)...(currentIndex + 1)).contains(index)
  } 
}

The CapsuleView:

struct CapsuleView: View {
let currentIndex: Int
let index: Int

var body: some View {
    VStack{
        RoundedRectangle(cornerRadius: 10)
            .fill( currentIndex == index ? Color.blue : Color.clear).opacity(0.5)
    }
    .frame(height: 10)
    .overlay(
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.black, lineWidth: 1)
    )
}

}

and lastly in my Content View

TabView(selection: $currentIndex.animation()) {
                        ForEach(0..<progress.count, id: \.self) { index in
                            TextAreaView(title: questions[index], text: $homeVM.trialText)
                                .tag(index)
                        }
                    }
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

Any suggestion is much appreciated!

Show us how you're using `ProgressBarView` in `ContentView`. Try removing `if shouldShowIndex(index) {` what happens? — Timmy, Aug 16 '22 at 06:29

score 0 · Answer 1 · answered Aug 16 '22 at 16:40

Thank you for the helps, I figured it out by NoeOnJupiter's suggestion. I just have to remove

shouldShowIndex(index) {...}

and from the CapsuleView, I need to change "==" to "<="

RoundedRectangle(cornerRadius: CRConstants.cornerRadius10)
            .fill( currentIndex >= index ? Color.blue : Color.clear).opacity(0.5)

SwiftUI: custom Pagination on TabView PageTabViewStyle not working properly

1 Answers1