如何更改每个图标的 TabView 颜色？

Question

我试过this尝试单独更改选项卡图标的颜色，但由于某种原因，颜色会正确修改，然后点击返回图标后，它不会显示自定义颜色。

我将如何更改每个选项卡的选项卡项目图标（每个选项卡的颜色不同）？

这是包含我要修改的 TabView 的视图的代码。

struct MainView: View {
    @AppStorage("PendingOnboarding") var pendingOnboarding = true

    init() {
        UIPageControl.appearance().currentPageIndicatorTintColor = UIColor(Color.recyclepediaGreen)
    }
    
    var body: some View {
        NavigationView {
            ZStack {
                TabView {
                    CurbsideView()
                        .tabItem {
                            Label("Curbside", systemImage: "car.fill")
                        }
                    ItemsView()
                        .tabItem {
                            Label("Items", systemImage: "archivebox.fill")
                        }
                    LearnView()
                        .tabItem {
                            Label("Learn", systemImage: "info.circle.fill")
                        }
                    ContactUsView()
                        .tabItem {
                            Label("Contact Us", systemImage: "phone.fill.connection")
                        }
                }
                .accentColor(Color.recyclepediaBlue)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Image("Recyclepedia")
                            .resizable()
                            .scaledToFit()
                            .padding(.top, 5)
                            .padding(.bottom, 5)
                    }
                }
            }
            .popup(isPresented: $pendingOnboarding, dragToDismiss: false, closeOnTap: false, backgroundColor: Color.white) {
                OnboardingView(pendingOnboarding: $pendingOnboarding)
            }
        }
    }
}

Answer 1

最简单的解决方案是使用 returns 和 Color 的枚举。像这样：

struct TestTabviewIconColor: View {
    
    @State var pageIndex: TabColor = .red
    
    var body: some View {
        VStack {
            Text("Current page is \(pageIndex.rawValue)")
            TabView(selection: $pageIndex) { // Use the Tabview(selection:) init
                Text("The First Tab: \(pageIndex.color().description)")
                    .tabItem {
                        Image(systemName: "1.square.fill")
                        Text("First")
                    }
                    .tag(TabColor.red)
                
                Text("Another Tab: \(pageIndex.color().description)")
                    .tabItem {
                        Image(systemName: "2.square.fill")
                        Text("Second")
                    }
                    .tag(TabColor.green)
                
                Text("The Last Tab: \(pageIndex.color().description)")
                    .tabItem {
                        Image(systemName: "3.square.fill")
                        Text("Third")
                    }
                    .tag(TabColor.teal)
            }
            .accentColor(pageIndex.color())
            .font(.headline)
        }
    }
}

// Define your enum here
enum TabColor: Int {
    case red = 0
    case green = 1
    case teal = 2
    
    func color() -> Color {
        switch self {
        case .red:
            return .red
        case .green:
            return .green
        case .teal:
            return .teal
        }
    }
}

作为奖励，您可以 select 您的选项卡，只需调用以下命令即可使用它的颜色：

pageIndex = .green

如何更改每个图标的 TabView 颜色？

How to change TabView color for each icon?

swiftui

swiftui-tabview