19
votes

Comment changer la couleur d'arrière-plan d'un formulaire dans SwiftUI?

Je veux changer cette couleur d'arrière-plan "gris clair" pour un formulaire, mais .foregroundColor(Color.blue) et .background(Color.blue) ne semblent pas fonctionner

struct ContentView : View {

 @State var value = ""

    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField($value)
            }
            Section(header: Text("Last Name")) {
                TextField($value)
            }
        }.foregroundColor(Color.blue)

    }
}

entrez la description de l'image ici


4 commentaires

Vous aurez probablement besoin de publier plus de code, car quelque chose d'aussi basique qu'un modificateur d' background - background impression que ce n'est pas votre problème. Est-ce un popup modal? Travaillez-vous avec un ZStack ? Veuillez nous donner plus de détails ou accepter la réponse de @Quinn. Reproduisons le problème.


@dfd C'est la seule vue que j'ai, un formulaire avec 2 champs (c'est censé être un formulaire d'inscription), j'ajouterai probablement un bouton, mais il n'y a pas de popup ou de ZStack. J'ai déjà essayé .background(Color.blue) sur Form, mais cela ne fonctionne pas. Je suppose que Form est une vue spéciale ou peut-être est-ce juste un bogue et quelqu'un a trouvé une solution de contournement


Je l'ai trouvé. Je posterai une réponse, et si vous avez besoin de quelques ajustements, faites-le moi savoir.


Hé, j'ai ajouté une réponse fonctionnelle. Vérifiez cela et laissez-moi maintenant si cela répond à vos exigences ou non.


5 Réponses :


27
votes

Une solution de travail:

Voir toutes les SwiftUI List des s sont soutenus par un UITableView dans iOS. vous devez donc changer la couleur d'arrière-plan de tableView . Mais comme les valeurs Color et UIColor sont légèrement différentes, vous pouvez vous débarrasser de l' UIColor .

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
    
    @State var value = ""
    
    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField("First Name", text: $value)
            }
            Section(header: Text("Last Name")) {
                TextField("Last Name", text: $value)
            }
        }
        .foregroundColor(Color.blue)
        .background(Color.yellow)
    }
}

Vous pouvez maintenant utiliser n'importe quel arrière-plan (y compris toutes les Color ) de votre choix

Aperçu

Notez que ces zones blanches en haut et en bas sont sûres et vous pouvez utiliser le modificateur .edgesIgnoringSafeArea() pour vous en débarrasser.


Restaurer

Étant donné que UITableView.appearance().backgroundColor s'applique globalement, vous pouvez utiliser le modificateur .onAppear pour le modifier dans différentes vues (puisqu'il s'agit d'un changement global). Vous pouvez donc utiliser un autre onAppear ou onDisappear pour le réinitialiser à ce que vous voulez.

Et les couleurs par défaut sont:

UIColor.systemGroupedBackground pour le style groupé . Et

UIColor.systemBackground pour le style simple .

Et ils ont tous deux une prise en charge automatique du mode sombre et du mode clair.


9 commentaires

UITableView.appearance().backgroundColor = .clear change le style universellement, ce qui n'est pas une solution idéale. Mais, il n'y a pas de solution alternative que je pourrais trouver.


vous pouvez utiliser le modificateur .onAppear() pour le faire agir comme s'il était juste pour cette page. ;) @WilliamGrand


Hmm, mon expérience sur Xcode 11.6 et Xcode 12 beta 4 est que .onAppear() s'applique universellement.


Bien sûr, vous devriez utiliser un autre onAppear ou onDisappear pour le réinitialiser à ce que vous voulez;) @WilliamGrand


Comment puis-je le réinitialiser? Je veux dire que je veux changer la couleur d'arrière-plan par défaut du formulaire


@KenanNur définit simplement UITableView.appearance().backgroundColor sur la couleur de votre .onDisappear dans .onDisappear


Je sais mais je veux changer la valeur par défaut. Comment connaître le code RVB d'arrière-plan du formulaire par défaut?


UIColor.systemGroupedBackground pour le style groupé et UIColor.systemBackground pour le style uni


Ce n'est plus correct pour iOS 14. UITableView ne soutient plus les listes.



6
votes

La réponse acceptée par Mojtaba Hosseini, ci-dessus, fonctionne mais l'instruction init () n'est pas un bon endroit pour l'instruction UITableView . En effet, il "code en dur" les paramètres d'initialisation de ContentView. Dans ce cas, il n'en a pas, donc tout fonctionne, mais si un @ObservedObject était ajouté à la vue, cela interromprait la fonction init.

Beaucoup plus simple d'ajouter simplement l'instruction UITable au body , de renvoyer explicitement le Form et de supprimer le init() .

var body: some View {
    UITableView.appearance().backgroundColor = .clear
    return Form {...}
 }

Toutefois, la définition de la couleur d'arrière-plan sur le Form fonctionne généralement comme prévu. Le fait qu'il ne fonctionne pas sur l'écran ContentView peut être un bogue.


1 commentaires

Erreur: le type '()' ne peut pas être conforme à 'View'; seuls les types struct / enum / class peuvent se conformer aux protocoles



7
votes

essaye ça

.onAppear {
   UITableView.appearance().backgroundColor = .blue
}


1 commentaires

UITableView.appearance().backgroundColor = .blue change le style universellement, ce qui n'est pas une solution idéale. Mais, il n'y a pas de solution alternative que je pourrais trouver.



0
votes

Si vous ne souhaitez pas modifier la zone de sécurité du Form , vous pouvez également utiliser ZStack :

struct ContentView: View {
    
    init(){
        
        UITableView.appearance().backgroundColor = .clear
    }
    
    @State var value = ""
    
    var body: some View {
        ZStack {
            Color(UIColor.systemYellow)
                .edgesIgnoringSafeArea(.all)
            Form {
                Section(header: Text("First Name")) {
                    TextField("First Name", text: $value)
                }
                Section(header: Text("Last Name")) {
                    TextField("Last Name", text: $value)
                }
            }
        }
    }
}


0 commentaires

0
votes

Les solutions ci-dessus n'ont pas vraiment fonctionné pour ce que j'essayais de réaliser. Je voulais un écran initial avec un arrière-plan clair pour le formulaire et les écrans suivants pour avoir la couleur par défaut du système iOS GroupedBackground. Utiliser apparaît () et disparaît () ne fonctionnait pas pour moi car le passage d'un onglet à un autre entraînait des bogues dans l'apparence.

J'ai trouvé la solution suivante. Il emprunte aux solutions ci-dessus.

Pour mon écran ContentView, j'ai inséré ce code juste à l'intérieur du Struct.

.background(Color(.systemGroupedBackground))

Il s'agit d'un changement global qui affecte toutes les formes.

Pour tous les formulaires où je voulais que la couleur par défaut fonctionne, j'ai inséré ce code juste à l'extérieur du formulaire {}.

init(){
    UITableView.appearance().backgroundColor = .clear
}


0 commentaires