TabView 的 TabItem 的选定选项卡图像在 SwiftUI 中始终为蓝色

Question

I'm playing around with a TabView in SwiftUI and I'm able to set the image of a tab that is not currently selected, however, setting the image for a selected tab doesn't seem to be working. All I see is a blue circle instead of a black one.

Here is my code:

import SwiftUI

struct MainView: View {
    @State private var selected = 0

    var body: some View {

        TabView(selection: $selected){
            Text("First View")
                .tabItem {
                    Image(self.selected == 0 ? "eclipse-tab-icon-black" : "eclipse-tab-icon-grey")
                        .renderingMode(.original)
            }.tag(0)
            Text("Second View")
                .tabItem {
                    Image(systemName: "2.circle")
            }.tag(1)
            Text("Third View")
                .tabItem {
                    Image(systemName: "3.circle")
            }.tag(1)
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

As you can see here, the non-selected tab is grey. This is correct:

But the selected tab is blue, instead of black:

Assets:

Asset settings:

Answer 1

If you are supplying your own PNG images for tab views, use rendering mode template so that the default colors are applied to the non-background bits of your images.

If found this easiest to do in the Assets folder. Or you can it in code as:

Image("myImage").renderingMode(.template)

Answer 2

You do not set a selected and not selected icon on your TabView, you only provide one image and it gets rendered in secondary colour when not selected and in accent colour when selected. If you want your selected tab icons to be black you could set the accent on colour on TabView to black, but it is against Apple's design guidelines and you will change the accent colour of all subviews as well.

Answer 3

Use accentColor of TabView

TabView(selection: $selected) {
        SwiftUIMyData()
            .tabItem {
                Image(systemName: "rectangle.fill.on.rectangle.fill")
                Text("My Data")
        }
        .tag(0)
        SwiftUIMyContent()
            .tabItem {
                Image(systemName: "desktopcomputer")
                Text("My Content")
        }
        .tag(1)
        }.accentColor(.black)

Answer 4

Change the rendering mode of your image to original. Either on the xcassets folder, or with the renderingMode modifier in code.

Answer 5

use.accentColor(.black)

import SwiftUI

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            Text("First View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image("first")
                        Text("First")
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image("second")
                        Text("Second")
                    }
                }
                .tag(1)
        }.accentColor(.black)
    }
}

tabItem (black) demo