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

Posted 2023-02-24

【中文标题】更改选项卡式视图栏颜色 SwiftUI

【英文标题】：Change Tabbed View Bar Color SwiftUI

【发布时间】：2019-07-10 11:02:18

【问题描述】：

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

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

我已经尝试将背景设置为一种颜色，但它不会改变背景，并尝试将背景设置为图像，只是为了确定，但这也没有任何作用。

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

【参考方案1】：

SwiftUI 1.0 - 使用命名颜色

结合barTintColor 和isTranslucent

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

这是我命名的颜色：

设置为barTintColor

（如您所见，略微褪色）

设置为backgroundColor

（这会使条变暗一点）

将 barTintColor 和 isTranslucent 设置为 False

这个组合对我有用：

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

【讨论】：

这对我有用，但接受的答案没有；我曾尝试将背景设置为白色，并且接受的答案保持灰色（尽管比以前稍微轻一些）。谢谢！

我不得不使用：UITabBar.appearance().scrollEdgeAppearance = appeareance

【参考方案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"))
        
    

【讨论】：

只是一个警告，这个答案依赖于 SwiftUI 使用 UITabBar 来表示 TabbedView。这可能随时发生变化——例如，如果 Apple 创建了一个纯 swift 标签栏。

在那种情况下，我会更新答案或者有人会更新。

嗨@mumu，我试图这样做，但它以某种方式使标签颜色不透明。您对解决方法有什么建议吗？

@grey - 请参阅下面的答案。 UITabBar.appearance().barTintColor = UIColor.blue

【参考方案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)
    

【参考方案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)
    

【参考方案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() 只是之前创建的一些其他视图，将在点击时显示。

【参考方案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

【讨论】：

它有效（尤其是阴影颜色）！但您可以在 <.onappear> 块或视图 init()

上设置它

【参考方案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

【参考方案8】：

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