How do I change my view's background color using List (SwiftUI)

Question

I want to let my cell looks not fill in list's column. I have already clear the list background color and separatorStyle set .none. I also set my cellView's listRowBackground been gray, but it doesn't work well.The background color is still white in my cell. How do I clear my list's column background color? Please help. Thank you.

struct TeamListView: View {
@EnvironmentObject var userToken : UserToken

@State var teamResults : [TeamResult] = []

var body: some View {

    NavigationView {

        ZStack{
            Color.gray.edgesIgnoringSafeArea(.all)
            VStack {
                List(teamResults) { team in
                    TeamListCellView(teamResult: team)
                }.navigationBarTitle(Text("My team"),displayMode: .inline)

        }
    }
    .onAppear(perform: {
        self.getTeamData()
        UITableView.appearance().backgroundColor = .gray
        UITableView.appearance().separatorStyle =  .none
    })

    .onDisappear(perform: {
        UITableView.appearance().backgroundColor = .white
        UITableView.appearance().separatorStyle = .singleLine
    })
}

Below is my cellView, I set the .listRowBackground(Color.gray) in here.

struct TeamListCellView: View {
//    @ObservedObject var teamResult: TeamResult
var teamResult: TeamResult
var body: some View {

    NavigationLink(destination: TeamDetail(teamResult1: teamResult)) {

        Image(uiImage: teamResult.teamImage)
                   .resizable()
                    .aspectRatio(contentMode: ContentMode.fill)
                   .frame(width:70, height: 70)
                   .cornerRadius(35)

        VStack(alignment: .leading) {
                    Text(teamResult.groupName)
                    Text(teamResult.groupIntro)
                           .font(.subheadline)
                           .foregroundColor(Color.gray)
                   }

        } .frame(width:200,height: 100)
        .background(Color.green)
        .cornerRadius(10)
        .listRowBackground(Color.gray)        
}
}

Jujuba · Accepted Answer · 2020-02-03 12:10:15Z

You can create a Background<Content: View> and use it to set the background colour of your view. To do it you can embed your views inside your Background View

For example:

struct ContentView: View {
    @EnvironmentObject var userToken : UserToken
    @State var teamResults : [TeamResult] = []
    var body: some View {
        Background{
            NavigationView {
                ZStack{
                    Color.gray.edgesIgnoringSafeArea(.all)
                    VStack {
                        List(teamResults) { team in
                            TeamListCellView(teamResult: team)
                        }
                        .navigationBarTitle(Text("My team"),displayMode: .inline)
                    }
                }
                .onAppear(perform: {
                    self.getTeamData()
                    UITableView.appearance().backgroundColor = .gray
                    UITableView.appearance().separatorStyle =  .none
                })
                .onDisappear(perform: {
                    UITableView.appearance().backgroundColor = .white
                    UITableView.appearance().separatorStyle = .singleLine
                })
            }
        }
    }
}

struct Background<Content: View>: View {
    private var content: Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }

    var body: some View {
        Color.gray
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .overlay(content)
    }
}

Collectives™ on Stack Overflow

How do I change my view's background color using List (SwiftUI)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related