Изменить цвет изображения (иконки) в tabItems в SwiftUI

Question

Как мне изменить цвет изображения (иконки) во вкладке Элементы в SwiftUI?

Я пробовал так много вещей, но ничего не получается ...

Спасибо

Вот мой тестовый код:

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

Answer 1

Я читаю этот вопрос как желающий разных цветов для разных вкладок. Это достижимо с помощью механизма PreferenceKey. Приведенный ниже код делает значок панели вкладок и текст красным для первой вкладки, зеленым для второй и синим для третьей. (Я пытался использовать .onAppear для изменения @State var tabColor, но это работало в Preview, но не на устройстве. Механизм PreferenceKey работает как на устройстве, так и в Preview.)

(Если вы хотите, чтобы все значки были того же цвета, что и @ Mac3n - и посмотрите также на тот же вопрос, на который уже дан ответ: Изменить цвет выбора вкладки в TabBar SwiftUI ).

import SwiftUI

struct TestTabviewIconColor: View {

      @State var tabColor = Color.clear

      var body: some View {

            TabView() {

                  Text("The First Tab: \(tabColor.description)")
                        .tabItem {
                              Image(systemName: "1.square.fill")
                              Text("First")
                  }.preference(key: ColorPreferenceKey.self, value: Color.red)

                  Text("Another Tab: \(tabColor.description)")
                        .tabItem {
                              Image(systemName: "2.square.fill")
                              Text("Second")
                  }.preference(key: ColorPreferenceKey.self, value: Color.green)

                  Text("The Last Tab: \(tabColor.description)")
                        .tabItem {
                              Image(systemName: "3.square.fill")
                              Text("Third")
                  }.preference(key: ColorPreferenceKey.self, value: Color.blue)

            }
            .onPreferenceChange(ColorPreferenceKey.self, perform: {  color in self.tabColor = color })
            .accentColor(tabColor)
            .font(.headline)
      }
}

struct ColorPreferenceKey: PreferenceKey {
      static var defaultValue: Color = Color.clear

      static func reduce(value: inout Color, nextValue: () -> Color) {
            value = nextValue()
      }
}

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

Answer 2

Если вы хотите иметь разные цвета кнопок TabBar при выборе вкладки, я уверен, что предоставленный Apple элемент управления не сделает это за вас.

Вам нужно будет прокрутить свой собственный контроль. Это довольно просто. Для примера с тремя вкладками см. Код ниже. Если вы работаете с фиксированным количеством вкладок, этот подход может сработать для вас. И принципы могут быть применены для создания элемента управления для большего количества и переменного количества вкладок, используя @ViewBuilder et c.

Я приблизил стилизацию стандартной панели 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()
      }
}

Answer 3

Чтобы изменить оттенок цвета tabbar, вам просто нужно установить модификатор .accentColor() для применения TabView к элементам.