SwiftUI 标签栏颜色

Question

如何设置标签栏颜色？例如，仅使用灰色条分配黑色结果。这是针对 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)
    }
}

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

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