更改 TabView 指示器 SwiftUI答案

【问题标题】：change TabView indicator SwiftUI更改 TabView 指示器 SwiftUI
【发布时间】：2020-11-01 23:05:35
【问题描述】：

有没有办法改变 swiftUI 中的 tabView 指示器颜色？

这是我的代码

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 ?)) 但无法解决

【问题讨论】：

标签： swift swiftui xcode12

【解决方案1】：

你需要使用 UIkit

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

【讨论】：

这个初始化应该放在哪里？ & 它是否会影响应用中的其他分页样式？
这会影响应用中的所有屏幕。如果您只想在一个视图上更改它，那么您应该将这些行放在 onAppear 中，然后在您离开视图时使用 onDisappear 撤消更改。（使用 nil 作为两者的值似乎会将它们重置为默认值）

【解决方案2】：

基本上你需要在你的视图出现时设置全局变量。一种方法如下：

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)
  }
}

【讨论】：

它现在不起作用，但 init() 中的@Achraf 版本起作用。我不知道为什么...
设置全局外观。

【解决方案3】：

首先创建一个子视图，如：

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()
                              }
                             }

输出看起来像我：

【讨论】：