SwiftUI Change TabItem Background Color Not Foreground When Selected

Question

In SwiftUI the TabView changes the foreground color of the TabItem when it is selected. But I need to keep the TabItem foreground one color (selected or not) and changed the background color. Here is an example:

TabView with TabItem background color changes

It appears that SwiftUI's TabView wants only the foreground color to change. I have tried using UITabBar.appearance(), but I have found no way to change the TabItem's background color dynamically. Here is an example:

struct ContentView: View {
var body: some View {
    TabView {
        FirstView()
            .tabItem {
                Label(title: {Text("First")}, icon: {Image(systemName: "1.lane")})
            }
        SecondView()
            .tabItem{
                Label(title: {Text("Second")}, icon: {Image(systemName: "2.lane")})
            }
        ThirdView()
            .tabItem{
                Label(title: {Text("Third")}, icon: {Image(systemName: "3.lane")})
            }
        FourthView()
            .tabItem{
                Label(title: {Text("Fourth")}, icon: {Image(systemName: "4.lane")})
            }
    }
    .tint(Color.white)
    .onAppear() {
        let appearance = UITabBar.appearance()
        appearance.isTranslucent = false
        appearance.backgroundColor = UIColor(.gray)
        appearance.tintColor = UIColor.white
        appearance.unselectedItemTintColor = UIColor.white
    }
}

Is this possible with SwiftUI's TabView or will I need to create a new fully custom TabView?

Answer 1

Please accept this as a proof of concept only. This code should be nowhere near a production app. The reason you are having issues setting the color of the background to the tabs is simple: there is no background. The view behind the tabs is in the safe area that you can control from the view that is contained in that tab:

struct TabviewBkgdColor: View {
    
    var body: some View {
        TabView {
            ZStack {
                HStack {
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.yellow)
                            .frame(width: 100, height:  100)
                    }
                    Spacer()
                }
                Text("FirstView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            .tabItem {
                Label(title: {Text("First")}, icon: {Image(systemName: "1.lane")})
            }
            ZStack {
                HStack {
                    Spacer()
                        .frame(width: 100)
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.purple)
                            .frame(width: 100, height:  100)
                    }
                    Spacer()
                }
                Text("SecondView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            .tabItem{
                Label(title: {Text("Second")}, icon: {Image(systemName: "2.lane")})
            }
            ZStack {
                HStack {
                    Spacer()
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.pink)
                            .frame(width: 100, height:  100)
                    }
                    Spacer()
                        .frame(width: 100)
                }
                Text("ThirdView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            
            .tabItem{
                Label(title: {Text("Third")}, icon: {Image(systemName: "3.lane")})
            }
            ZStack {
                HStack {
                    Spacer()
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.gray)
                            .frame(width: 100, height:  100)
                    }
                }
                Text("FourthView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            
            .tabItem{
                Label(title: {Text("Fourth")}, icon: {Image(systemName: "4.lane")})
            }
        }
    }
}

I would consider using a GeometryReader and calculating the exact dimensions of the background you want, but, as you can see, you can put anything you want behind tabs.