Change Tabbed View Bar Color SwiftUI

问题

Does anyone know how to change the background colour of a tabbed view bottom bar?

I have set the accent colour which changed the colour of my icons when I select each tab bar item.

I have tried setting the background to a colour but it doesn't change the back, and tried setting background to an image just to be sure but that also doesn't do anything.

Wondering if I need to specifically access the bottom bar somehow and then set a property on that?

回答1:

Here is a solution. You can change appearance of the UITabBar and change the TabBar.

struct TabView: View {
    init() {
        UITabBar.appearance().backgroundColor = UIColor.blue
    }
    var body: some View {

        return TabbedView {
            Text("This is tab 1").tag(0).tabItemLabel(Text("tab1"))
            Text("This is tab 2").tag(1).tabItemLabel(Text("tab2"))
            Text("This is tab 3").tag(2).tabItemLabel(Text("tab3"))
        }
    }
}

回答2:

SwiftUI 1.0 - Using named colors

Combining barTintColor and isTranslucent

For some reason I wasn't getting the full color of my named color when I used just barTintColor or even backgroundColor. I had to include isTranslucent too.

Here is my named color:

Setting Just barTintColor

(As you can see, it is slightly faded)

Setting Just backgroundColor

(This darkens the bar a little bit)

Setting barTintColor & isTranslucent to False

This combination is what did it for me:

UITabBar.appearance().isTranslucent = false
UITabBar.appearance().barTintColor = UIColor(named: "Secondary")

回答3:

In the init() add UITabBar.appearance().barTintColor = UIColor.blue

struct ContentView: View {

    @State private var selection = 1

    init() {
        UITabBar.appearance().barTintColor = UIColor.blue
    }

    var body: some View {
        TabView (selection:$selection){
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
            }
            .tag(1)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }.tag(2)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }.tag(3)
        }
        .accentColor(.white)
    }
}

回答4:

TabbedView has been deprecated, for now you can try:

struct AppTabbedView: View {

    @State private var selection = 3

    init() {
        UITabBar.appearance().backgroundColor = UIColor.blue
    }
    var body: some View {
        TabView (selection:$selection){
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
            }
            .tag(1)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }.tag(2)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }.tag(3)
        }
        .font(.headline)
    }
}

回答5:

This one looks like a working solution based on the latest version of Swift and SwiftUI

struct TabBar: View {
    init() {
        UITabBar.appearance().barTintColor = UIcolor.black

    var body: some View {
        TabView {
            HomeView().tabItem {
                Image(systemName: "house.fill")
                Text("Home")
            }
            MapView().tabItem {
                Image(systemName: "mappin.circle.fill")
                Text("Map")
            }
        }
        .edgesIgnoringSafeArea(.top)
    }
}

where HomeView() and MapView() are just some other views created earlier that will be displayed on tap.

回答6:

While this is great for light mode, when you switch to dark mode, the background for the tabbar stays the color you have selected. Any way to make the bar go to black when dark mode is sl

来源：https://stackoverflow.com/questions/56969309/change-tabbed-view-bar-color-swiftui