web-dev-qa-db-fra.com

Comment modifier la couleur d'arrière-plan d'une liste dans SwiftUI?

J'essaie de recréer une interface utilisateur que j'ai créée avec UIKit dans SwiftUI mais je rencontre des problèmes mineurs.

Je veux changer la couleur du List ici, mais aucune propriété ne semble fonctionner comme je l'attend. Exemple de code ci-dessous:

struct ListView: View {
    @EnvironmentObject var listData: ListData

       var body: some View {
        NavigationView {
            List(listData.items) { item in
                ListItemCell(item: item)
            }
            .content.background(Color.yellow) // not sure what content is defined as here
            .background(Image("paper-3")) // this is the entire screen 
        }
    }
}

struct ListItemCell: View {
    let item: ListItem

    var body: some View {

        NavigationButton(destination: Text(item.name)) {
            Text("\(item.name) ........................................................................................................................................................................................................")
                .background(Color.red) // not the area I'm looking for
        }.background(Color.blue) // also not the area I'm looking for
    }
}

I want to change the WHITE area

swiftswiftui
24
andromedainiative

Ok, j'ai trouvé la solution pour colorer les lignes de la liste:

struct TestRow: View {

    var body: some View {
        Text("This is a row!")
        .listRowBackground(Color.green)
    }
}

puis dans le corps:

List {
    TestRow()
    TestRow()
    TestRow()
}

Cela fonctionne comme je m'y attendais, mais je n'ai pas encore trouvé comment supprimer les lignes de séparation entre les rangées ...

20
Marius Waldal

enter image description here

struct ContentView: View {

    var strings = ["a", "b"]

    var body: some View {

        List {
            ForEach(strings, id: \.self) { string in
                Text(string)
            }.listRowBackground(Color.green)
        }
    }
}
10
Steve Ham

Vous pouvez le faire en changeant l'apparence de UITableView.

UITableView.appearance().backgroundColor = UIColor.clear

il suffit de mettre cette ligne dans la méthode Appdelegate de didFinishLaunchingWithOptions. En remplacement de UIColor.clear définissez la couleur que vous souhaitez ajouter dans la couleur d'arrière-plan de list.

8
Vishal Patel

Je ne sais pas quelle est la connexion mais si vous enveloppez la liste avec Form cela fonctionne.

Form {
     List(viewModel.currencyList, id: \.self) { currency in
        ItemView(item: currency)
     }
      .listRowBackground(Color(UIColor(named: "Primary")!))
      .background(Color(UIColor(named: "Primary")!))
}
6
Mustafa Ozhan

J'ai pu obtenir la liste entière pour changer de couleur en utilisant colorMultiply (Color :). Ajoutez simplement ce modificateur à la fin de la vue de liste, puis le rembourrage poussera le tableau vers les bords de l'appareil. Par exemple:

List {...}.colorMultiply(Color.green).padding(.top)

https://www.hackingwithswift.com/quick-start/swiftui/how-to-adjust-views-by-tinting-and-desaturating-and-more

5
Jake Strickler

Cela mettra l'arrière-plan de toute la liste en vert:

init() {
   UITableView.appearance().separatorStyle = .none
   UITableViewCell.appearance().backgroundColor = .green
   UITableView.appearance().backgroundColor = .green
}
3
Mahmoud ELDesouky

Je suppose que le modificateur listRowPlatterColor devrait le faire, mais n'est pas à partir de Xcode 11 Beta 11M336w

var body: some View {
    List(pokemon) { pokemon in
        PokemonCell(pokemon: pokemon)
            .listRowPlatterColor(.green)
    }
}
3
Emma K Alexandra

Quelqu'un peut trouver cela utile si vous essayez de créer une cellule de type flottant avec SwiftUI en utilisant .listRowBackground et en appliquant .padding

var body: some View {
    NavigationView {
        List {
            ForEach (site) { item in
                HStack {
                    Text(String(item.id))

                    VStack(alignment: .leading) {
                        Text(item.name)
                        Text(item.crop[0])
                    }

                }.listRowBackground(Color.yellow)
                      .padding(.trailing, 5)
                      .padding(.leading, 5)
                      .padding(.top, 2)
                      .padding(.bottom, 2))
            }
        }
            .navigationBarTitle(Text("Locations"))
    }
}
2
caleb81389

Pour moi, une solution parfaite pour changer l'arrière-plan de List dans SwiftUI est:

struct SomeView: View {
    init(){
    UITableView.appearance().backgroundColor = UIColor(named: "backgroundLight")
      }
...

}
1
Islom Alimov

J'ai inspiré une partie du configurateur utilisé pour configurer le style de barre de navigation NavigationView par page et écrire un configurateur UITableView par page simple sans utiliser l'approche globale UITableView.appearance ()

   import SwiftUI

    struct TableViewConfigurator: UIViewControllerRepresentable {

        var configure: (UITableView) -> Void = { _ in }

        func makeUIViewController(context: UIViewControllerRepresentableContext<TableViewConfigurator>) -> UIViewController {

            UIViewController()
        }

        func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TableViewConfigurator>) {

            let tableViews = uiViewController.navigationController?.topViewController?.view.subviews(ofType: UITableView.self) ?? [UITableView]()

            for tableView in tableViews {
                self.configure(tableView)
            }
        }
    }

Ensuite, il y a l'extension UIView nécessaire pour trouver tous les UITableViews

extension UIView {
    func subviews<T:UIView>(ofType WhatType:T.Type) -> [T] {
        var result = self.subviews.compactMap {$0 as? T}
        for sub in self.subviews {
            result.append(contentsOf: sub.subviews(ofType:WhatType))
        }
        return result
    }
}

Et l'utilisation à la fin est:

List {

}.background(TableViewConfigurator {
    $0.backgroundColor = .red
})

Peut-être qu'une chose devrait être améliorée, c'est l'utilisation de navigationController? .TopViewController pour le faire fonctionner même sans navigationController dans la hiérarchie des contrôleurs de vue

0
Michał Ziobro