web-dev-qa-db-ja.com

SwiftUI-TabBarアイコンの色を変更する

SwiftUIでTabBarの色を変更できません。私は、TabbedView、Image/Text、およびStackでそれを試します。何もうまくいきません。

.foregroundColorを使用しても機能しません。

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

ティントカラーのUIImageで初期化するImageの拡張を作成しました。

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

現在、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")
            }
        }
    }
}
1
Ketan Odedra

ITabBar.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の色を変更します

多くのオプションを試した後、これは私にとってうまくいきました。

0
Ankit