SwiftUI - Comment changer la couleur de fond d'une vue ?

Question

Je commence à essayer SwiftUI et je suis surpris que cela ne semble pas être simple de changer la couleur d'arrière-plan d'une View. Comment faites-vous cela en utilisant SwiftUI?

Answer 1

Couleur de fond de l'écran

(À partir de la version Xcode 13)

Je ne suis pas sûr si l'auteur original faisait référence à la couleur de fond de l'écran entier ou des vues individuelles. Donc je vais simplement ajouter cette réponse qui consiste à définir la couleur de fond de l'écran entier.

Utilisation de ZStack

var body: some View {
    ZStack {
            Color.purple
                .ignoresSafeArea()

            // Votre autre contenu ici
            // Les autres couches respecteront les marges de la zone sûre
    }
}

J'ai ajouté .ignoresSafeArea() sinon, cela s'arrêtera aux marges de la zone sûre.

Utilisation du modificateur Overlay

var body: some View {
    Color.purple
        .ignoresSafeArea(.vertical) // Ignorer juste pour la couleur
        .overlay(
            VStack(spacing: 20) {
                Text("Superposition").font(.largeTitle)
                Text("Exemple").font(.title).foregroundColor(.white)
        })
}

Remarque : Il est important de garder .ignoresSafeArea uniquement sur la couleur pour que votre contenu principal n'ignore pas également les bords de la zone sûre.

iOS 15

iOS 15/Xcode 13 a introduit quelques changements dans la façon dont les Styles fonctionnent avec les bords des zones sûres.

D'après mon observation, la règle est : Si le style touche le bord de la zone sûre, il débordera dans la zone sûre.

Cela vous offre plus d'options pour définir une couleur/style de fond.

Qu'est-ce qu'un Style ?

Un Style peut être :

• Couleurs
• Matériaux (effets de flou)
• Vues hiérarchiques (.secondary, .tertiary, .quaternary)
• Dégradés

Utilisation du Background

Parce que l'arrière-plan du VStack touche le bord de la zone sûre, la couleur violette débordera dans la zone sûre.

var body: some View {
    VStack {
        Text("Bonjour, tout le monde !")
        Divider()
        Spacer()
    }
    .background(Color.purple)
}

TabView

En iOS 15, la TabView n'est plus translucide. Cela signifie que la couleur de fond débordera directement dans celle-ci.

Si vous souhaitez fournir un style personnalisé pour votre TabView, vous pouvez ajouter un autre Style qui touche le bord inférieur de la zone sûre afin qu'il déborde dans votre TabView. Par exemple :

var body: some View {
    TabView {
        VStack {
            Text("Bonjour, tout le monde !")
            Divider()
            Spacer()
            // Déborde dans TabView
            Rectangle()
                .frame(height: 0)
                .background(.thinMaterial)
        }
        .background(Color.purple)
        .tabItem {
            Text("Onglet 1")
            Image(systemName: "wifi")
        }
    }
}

NavigationView

La même chose qui se produit avec TabView se produira également avec NavigationView.

Pour personnaliser le style de NavigationView, ajoutez un style qui touchera le bord supérieur de la zone sûre et débordera dans le NavigationView :

var body: some View {
    NavigationView {
        VStack {
            // Déborde dans NavigationView
            Rectangle()
                .frame(height: 0)
                .background(.ultraThinMaterial)
            Text("Bonjour, tout le monde !")
            Divider()
            Spacer()
        }
        .background(Color.purple)
        .navigationTitle(Text("Style"))
    }
}

Je suis totalement ouvert à d'autres façons d'accomplir cela. Laissez un commentaire ou éditez cette réponse si vous connaissez d'autres moyens.

Answer 2

Vous pouvez faire quelque chose comme :

.background(Color.black)

autour de votre vue.

par exemple, à partir du modèle par défaut (je l'englobe autour d'un Group) :

    var body: some View {
        VStack {
          Text("Bonjour SwiftUI!")
        }
       .background(Color.black)
    }

Pour ajouter un peu d'opacité à cela, vous pouvez ajouter la méthode .opacity également :

.background(Color.black.opacity(0.5))

Vous pouvez également utiliser l'élément d'inspection de la vue en faisant CMD + clic sur la vue et en cliquant sur Afficher l'inspecteur SwiftUI > Arrière-plan > Votre couleur.

Answer 3

Remplissez tout l'écran :

var body: some View {
    Color.green.edgesIgnoringSafeArea(.all)
}

Code

Résultat

Answer 4

Comme ça

struct ContentView : View {
    @State var fullName: String = "yushuyi"
    var body: some View {        
        VStack
            {
                TextField($fullName).background(SwiftUI.Color.red)
                Spacer()
        }.background(SwiftUI.Color.yellow.edgesIgnoringSafeArea(.all))
    }
}

Answer 5

Pour List :

Tous les List de SwiftUI sont soutenus par une UITableView dans iOS. Vous avez donc besoin de changer la couleur de fond du tableView. Mais comme les valeurs Color et UIColor sont légèrement différentes, vous pouvez vous débarrasser du UIColor.

struct ContentView : View {
    init(){
        UITableView.appearance().backgroundColor = .clear
    }

    var body: some View {
        List {
            Section(header: Text("Première Section")) {
                Text("Première Cellule")
            }
            Section(header: Text("Deuxième Section")) {
                Text("Première Cellule")
            }
        }
        .background(Color.yellow)
    }
}

Maintenant, vous pouvez utiliser une couleur de fond (incluant tous les Color que vous voulez

---

Regardez d'abord ce résultat :

Comme vous pouvez le voir, vous pouvez définir la couleur de chaque élément dans la hiérarchie de la vue comme ceci :

struct ContentView: View {

    init(){
        UINavigationBar.appearance().backgroundColor = .green 
        //Pour d'autres changements de NavigationBar, regardez ici : (https://stackoverflow.com/a/57509555/5623035)
    }

    var body: some View {
        ZStack {
            Color.yellow
            NavigationView {
                ZStack {
                    Color.blue
                    Text("Un peu de texte")
                }
            }.background(Color.red)
        }
    }
}

Et le premier est window :

window.backgroundColor = .magenta

Le problème très courant est que nous ne pouvons pas supprimer la couleur de fond du HostingViewController de SwiftUI (pour l'instant), donc nous ne pouvons pas voir certaines des vues comme navigationView à travers la hiérarchie des vues. Vous devriez attendre l'API ou essayer de simuler ces vues (non recommandé).