在 SwiftUI 的 tabItems 中更改图像（图标）的颜色答案

【问题标题】：Change color of image (icon) in tabItems in SwiftUI在 SwiftUI 的 tabItems 中更改图像（图标）的颜色
【发布时间】：2020-07-03 08:05:58
【问题描述】：

如何在 SwiftUI 的 tabItems 中更改图像（图标）的颜色？

我尝试了很多东西，但没有任何效果......

谢谢

这是我的测试代码：

import SwiftUI

struct TestTabviewIconColor: View {

    var body: some View {
        TabView {
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                        .foregroundColor(.red)
                        .accentColor(.red)
                        .colorMultiply(.red)
                    Text("First")
            }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
                }
        }
        .font(.headline)
    }
}

struct TestTabviewIconColor_Previews: PreviewProvider {
    static var previews: some View {
        TestTabviewIconColor()
    }
}

【问题讨论】：

标签： xcode swiftui tabview tabitem

【解决方案1】：

如果您希望在选择选项卡时使用不同的 TabBar 按钮颜色，那么我有理由相信 Apple 提供的控件不会为您做到这一点。

您需要自行控制。这是相当简单的。有关具有三个选项卡的示例，请参见下面的代码。如果您使用固定数量的选项卡，此方法可能适合您。并且这些原则可以应用于使用@ViewBuilder 等为更多和可变数量的选项卡构建控件。

我已经大致了解了库存 TAB 栏的样式。如果这对您的用例很重要，您需要进行一些改进以使其看起来完全相同。

struct TabLabel : View {

      var text : String
      var imageName : String
      var color : Color

      var body : some View {
            VStack() {
                  Image(systemName: imageName)
                  Text(text).font(.caption)
            }.foregroundColor(color)
      }
}

struct TabButton : View {
      @Binding var currentSelection : Int
      var selectionIndex : Int
      var label : TabLabel

      var body : some View {
            Button(action: { self.currentSelection = self.selectionIndex }) { label }.opacity(selectionIndex == currentSelection ? 0.5 : 1.0)
      }
}

struct CustomTabBarView<SomeView1 : View, SomeView2 : View, SomeView3 : View> : View {

      var view1 : SomeView1
      var view2 : SomeView2
      var view3 : SomeView3

      @State var currentSelection : Int = 1
      var body : some View {

            let label1 = TabLabel(text: "First", imageName:  "1.square.fill", color: Color.red)
            let label2 = TabLabel(text: "Second", imageName:  "2.square.fill", color: Color.purple)
            let label3 = TabLabel(text: "Third", imageName:  "3.square.fill", color: Color.blue)

            let button1 = TabButton(currentSelection: $currentSelection, selectionIndex: 1, label: label1)
            let button2 = TabButton(currentSelection: $currentSelection, selectionIndex: 2, label: label2)
            let button3 = TabButton(currentSelection: $currentSelection, selectionIndex: 3, label: label3)


            return VStack() {

                  Spacer()

                  if currentSelection == 1 {
                        view1
                  }
                  else if currentSelection == 2 {
                        view2
                  }
                  else if currentSelection == 3 {
                        view3
                  }

                  Spacer()

                  HStack() {
                        button1
                        Spacer()
                        button2
                        Spacer()
                        button3

                  }.padding(.horizontal, 48)
                        .frame(height: 48.0)
                        .background(Color(UIColor.systemGroupedBackground))
            }

      }
}


struct ContentView: View {

      var body: some View {

            let view1 = VStack() {
                  Text("The First Tab").font(.headline)
                  Image(systemName: "triangle").resizable().aspectRatio(contentMode: .fit).frame(width: 100)
            }

            let view2 = Text("Another Tab").font(.headline)
            let view3 = Text("The Final Tab").font(.headline)

            return CustomTabBarView(view1: view1, view2: view2, view3: view3)
      }

}


struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
            ContentView()
      }
}

【讨论】：

您好，顺便说一下，您的解决方案适用于系统图像...我的图像不是系统图像，而是我放在 Assets.xcassets 上的图标。为什么它不与他们合作？谢谢 Flincorp
我猜你的图片格式不正确。它们需要是“具有透明度、抗锯齿且没有使用蒙版定义其形状的阴影的单色图像”。 (developer.apple.com/design/human-interface-guidelines/ios/…) 您还可以将您的图标创建为自定义符号图像 (developer.apple.com/documentation/uikit/uiimage/…) - 然后它们的行为就像 SF 字体系统图像。
他们在普通的 Swift 上工作得很好......我将在 SwiftUI 和 IOS 13 及更高版本中使用 SF Symblos...... :-\。非常感谢您的帮助。

【解决方案2】：

要更改tabbar 的色调，您只需设置.accentColor() 修饰符，TabView 即可应用于项目。

【讨论】：

【解决方案3】：

尝试改变图像的渲染模式：在 Assets.xcassets 中选择图像，打开检查器视图并切换到属性检查器然后选择渲染为：模板图像

这对我有用。

【讨论】：