SwiftUI-更改TabBar图标颜色

Question

我无法在SwiftUI中更改TabBar颜色。我尝试使用TabbedView，图像/文本和堆栈。什么都不适合我。

使用.foregroundColor不起作用。

TabbedView(selection: $selection){
 TextView()
  .tag(0)
  .tabItemLabel(
 VStack {
  Image("Calendar")
   .foregroundColor(.red)
  Text("Appointments")
   .foregroundColor(.red)
  }
 ).foregroundColor(.red)
}.foregroundColor(.red)

Answer 1

解决方案1

用 renderingMode(.template)

struct MainView: View {

    var body: some View {
       TabView {
            LoginView().tabItem {
                VStack {
                    Text("Login")
                    Image("login").renderingMode(.template)
                }
            }

            HomeView().tabItem {
                VStack {
                    Text("Home")
                    Image("home").renderingMode(.template)
                }
            }
        }.accentColor(.orange)
    }
}

解决方案2

制作 tabItem 类型

enum TabViewItemType: String {
    case login  = "login"
    case home   = "home"
    case search = "search"

    var image: Image {
        switch self {
        case .login:  return Image("login")
        case .home:   return Image("home")
        case .search: return Image("search")
        }
    }

    var text: Text {
        Text(self.rawValue)
    }
}

struct MainView: View {

    var body: some View {
        TabView {
            LoginView()
                .tabItem { TabViewItem(type: .login) }

            HomeView()
                .tabItem { TabViewItem(type: .home) }

            SearchView()
                .tabItem { TabViewItem(type: .search) }

        }.accentColor(.orange)
    }
}

struct TabViewItem: View {

    var type: TabViewItemType

    var body: some View {
        VStack {
            type.image.renderingMode(.template)
            type.text

        }
    }
}

Answer 2

用途accentColor：

        TabView(selection: $selection) {
            NavigationView {
                HomeView()
            }.navigationBarTitle("Home")
                .tabItem {
                    VStack {
                        if selection == 0 {
                            Image(systemName: "house.fill")
                        } else {
                            Image(systemName: "house")
                        }
                        Text("Home")
                    }
                }
            .tag(0)
            NavigationView {
                SettingsView()
            }.navigationBarTitle("Settings")
                .tabItem {
                    VStack {
                        Image(systemName: "gear")
                        Text("Settings")
                    }
                }
                .tag(1)
        }.accentColor(.purple)

Answer 3

您可以使用UITabBar.appearance()进行一些自定义，直到 Apple 提供更标准的 SwiftUI TabView更新方式

更改 TabItem（文本 + 图标）颜色

init() {
  UITabBar.appearance().unselectedItemTintColor = UIColor.white
}

更改 TabView 背景颜色

init() {
  UITabBar.appearance().backgroundColor = UIColor.red
  UITabBar.appearance().backgroundImage = UIImage()
}

整体代码如下所示 -

struct ContentView: View {

   init() {
       // UITabBar customization
   }

  var body: some View {
     TabView(selection: $selection) {
         FirstTabView()
              .tabItem {
                  VStack {
                     Image(systemName: "map")
                     Text("Near Me")
                  }
              }
     }
  }

}

使用.accentColor修饰符更改所选tabItem 的颜色

在尝试了许多选项后，这对我有用..

Answer 4

在 iOS16 上，.accentColor(Color) 已被弃用。您可以在 TabView 上使用 .tint(Color) 来代替。

 TabView {
        Text("First Tab")
            .tabItem {
                Image(systemName: "1.circle")
                Text("First")
            }
 }.tint(Color.yellow)

Answer 5

我想你可以只使用 TabView 的重音颜色吗？它对我有用:]

TabView {
...
}.accentColor(Color.red)

Answer 6

目前SwiftUI还没有直接的方法。

UIKit除非引入任何新的解决方案，否则我们必须使用该方法SwiftUI。

尝试下面的代码：

struct ContentView: View {

    init() {
        UITabBar.appearance().backgroundColor = UIColor.purple
    }

    var body: some View {
        return TabbedView {
            Text("This is tab 1")
                .tag(0)
                .tabItem {
                    Text("tab1")
            }
            Text("This is tab 2")
                .tag(1)
                .tabItem {
                    Text("tab1")
            }
            Text("This is tab 3")
                .tag(2)
                .tabItem {
                    Text("tab1")
            }
        }
    }
}