更改TabView指示器SwiftUI

时间:2020-07-12 17:21:56

标签: swift swiftui xcode12

enter image description here

是否可以在swiftUI中更改tabView Indicator颜色?

这是我的代码

struct OnBoarding: View {
    var body: some View {
        
        TabView {
            ForEach(0 ..< 3) { item in
                VStack {

                    Image("discover")
                        .resizable()
                        .scaledToFit()
                    
                }
            }
        }

        .tabViewStyle(PageIndexViewStyle(backgroundDisplayMode: Color ?))
        
    }
}

struct OnBoarding_Previews: PreviewProvider {
    static var previews: some View {
        OnBoarding()
    }
}

我尝试了tabViewStyle(PageIndexViewStyle(backgroundDisplayMode:Color?)) 但无法解决

3 个答案:

答案 0 :(得分:4)

您需要使用UIkit

 init() {
    UIPageControl.appearance().currentPageIndicatorTintColor = .red
    UIPageControl.appearance().pageIndicatorTintColor = UIColor.black.withAlphaComponent(0.2)
    }

答案 1 :(得分:3)

基本上,您需要在显示视图时设置全局变量。一种方法如下:

import SwiftUI

struct OnboardingView: View {
  
  var pages: [Page]
  
  var body: some View {
  
    TabView {
      ForEach(pages) { page in
        // Your component view
      }
    }
    .tabViewStyle(PageTabViewStyle())
    .onAppear {
      setupAppearance()
    }
  }
  
  func setupAppearance() {
    UIPageControl.appearance().currentPageIndicatorTintColor = .black
    UIPageControl.appearance().pageIndicatorTintColor = UIColor.black.withAlphaComponent(0.2)
  }
}

答案 2 :(得分:0)

<块引用>

首先创建一个子视图,如:

struct SliderTabView: View {
init() {
          UIPageControl.appearance().currentPageIndicatorTintColor = .red
          UIPageControl.appearance().pageIndicatorTintColor = UIColor.red.withAlphaComponent(0.2)
       }
var body: some View {
    TabView{
        ForEach(players){ player in
            //Slider content here ...
        }
    }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
}
<块引用>

从主视图调用子视图,如:

    struct ContentView: View {
          var body: some View {
                                 SliderTabView()
                              }
                             }

对我来说输出看起来像: enter image description here