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

Question

有谁知道如何更改标签视图底部栏的背景颜色？

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

我已经尝试将背景设置为一种颜色，但它并没有改变背面，并尝试将背景设置为图像以确保万无一失，但这也没有任何作用。

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

Answer 1

这是一个解决方案。可以把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 2

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

这个看起来像是基于最新版本 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 5

SwiftUI 1.0 - 使用命名颜色

合并 `barTintColor` 和 `isTranslucent`

出于某种原因，当我只使用 barTintColor 甚至 backgroundColor 时，我并没有得到我命名颜色的完整颜色。我也必须包括 isTranslucent。

这是我命名的颜色：

设置只是`barTintColor`

（如您所见，略有褪色）

设置只是`backgroundColor`

（这会使条变暗一点）

将 `barTintColor` 和 `isTranslucent` 设置为 False

这个组合对我有用：

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

Answer 6

虽然这对于浅色模式非常有用，但当您切换到深色模式时，标签栏的背景会保持您选择的颜色。当暗模式为 sl

时，任何使条变黑的方法

Answer 7

在显示 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 8

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

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 。但是请注意，设置 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
}

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

Change Tabbed View Bar Color SwiftUI

swiftui

SwiftUI 1.0 - 使用命名颜色

合并 `barTintColor` 和 `isTranslucent`

设置只是`barTintColor`

设置只是`backgroundColor`

将 `barTintColor` 和 `isTranslucent` 设置为 False

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

Change Tabbed View Bar Color SwiftUI

swiftui

SwiftUI 1.0 - 使用命名颜色

合并 barTintColor 和 isTranslucent

设置只是barTintColor

设置只是backgroundColor

将 barTintColor 和 isTranslucent 设置为 False

合并 `barTintColor` 和 `isTranslucent`

设置只是`barTintColor`

设置只是`backgroundColor`

将 `barTintColor` 和 `isTranslucent` 设置为 False