web-dev-qa-db-fra.com

Barre de navigation et barre d'état SwiftUI - Rendez-les de la même couleur

J'ai une nouvelle application qui aura idéalement une barre de navigation bleu foncé solide en haut qui s'étend derrière la barre d'état. C'était pénible de rendre cette couleur opaque et la bonne couleur de bleu, mais j'ai finalement compris comment le faire fonctionner en mettant ce qui suit dans le init () de ma vue qui contient le NavigationView:

init() {
    UINavigationBar.appearance().barTintColor = UIColor(named: "primaryBlue")
    UINavigationBar.appearance().backgroundColor = UIColor(named: "primaryBlue")
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    UINavigationBar.appearance().isOpaque = true
}

Cela se traduit par une barre de navigation qui ressemble à ceci. Elle est bleue, mais la barre d'état est toujours blanche avec du texte noir (je veux qu'elle soit bleu foncé avec du texte blanc).

enter image description here

Ensuite, je savais que je devais rendre le texte de la barre d'état "light content", et j'ai trouvé une bonne solution d'Idiqual ici , mais cela change simplement la couleur "thème" de la barre, et il ne semble pas y avoir de moyen de changer la couleur d'arrière-plan en utilisant cette méthode. Après la mise en œuvre, j'ai maintenant une barre d'état qui est prête à afficher du texte clair sur un fond sombre, mais je ne parviens pas à comprendre comment faire en sorte que l'arrière-plan bleu foncé de NavigationView s'étende jusqu'en haut de la barre d'état. Donc ce qu'il me reste est ceci:

enter image description here

J'ai essayé plusieurs choses, telles que l'ajout de .edgesIgnoringSafeArea (.top) à plusieurs endroits différents, y compris le crochet fermant de NavigationView et aussi le TabView que j'ai dans la vue parent, mais rien ne fonctionne. Est-ce que je rate quelque chose de simple? Comment étendre la couleur de la barre de navigation vers le haut de l'écran? Voici le code de ma vue Nav. Cette structure s'appelle "FetchFrontPageArticles":

var body: some View {
    NavigationView {
        VStack {
            List(self.fetcher.articles) { article in
                ...
            }.navigationBarTitle("", displayMode: .inline)
            .navigationBarItems(
                leading: Text(""),
                trailing: NavProfile()
            )
        }
    }
}

"FetchFrontPageArticles" est chargé à partir du TabView parent illustré ici:

TabView(selection: $selection){
        FetchFrontPageArticles()
            .tabItem {
                VStack {
                    Image("house")
                    Text("Home")
                }
            }
            .tag(0)
        Text("Second View")
            .tabItem {
                VStack {
                    Image("list.dash")
                    Text("Browse")
                }
            }
            .tag(1)
        ...
    }
    .accentColor(Color("primaryYellow"))

Je suis assez coincé à essayer de résoudre ce problème, et il semble que cela devrait être simple. Veuillez aider!

MISE À JOUR: Selon la réponse de Kyle ci-dessous, j'ai déjà essayé cette approche. Voici une capture d'écran de ma barre de navigation après avoir implémenté NavConfigurator (notez que la barre semble bleu clair, car l'effet de transparence entre en jeu):

enter image description here

iosswiftxcodeswiftuixcode11
3
eResourcesInc

Quand j'ai commencé à coder avec SwiftUI, j'ai rencontré le même problème et après tant de recherches, j'ai trouvé la solution.

Mettez le code ci-dessous dans la classe SceneDelegate.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {        
    let newAppearance = UINavigationBarAppearance()
    newAppearance.configureWithOpaqueBackground()
    newAppearance.backgroundColor = .black
    newAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]

    UINavigationBar.appearance().standardAppearance = newAppearance

    //Other code for displaying the first screen
}

La classe UINavigationBarAppearance est utilisée pour changer l'apparence de la barre de navigation et elle est disponible à partir d'iOS 13.

Le code ci-dessus changera le style de la barre de navigation de tous les contrôleurs.

2
Indrajeet

Ce qui suit fonctionne pour moi:

créez une extension pour UINavigationController qui modifiera ce qui suit:

  • couleur d'arrière-plan de la barre de navigation
  • couleur d'arrière-plan de la barre d'état

  • couleur du titre de la barre de navigation

    import UIKit

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()

        let appearance = UINavigationBarAppearance()
        //background color of the navigation and status bar
        appearance.backgroundColor = .black
        //color when the title is large
        appearance.largeTitleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)
        //color when the title is small
        appearance.titleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)

        // change the background- and title foregroundcolor for navigationbar
        navigationBar.standardAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
        navigationBar.compactAppearance = appearance
        // change color of navigationbar items
        navigationBar.tintColor = UIColor.white
    }
}

cependant cela ne changera pas la couleur de premier plan de la barre d'état. pour cela, nous devons faire ce qui suit:

importer SwiftUI

class HostingController<Content> : UIHostingController<Content> where Content : View {
    @objc override dynamic open var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

et puis dans notre scenedelegate

nous devons remplacer

window.rootViewController = UIHostingController(rootView: contentView)

avec

window.rootViewController = HostingController(rootView: contentView)
1
ARR

J'ai eu du mal à résoudre ce problème pendant environ une heure, enfin je trouve que si vous utilisez TabView, vous devez ajouter le edgeIgnoringSafeArea à TabView plutôt que la vue dans l'onglet.

TabView {
   ViewA().tabItem.....

}.edgesIgnoringSafeArea(.top)

j'espère que ça aide

0
cookiezby