SwiftUI - TabView with NavigationView generates gray area

问题

I have some problems with my tabbed view when I set isTranslucent to false in combination with a NavigationView.

Does anyone know how to fix this? The problem is shown in the attached image.

I need translucent set to false otherwise I can't get the dark color.

enter image description here

回答1:

You can set backgroundColor. Don't set isTranslucent to false or it will create these artefacts you mentioned.

UITabBar.appearance().backgroundColor = .black
UINavigationBar.appearance().backgroundColor = .black

It becomes much darker. It isn't completely opaque though.

Edit: Just watched Modernizing Your UI for iOS 13 This is the way to do it :

The TabView and NavigationView are actually UIHostedController for the legacy UITabBarController and UINavigationController:

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

Then set the appearance on the various type of appearance.

tabBar.standardAppearance = appearance

2nd Edit:

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

There should be a cleaner way to get to both tabBar and navBar.

Reference: https://developer.apple.com/videos/play/wwdc2019/224/

回答2:

It's easier than all that, just delete the next line:

UITabBar.appearance().isTranslucent = false

来源：https://stackoverflow.com/questions/58017776/swiftui-tabview-with-navigationview-generates-gray-area

标签

swift

xcode

user-interface

swiftui

ios13