How to change the color of page index of PageTabViewStyle in SwiftUI?-CodePudding

I have a TabView defined with .indexViewStyle(.page). It shows the active index using white color, and inactive indices using gray color with a light gray background if backgroundDisplayMode is set to always like this: .indexViewStyle(.page(backgroundDisplayMode: .always)). I want to change the color for page indices and background. Here's a sample code of what I am doing:

import SwiftUI

struct Test: View {
    var items = [1, 2, 3]
    var body: some View {
        HStack {
            TabView {
                ForEach(items, id: \.self) { item in
                    Text("\(item)")
                }
            }
            .tabViewStyle(.page)
            .indexViewStyle(.page)
        }.background(Color.red)
    }
}

Here is the screenshot of the output screen:

So how do I change the color of page indices and background here?

CodePudding user response：

you need to use UIkit to change the colour of active index.

struct Test: View {
    
    init() {
              UIPageControl.appearance().currentPageIndicatorTintColor = .green
              UIPageControl.appearance().pageIndicatorTintColor = UIColor.green.withAlphaComponent(0.2)
           }
    
    var items = [1, 2, 3]
       var body: some View {
           HStack {
               TabView {
                   ForEach(items, id: \.self) { item in
                       Text("\(item)")
                   }
               }
               .tabViewStyle(.page)
               .indexViewStyle(.page)
           }.background(Color.red)
       }
}