SwiftUI TabBar 颜色

Posted 2023-03-22

【中文标题】SwiftUI TabBar 颜色

【英文标题】：SwiftUI TabBar Color

【发布时间】：2019-10-05 15:22:31

【问题描述】：

如何设置标签栏颜色？例如，仅使用灰色条分配黑色结果。 这是针对 SwiftUI 的。 指定暗模式不是合适的解决方法。

    struct ContentView: View 

    @State private var selection = 1



    init() 
        UITabBar.appearance().backgroundColor = UIColor.blue 
        UITabBar.appearance().backgroundImage = UIImage()
        //UITabBar.appearance().isTranslucent = false
        //UITabBar.appearance().shadowImage = UIImage()

    

    var body: some View 

        TabView 
            ClockView()
                .tabItem 
                    Image("clock")
                    Text("Clock")
            .tag(0)
            PlanetsNowView()
                .tabItem 
                    Image("clock")
                    Text("Now")
            .tag(1)
            SettingsView()
                .tabItem 
                    Image("settings")
                    Text("Settings")
            .tag(2)
        
        .accentColor(.white)
        .opacity(1)
        //.environment(\.colorScheme, .dark)
    

【参考方案1】：

这是在 SwiftUI 视图中创建黑色标签栏的初始化程序。

import SwiftUI

struct ContentView: View 

  init() 
    setupTabBar()
  

  var body: some View 
    TabView 
      //Your tab bar items
    
  


//MARK: - Tab bar view appearance
extension ContentView 
  func setupTabBar() 
    UITabBar.appearance().barTintColor = .black
    UITabBar.appearance().tintColor = .blue
    UITabBar.appearance().layer.borderColor = UIColor.clear.cgColor
    UITabBar.appearance().clipsToBounds = true
  

如果你想根据用户的明暗模式设置来改变颜色：

打开“Assets.xcassets”文件夹 右键单击您的资产面板 选择“新配色” 打开新颜色的属性检查器面板 选择“外观” 选择“任何，黑暗”

您现在将有两个彩色方块，您必须在其中为第一个选择浅色模式颜色，为第二个选择深色模式颜色。

要在初始化标签栏时在代码中使用它，请将定义 barTintColor 的行更改为新的亮/暗模式颜色集的名称。

UITabBar.appearance().barTintColor = UIColor(named: "<your color name>")

【讨论】：

我试过这个，但是当应用程序进入后台或更新配色方案时（从深到浅，然后从浅到深），我遇到了一些问题。深色模式仍然使用浅色。在此处查看我的 SO 帖子以了解更多信息：***.com/questions/66445366/…

【参考方案2】：

在初始化器中添加UITabBar.appearance().barTintColor = UIColor.blue。

但在 Xcode 代码辅助中找不到。

struct ContentView: View 

    @State private var selection = 1

    init() 
        UITabBar.appearance().barTintColor = UIColor.blue
        UITabBar.appearance().tintColor = .green
    

    var body: some View 
        TabView (selection:$selection)
            Text("The First Tab")
                .tabItem 
                    Image(systemName: "1.square.fill")
                    Text("First")
            
            .tag(1)
            Text("Another Tab")
                .tabItem 
                    Image(systemName: "2.square.fill")
                    Text("Second")
            .tag(2)
            Text("The Last Tab")
                .tabItem 
                    Image(systemName: "3.square.fill")
                    Text("Third")
            .tag(3)
        
        .font(.headline)
        .accentColor(.white)
    

【讨论】：

这种方法会打破暗模式