SwiftUI - 更改 TabBar 图标颜色答案

【问题标题】：SwiftUI - Change TabBar Icon ColorSwiftUI - 更改 TabBar 图标颜色
【发布时间】：2019-11-28 07:03:07
【问题描述】：

我无法在 SwiftUI 中更改 TabBar 颜色。我尝试使用 TabbedView、图像/文本和堆栈。没有什么对我有用。

使用.foregroundColor 不起作用。

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

【问题讨论】：

标签： swift view colors tabbar swiftui

【解决方案1】：

目前SwiftUI 没有直接的方法。

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

试试下面的代码：

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

【讨论】：

【解决方案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)

【讨论】：

它可以工作，但这意味着整个应用程序现在的重音颜色是紫色
@tuandapen 只是在视图（HomeView、SettingsView）上使用 .accentColor(.none) 并且它不会传播

【解决方案3】：

我为 Image 做了一个扩展，它使用带有色调的 UIImage 进行初始化：

extension Image {
    init(_ named: String, tintColor: UIColor) {
        let uiImage = UIImage(named: named) ?? UIImage()
        let tintedImage = uiImage.withTintColor(tintColor,
                                                renderingMode: .alwaysTemplate)
        self = Image(uiImage: tintedImage)
    }
}

【讨论】：

【解决方案4】：

您可以使用 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 修饰符来改变 selected tabItem 的颜色

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

【讨论】：

【解决方案5】：

解决方案 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

        }
    }
}

【讨论】：

很好的答案！甚至可以更短一点：var image: Image { return Image(self.rawValue) }
我们可以通过将选项卡项的所有资产设置为使用资产目录中的templaterendingMode 来进一步改进，以便进一步整理。

【解决方案6】：

我认为你可以只使用 TabView 的accentColor，它对我有用：]

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

【讨论】：

【解决方案7】：

如果您需要使用 SwiftUI 界面为整个应用程序设置强调色，您只需在 Assets.xcassets 文件中定义 AccentColor，如下图所示。 TabBar 图标无需任何额外代码即可获得。

【讨论】：