SwiftUI 2.0 - TabView 标签栏颜色不符合当前的配色方案(深色或浅色模式) [英] SwiftUI 2.0 - TabView tab bar colors don't respect the current color scheme (dark or light mode)

问题描述

我拼命地尝试让我的标签栏颜色尊重当前的配色方案.当应用程序启动时，颜色是正确的.但是如果我切换深色和浅色模式，颜色不会切换回正确的颜色.始终应用灯光模式颜色.代码在图片下方(为演示简化).

I'm desperately trying to have my tab bar colors respect the current color scheme. When the app is launched, the Colors are correct. But if I toggle dark and light mode, the colors don't switch back to the correct ones. The light mode colors are always applied. The code is available below the images (simplified for the demo).

颜色在 Assets.xcassets 目录(任意/浅色/深色)中指定.

Colors are specified in the Assets.xcassets catalog (Any / Light / Dark).

import SwiftUI

struct TabBarColorTest: View {
    
    @Environment(\.colorScheme) var colorScheme
    
    init() {
        UITabBar.appearance().isTranslucent = true
        UITabBar.appearance().tintColor = UIColor(named: "TabBarTint")
        UITabBar.appearance().unselectedItemTintColor = UIColor(named: "TabBarUnselected")
        UITabBar.appearance().barTintColor = UIColor(named: "TabBar")
        UITabBar.appearance().backgroundColor = UIColor(named: "TabBar")
    }
    
    var body: some View {
        TabView {
            
            Text("Zero")
                .tabItem {
                    Label("Zero", systemImage: "0.square.fill")
                }
            
            Text("One")
                .tabItem {
                    Label("One", systemImage: "1.square.fill")
                }
        }
        .onChange(of: colorScheme, perform: { value in
            UITabBar.appearance().isTranslucent = true
            UITabBar.appearance().tintColor = UIColor(named: "TabBarTint")
            UITabBar.appearance().unselectedItemTintColor = UIColor(named: "TabBarUnselected")
            UITabBar.appearance().barTintColor = UIColor(named: "TabBar")
            UITabBar.appearance().backgroundColor = UIColor(named: "TabBar")
        })
    }
}

struct TabBarColorTest_Previews: PreviewProvider {
    static var previews: some View {
        TabBarColorTest()
    }
}

推荐答案

通过将选项卡项的色调颜色作为 SwiftUI 修饰符并简化选项卡栏的 UIKIt 配置的初始化，问题应该得到解决.在 Xcode 12.4 上测试，iOS 14 作为最低目标.

By having the tab item tint color as a SwiftUI modifier and simplifying the initialization of the UIKIt configuration for the tab bar, the issue should be fixed. Tested on Xcode 12.4 with iOS 14 as a minimum target.

struct ContentView: View {

  init() {
    UITabBar.appearance().barTintColor = .systemBackground
    UITabBar.appearance().unselectedItemTintColor = UIColor(named: "TabBarUnselected")
  }
  
  var body: some View {
    TabView {
      
      Text("Zero")
        .tabItem {
          Label("Zero", systemImage: "0.square.fill")
        }
      
      Text("One")
        .tabItem {
          Label("One", systemImage: "1.square.fill")
        }
    }
    .accentColor(Color("TabBarTint"))
  }
}

这篇关于SwiftUI 2.0 - TabView 标签栏颜色不符合当前的配色方案(深色或浅色模式)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！