更改选项卡式视图栏颜色SwiftUI

Question

有人知道如何更改选项卡式视图底部栏的背景颜色吗？

我设置了强调颜色，当我选择每个选项卡栏项目时，它改变了图标的颜色。

我尝试将背景设置为颜色，但不会改变背面，并尝试将背景设置为图像，只是为了确保但这也无济于事。

想知道是否需要以某种方式专门访问底部栏，然后在其上设置属性吗？

Answer 1

SwiftUI 1.0-使用命名的颜色

结合barTintColor和isTranslucent

由于某些原因，当我仅使用barTintColor甚至是backgroundColor时，都无法获得命名颜色的完整颜色。我也必须包括isTranslucent。

这是我命名的颜色：

仅设置barTintColor

（如您所见，它略有褪色）

仅设置backgroundColor

（这会使条形稍微变暗）

将barTintColor和isTranslucent设置为False

这种组合对我有帮助：

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

Answer 2

这是一个解决方案。您可以更改UITabBar的appearance并更改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"))
        }
    }
}

Answer 3

在init（）中添加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)
    }
}

Answer 4

TabbedView 已被弃用，现在您可以尝试：

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)
    }
}

Answer 5

这看起来像是一个基于最新版本的Swift和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)
    }
}

其中HomeView（）和MapView（）只是先前创建的其他一些视图，将在轻按时显示。

Answer 6

在显示 TabView 之前设置 UITabBar 的颜色很重要。如果不使用带有初始化程序的自定义视图，则必须确保在加载 TabView 之前调用它，例如在 AppDelegate 中（在项目生命周期中使用“UIKit App Delegate”时）或以其他方式为“SwiftUI App”生命周期添加它）。

然后您可以使用 UITabBarAppearance() 对象对其进行配置，例如：

let tabBarAppeareance = UITabBarAppearance()
tabBarAppeareance.shadowColor = .gray // For line separator of the tab bar
tabBarAppeareance.backgroundColor = .black // For background color
UITabBar.appearance().standardAppearance = tabBarAppeareance

Answer 7

虽然这对于浅色模式非常有用，但是当您切换到深色模式时，选项卡栏的背景将保持您选择的颜色。暗模式为sl时，任何使条变为黑色的方法