使 TabView 在 SwiftUI 上不透明会在顶部产生一个新视图

Question

大家好。我正在创建一个简单的 SwiftUI 应用程序，我希望我的应用程序的 TabView 具有自定义背景而不是半透明的。

为了实现这一点，我使用了 UITabBar.appearance().backgroundColor = Color 和 UITabBar.appearance().isTranslucent = false，它们应该正是这样做的，是的，它使条形图不是半透明的，而不是给条形图我选择的颜色, 它会在标签栏顶部生成一个新视图，该视图不应该存在，而且显然之前也不存在。

不改变标签栏的透明度和颜色

更改标签栏的透明度和颜色

您可以注意到出现的新视图。我想这是 isTranslucent 的问题，因为当我删除它时，新视图消失了。

有没有办法可以更改颜色并使栏不透明且不显示该视图？

感谢任何帮助。提前致谢。

我的代码

SceneDelegate（只有变色部分）

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

TabView

struct TabController: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection) {
            HomePageView()
                .tabItem {
                    Image(systemName: "house.fill")
                        .font(.title)
                }
                .tag(0)

            Text("Second View")
                .font(.title)
                .tabItem {
                    Image(systemName: "bell.fill")
                        .font(.title)
                }
                .tag(1)
        }
            .edgesIgnoringSafeArea(.top)
    }
}

Answer 1

这是正确的做法。

它也适用于 SwiftUI，因为 TabView 和 NavigationView 实际上是 UIHostedController for the legacy UITabBarController 和 UINavigationController。

编辑：刚刚观看了 UI 的现代化 iOS 13 这是方法：

let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor  .white]

然后在各种类型的外观上设置外观。

navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance

参考：https://developer.apple.com/videos/play/wwdc2019/224/

第二次编辑： 需要一种从 SwiftUI 视图访问 UINavigationController 的简洁方法。

与此同时，这将有助于：

extension UINavigationController {
    override open func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        navigationBar.standardAppearance = appearance
        navigationBar.compactAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
    }
}

extension UITabBarController {
    override open func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        tabBar.standardAppearance = appearance
    }
}

Answer 2

您可以使用此代码设置标签栏颜色。在SceneDelegate

中写入这段代码

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()
UITabBar.appearance().isTranslucent = true
UITabBar.appearance().backgroundColor = .black

在 TabBar 背景中，您可以设置任何其他颜色而不是黑色。它工作得很好。

内容视图：

TabView(selection: $selection) {
        Text("1st View")
            .tabItem {
                Image(systemName: "house.fill")
                    .font(.title)
            }
            .tag(0)

        Text("Second View")
            .font(.title)
            .tabItem {
                Image(systemName: "bell.fill")
                    .font(.title)
            }
            .tag(1)
    }
        .edgesIgnoringSafeArea(.top)

Answer 3

您可以访问 UINavigationController 或 UITabbarController 以使用 [https://github.com/siteline/SwiftUI-Introspect]

然后这样写

NavigationVIew {...}
.introspectNavigationController { (navController) in
    let coloredAppearance = UINavigationBarAppearance()
    coloredAppearance.configureWithOpaqueBackground()
    
    coloredAppearance.backgroundColor = backgroundColor
    coloredAppearance.backgroundImage?.withTintColor(backgroundColor)
    coloredAppearance.titleTextAttributes = [.foregroundColor: tintColor]
    coloredAppearance.largeTitleTextAttributes = [.foregroundColor: tintColor]
    coloredAppearance.shadowColor = shadowColor
    
    navController.navigationBar.compactAppearance = coloredAppearance
    navController.navigationBar.standardAppearance = coloredAppearance
    navController.navigationBar.scrollEdgeAppearance = coloredAppearance
    navController.navigationBar.tintColor =  tintColor
}

Answer 4

您可以使用这样的扩展程序：

extension UITabBarController {
    override open func viewDidLoad() {
        super.viewDidLoad()
        let appearance = UITabBarAppearance()
        appearance.backgroundColor = .black
        tabBar.standardAppearance = appearance
    }
}

注意重写的函数必须是viewDidLoad()。至少当它是 viewDidAppear(:) 函数时它对我不起作用。

使 TabView 在 SwiftUI 上不透明会在顶部产生一个新视图

Making TabView not translucent on SwiftUI produces a new view on top

uitabview

uitabbar

ios

swift

swiftui

我的代码