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

Как я могу изменить цвет изображения (значка) на вкладке «Элементы» в 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()
    }
}

См. также:  91 пакет ищет финансирование при установке React в laravel 8
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 3
  1. Flincorp

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

  2. Flincorp

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

    (Если вы хотите, чтобы все значки были того же цвета, что и @ 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()
          }
    }
    

    Но, ребята, я хочу изменить цвета всех изображений / значков, когда они не выбраны. Ваши решения работают только тогда, когда они выбраны !!! person Flincorp; 24.03.2020

    OK. Это было неясно для меня из исходного вопроса. (Возможно, для ясности стоит отредактировать заголовок / вопрос.) Я считаю, что вам придется использовать собственный элемент управления, чтобы получить желаемый эффект. Приведен пример кода, который делает это (с некоторыми шероховатостями). person Flincorp; 24.03.2020

  3. Flincorp

    Если вы хотите иметь разные цвета кнопок 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 person Flincorp; 26.03.2020

    Я предполагаю, что ваши изображения отформатированы неправильно. Они должны быть монохроматическими изображениями с прозрачностью, сглаживанием и без тени, использующей маску для определения своей формы. (developer.apple.com/ design / human-interface -guidelines / ios /). Вы также можете создавать свои значки как изображения пользовательских символов (developer.apple.com/documentation/uikit/uiimage/) — тогда они будут вести себя как системные изображения SF Font. person Flincorp; 27.03.2020

    Они отлично работали на обычном Swift … Я буду использовать SF Symblos для SwiftUI и IOS 13 и более поздних версий ….: — \. Большое спасибо за Вашу помощь. person Flincorp; 27.03.2020

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: