SwiftUI：TabView 动态强调颜色

Posted 2023-02-23

【中文标题】SwiftUI：TabView 动态强调颜色

【英文标题】：SwiftUI: TabView dynamic accentColor

【发布时间】：2021-11-30 11:02:49

【问题描述】：

在我的应用中，我有 2 个标签。

第一个标签视图有白色背景。

第二个 tabView 有黑色背景。

因此，我想根据所选择的 TabBarItem 更改标签栏样式

选择Tab1时，我希望Tab栏图标颜色为：

 selected - black, unselected - grey

当tab2被选中时，我想将颜色改为：

selected - white, unselected - grey

我可以像这样使用accentColor 属性更改图标颜色：

TabView 
    FirstTabView()
         .tabItem 
             Image("tab1").renderingMode(.template)
          
    SecondTabView()
        .tabItem 
              Image("tab2").renderingMode(.template)
         
 .accentColor(.white)

但是当用户点击第二个标签时如何改变图标颜色？

我尝试过类似的方法：

@State private var selection = 0

TabView(selection: $selection) 
        FirstTabView()
             .tabItem 
                 Image("tab1").renderingMode(.template)
              
        SecondTabView()
            .tabItem 
                  Image("tab2").renderingMode(.template)
             
     .accentColor(selection == 0 ? .black : .white)

但它不起作用

【参考方案1】：

要更新标签项TabView应该重建，所以尝试

这是一个完整的演示（颜色已更改以提高可见性）。使用 Xcode 13 / ios 15 测试

struct DemoView: View 
    @State private var selection = 0

    var body: some View 
        TabView(selection: $selection) 
            Text("FirstTabView")
                .tabItem 
                    Image(systemName: "1.circle").renderingMode(.template)
                .tag(0)
            Text("SecondTabView")
                .tabItem 
                    Image(systemName: "2.circle").renderingMode(.template)
                .tag(1)
        
        .accentColor(selection == 0 ? .red : .blue)
        .id(selection)                        // << here !!

    

【讨论】：

不起作用（（

奇怪，尝试改变修饰符的顺序。

还是不行

您似乎没有设置标签，因此您的选择并没有真正改变。通过完整的测试演示查看更新。