web-dev-qa-db-fra.com

Comment changer la couleur d'arrière-plan si vous utilisez NavigationView dans SwiftUI?

Je souhaite changer la couleur d'arrière-plan pour le plein écran. J'utilise NavigationView et je veux définir la couleur grise pour le fond (pas le blanc par défaut)

struct ContentView : View {
    var body: some View {
        NavigationView {
            ScrollView {
                Text("Example")
            }
            .navigationBarTitle("titl")
        }
    }
}

La définition de .background(Color.red) ne fonctionne nulle part.

aperç

swiftswiftui
10
Ivan Vorobei

Si vous venez d'incorporer votre contenu dans le NavigationView dans un ZStack, vous devriez être en mesure de jeter la couleur sous votre contenu principal.

struct ContentView : View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red.edgesIgnoringSafeArea(.all)
                ScrollView {
                    Text("Example")
                }
                .navigationBarTitle("title")
            }
        }
    }
}
3
LJ White

Un petit hack que vous pouvez faire est d'ajouter une vue texte qui ne contient aucun texte et d'ajouter la couleur d'arrière-plan à ce que vous voulez, quelque chose comme ceci:

Text(" ")
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .background(Color.red)
    .edgesIgnoringSafeArea(.all)
2
omar

Ok, je viens d'essayer la solution d'Omar, et malheureusement, cela ne fonctionne pas s'il y a d'autres vues dans la pile.

Donc, la meilleure réponse que j'ai vue pour l'instant qui modifie réellement la couleur d'arrière-plan sous-jacente de NavigationView (dans la question d'origine de OP) est simplement de définir la couleur d'arrière-plan sur l'apparence UIView, comme échappé à dans cette réponse :

UIView.appearance().backgroundColor = UIColor.red
2
PostCodeism

Ajoutez simplement ceci à l'initialiseur de votre code UIScrollView.appearance().backgroundColor = UIColor.red. Mais malheureusement, cette solution a de nombreux effets secondaires.

1
Mattis Schulte

Ajout à la réponse de Mattis Schulte ci-dessus l'un des effets secondaires que j'ai rencontrés est que la barre d'état n'héritera pas de la couleur d'arrière-plan.

Cependant, lorsque vous faites défiler une liste (par exemple) vers le haut de la vue et que iOS bascule vers une vue de titre en ligne (avec le NavigationBarTitle centré), il se colore dans la zone de la barre d'état, ce qui laisse une expérience utilisateur assez indésirable.

La solution de contournement que j'ai pu utiliser est:

import SwiftUI

let coloredNavAppearance = UINavigationBarAppearance()

struct ListView: View {

    init() {
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = .systemBlue
        coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]

        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance

    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("General")) {
                    HStack {
                        Text("ListView #1")
                        Spacer()
                        Text("data")
                            .multilineTextAlignment(.trailing)
                    }
                    HStack {
                        Text("ListView #2")
                        Spacer()
                        Text("data")
                            .multilineTextAlignment(.trailing)
                    }
                }

            }
            .navigationBarTitle("NavBar Title")
        }
    }
}


struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

J'espère que ceci aide quelqu'un d'autre. Crédit à https://sarunw.com/posts/uinavigationbar-changes-in-ios13/

1
JimCSanJose