更改 SwiftUI 中 TabView 指示器的颜色

Question

有没有办法在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 ?))，但是无法处理它。

- Pingo

Answer 1

你需要使用UIkit

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

- Achraf

---

这个 init 应该放在哪里？它会影响应用程序中的其他分页样式吗？ - Ahmadreza

这会影响应用程序中的所有屏幕。如果您只想更改一个视图，则应在onAppear中添加这些行，然后在离开该视图时使用onDisappear撤消更改。（将nil用作两者的值似乎会将它们重置为默认值） - RickSanchez725

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

- Rufat Mirza

---

它现在不起作用，但是@Achraf的版本在init()中可以运行。我不知道为什么... - omusubi

这将全局设置外观。 - jonye._.jin

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

以下是我的输出结果：

- Mahmudur Rahman

---

你是如何在内容下方添加指示点的？ - Danielson

为SliderTabView()留出足够的空间。 - Mahmudur Rahman

Answer 4

如果您从UIKit中使用SwiftUI，则有一种更精细的方法来更新UIPageControl的外观。

// SwiftUI with with UIPageControl
struct MyView: View { ... }

import SwiftUI
import UIKit

final class MyViewContainerController: UIHostingController<MyView> {
    init() {
        let view = MyView()
        super.init(rootView: view)
    }

    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let containerTypes = [MyViewContainerController.self]
        let appearance = UIPageControl.appearance(whenContainedInInstancesOf: containerTypes)
        appearance.currentPageIndicatorTintColor = .systemBlue
        appearance.pageIndicatorTintColor = .systemIndigo
    }
}

- podkovyr

Answer 5

如果你只是不想在SwiftUI上搞UIKit，或者你需要在初始化后给出颜色： 自己创建吧！完全掌控样式

@State private var tabSelection = 0

var body: some View {
 ZStack(alignment:.bottom){
    TabView(selection: $tabSelection.animation()){
                                Text("Slide 1")
                                    .frame(maxWidth: .infinity)
                                    .tag(0)
                                Text("Slide 2")
                                    .frame(maxWidth: .infinity)
                                    .tag(1)
                                Text("Slide 3")
                                    .frame(maxWidth: .infinity)
                                    .tag(2)
                            }
                            .aspectRatio(1, contentMode: .fit)
                            .frame(maxWidth: .infinity)
                            .tabViewStyle(.page(indexDisplayMode: .never))
     HStack(spacing: 6){
              ForEach(0..<3) { i in
                  Image(systemName: "circle.fill")
                      .font(.system(size: 9))
                      .foregroundStyle(tabSelection == i ? .black : .gray)
               }
     }
                            .padding(.bottom)
 }
}

- Fran