CODEWITHSUNDEEP
swiftuiswiftui-listswiftui-navigationview
Ethan Hardacre
Ethan Hardacre

Reputation: 125

SwiftUI Clear Background on List Element

I have a list that produces card views with a ForEach. They are meant to have a clear background, but one of them always has a white background and I can't figure out how to change it. I have tried putting .background(Color.clear) on any view I can think of, as well as using .listRowBackground(Color.clear), but one view will still have a background despite the fact that it is the same as all of the others.

Here's an image to show what I am talking about: enter image description here

And here is the code for the body of the navigationView that these are presented in:

NavigationView{
            List{
                //loop through task cards
                ForEach(self.tasks, id: \.id) { task in
                    //show task card
                    task
                        .listRowBackground(Color.clear)
                        .background(Color.clear)
                }
                .listRowBackground(Color.clear)
                .listStyle(SidebarListStyle())
                .environment(\.defaultMinListRowHeight, 120).padding(0.0)
                
            //LIST end
            }
            .listStyle(SidebarListStyle())
            .environment(\.defaultMinListRowHeight, 120).padding(0.0)
            .background(Color.clear)
            
        //NAVIGATION VIEW end
        }.background(Color.clear)
        .stackOnlyNavigationView()

and here is the code for the body of the views that appear in the ForEach above (called "task"):


GeometryReader{ geo in
    RoundedRectangle(cornerRadius: 10)
        .foregroundColor(Color.lightAccent)
        .background(Color.clear)
        .frame(height: self.height)
        .overlay(
            HStack{
                //blah blah blah probably not important to the issue
                //if it is let me know and I will edit

            //HSTACK
            }.frame(width: geo.size.width, height: self.height)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke((self.id == self.selectionManager.id) ? Color.blue : Color.mid, lineWidth: (self.id == self.selectionManager.id) ? 3 : 1))
                          .background(Color.clear)
                          .foregroundColor(Color.clear)
                //OVERLAY end
                )
    }

Upvotes: 1

Views: 404

Answers (1)

Asperi
Asperi

Reputation: 257729

Try to use .clipShape, but it is hard to say exact place w/o having your code...

GeometryReader{ geo in
    RoundedRectangle(cornerRadius: 10)
        .foregroundColor(Color.lightAccent)
        .background(Color.clear)
        .frame(height: self.height)
        .overlay(
            HStack{
                //blah blah blah probably not important to the issue
                //if it is let me know and I will edit

            //HSTACK
            }.frame(width: geo.size.width, height: self.height)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke((self.id == self.selectionManager.id) ? Color.blue : Color.mid, lineWidth: (self.id == self.selectionManager.id) ? 3 : 1))
                          .background(Color.clear)
                          .foregroundColor(Color.clear)
                //OVERLAY end
                )
               .clipShape(RoundedRectangle(cornerRadius: 10))     // << here !!
    }
    .clipShape(RoundedRectangle(cornerRadius: 10))     // << or here !!

Upvotes: 3

Related Questions