非半透明的 UITabBar 创建奇怪的灰色条答案

【问题标题】：Non-translucent UITabBar creates strange grey bar非半透明的 UITabBar 创建奇怪的灰色条
【发布时间】：2020-09-02 08:52:46
【问题描述】：

使用 SwiftUI，我在 TabBar 内嵌套了多个 NavigationView。这样做的原因是我想更改每个 NavigationView 的标题以反映所选选项卡，但我找不到其他方法来做到这一点。此外，UITabBar 的背景颜色为纯白色对我的客户来说非常重要。为此我设置了UITabBar.appearance().isTranslucent = false，否则显示为灰色。但是，只要我这样做，我就会在 UITabBar 上方看到一条奇怪的灰线。我怎样才能摆脱它？

struct ContentView: View {
    
    init() {
            
        UITabBar.appearance().backgroundColor = UIColor.white
        UITabBar.appearance().isTranslucent = false
    }
    
    var body: some View {
        TabView {

        NavigationView {
            
            Text("First tab")
                .padding(10)
                .background(Color.white)
                .navigationBarTitle(Text("First tab"), displayMode: .inline)
        }
        .tabItem {
            Text("First tab")
        }
            
        NavigationView {
            
            Text("Second tab")
                .padding(10)
                .background(Color.white)
                .navigationBarTitle(Text("Second tab"), displayMode: .inline)
        }
        .tabItem {
            Text("Second tab")
        }
        }
    }
}

【问题讨论】：

标签： swift swiftui

【解决方案1】：

作为 Asperi 答案中选项的另一种选择，您可以替换以下代码行：

UITabBar.appearance().backgroundColor = UIColor.white
UITabBar.appearance().isTranslucent = false

这些：

let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithOpaqueBackground()
tabBarAppearance.backgroundColor = UIColor.white
UITabBar.appearance().standardAppearance = tabBarAppearance

它具有相同的效果，但使用 configureWithOpaqueBackground() 而不是将 isTranslucent 设置为 false 会保留 NavigationView 所依赖的约束。

【讨论】：

这应该是公认的答案。谢谢！

【解决方案2】：

这个

        UITabBar.appearance().isTranslucent = false

是一种破坏 NavigationView 布局的 hack（关于 TabView 内部实现的未记录假设）（删除 NavigationView 具有活动约束的视图）

以下是可能的解决方法：

只使用一个根NavigationView

struct ContentView: View {

    init() {

        UITabBar.appearance().backgroundColor = UIColor.white
        UITabBar.appearance().isTranslucent = false
    }

    @State private var title = ""
    var body: some View {

        NavigationView {
            TabView {

                Text("First tab")
                    .padding(10)
                    .background(Color.white)
                    .onAppear {
                        self.title = "First tab"
                    }
                    .tabItem {
                        Text("First tab")
                }

                Text("Second tab")
                    .padding(10)
                    .background(Color.white)
                    .onAppear {
                        self.title = "Second tab"
                    }
                    .tabItem {
                        Text("Second tab")
                }
            }
            .navigationBarTitle(Text(title), displayMode: .inline)
        }
    }
}

创建自定义标签栏（使用 HStack 的 Button 视图）

【讨论】：