更改选项卡式视图栏颜色 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

如果您还需要更改未选中项目的背景和顶行，那么您可以卡住。接下来是什么对我有用。我们将从这个开始： 在第一次迭代中，我更改了除顶行之外的所有内容：

struct ContentView: View {
    @ObservedObject var model: ContentViewModel

    init(model: ContentViewModel) { 
        self.model = model

        UITabBar.appearance().isTranslucent = false
        UITabBar.appearance().unselectedItemTintColor = UIColor(Color.primary)
        UITabBar.appearance().barTintColor = UIColor(Color("tab_background"))
    }

    var body: some View {
        NavigationView {
            TabView(selection: $model.selectedTab) {...}
        }
    }
}

但在那之后，我意识到我不能以同样的方式改变这条线的颜色。所以我将使用@atineoSE answer。但是要意识到设置 UITabBar.appearance().standardAppearance 将完全覆盖我之前的自定义。所以我需要更改它 - 这是最终代码和结果：

 init(model: ContentViewModel) {
    self.model = model

    let itemAppearance = UITabBarItemAppearance()
    itemAppearance.normal.iconColor = UIColor(Color.primary)

    let appeareance = UITabBarAppearance()
    appeareance.shadowColor = UIColor(Color("tab_separator"))
    appeareance.backgroundColor = UIColor(Color("tab_background"))
    appeareance.stackedLayoutAppearance = itemAppearance
    appeareance.inlineLayoutAppearance = itemAppearance
    appeareance.compactInlineLayoutAppearance = itemAppearance

    UITabBar.appearance().standardAppearance = appeareance
}

Answer 8

虽然这非常适合浅色模式，但当您切换到深色模式时，标签栏的背景会保持您选择的颜色。当暗模式为sl时，任何使条变黑的方法