In a TabView/TabItem, how can I change the image for the highlighted item and don't use the accent color?

Question

Given

TabView {
    WelcomeView()
        .tabItem {
            Label("Home", systemImage: "house")
        }
}        

renders the TabView in the default color and, when active, the highlighted color:

and active:

I would like to change the icon to another one when highlighted instead, like house.circle, and not using the accent color, for leanness, like so:

Is there a smart way I am missing to use the default TabView behavior and not rebuild its logic and state handling? I would like to keep the code as simple as possible since I am a bloody beginner.

Thanks y'all for your help!

Answer 1

You can use "selection" property of TabView to change image and "gray" color as accentColor. The following code may help you.

import SwiftUI

struct Sample: View {
    @State private var selection = true
    var body: some View {
        TabView(selection: $selection) {
            Text("Home")
                .tabItem {
                    if selection == true {
                        Image(systemName: "house.circle")
                    }
                    else {
                        Image(systemName: "house")
                    }
                    Text("Home")
                }
                .tag(true)
            Text("Sign UP")
                .tabItem {
                    if selection == false {
                        Image(systemName: "person")
                    }
                    else {
                        Image(systemName: "person.2.slash")
                    }
                    Text("Account")
                }
                .tag(false)
        }
        .accentColor(.gray)
    }
}