SOLVED: Background Color of a list, make it clear color.

@ShadowDES

Aug '20

This used to work, but as of iOS14 beta 5, there is a white space behind the "cells". Any idea how to get rid of the white space?

struct ContentView: View {
    var body: some View {

        let items = ["Donald", "Daffy", "Mickey", "Minnie", "Goofy"]

        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear

        return NavigationView {
            ZStack {
                Color.red
                    .edgesIgnoringSafeArea(.all)
                List {
                    ForEach(items, id: \.self) { item in
                        NavigationLink(destination: DetailView(item: item)) {
                                ItemCell(item: item)
                                .frame(height: 50)
                            }

                    }
                }
            }
        }
    }
}

struct DetailView: View {
    var item: String

    var body: some View {
        Text(item)
    }
}

struct ItemCell: View {

    var item: String
    var body: some View {

        ZStack {

            RoundedRectangle(cornerRadius: 10)
                .fill(LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .topLeading, endPoint: .bottomTrailing))
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .padding(.horizontal, 4)
                .shadow(color: Color.black, radius: 3, x: 3, y: 3)

            HStack(alignment: .center) {
                Text(item)
            }.font(.body)
        }
    }
}

@ShadowDES

Aug '20

Interesting. If you change "List" to "Scrollview", it looks like it should (and you can get rid of the UITableView items. But is that the best way to do it?

@DimNovo

Aug '20

...

ForEach(items, id: \.self) { item in
                        NavigationLink(destination: DetailView(item: item)) {
                                ItemCell(item: item)
                                .frame(height: 50)
                            }
                    }.listRowBackground(Color.red)

...

	@ShadowDES Aug '20 Thanks DimNovo And no, I would never use that color scheme in a public project. 3
	@DimNovo Aug '20 No problem ShadowDES If you expect to get changes in some object's properties - you have to call this property... I don't quite understand - about 'that color scheme'? `Color.clear` it's OK too in this case. 3
	@cliff-in-auld-reekie Oct '20 `I've been wrestling with this and have a static list working nicely:` `struct ClearCell: ViewModifier { func body(content: Content) -> some View { content .offset(x: -20) .padding(.horizontal) .font(.system(size: 18, weight: .bold, design: .rounded)) .foregroundColor(.black) .listRowBackground(Color.clear) } }` Then in my View body I have this inside a ZStack (for a background image) inside GeometryReader and it works. List { Text("Thing") .frame(width: geo.size.width, alignment: .leading) .modifier(ClearCell()) Text("Another Thing") .frame(width: geo.size.width, alignment: .leading) .modifier(ClearCell()) Text("And Another Thing") .frame(width: geo.size.width, alignment: .leading) .modifier(ClearCell()) Text("Yet Another Thing") .frame(width: geo.size.width, alignment: .leading) .modifier(ClearCell()) } .frame(width: geo.size.width, height: geo.size.height) .offset(x: -50.0,y: -50.0) .onAppear() { UITableView.appearance().backgroundColor = UIColor.clear UITableViewCell.appearance().backgroundColor = UIColor.clear } I do seem to need to interfere with both TV and TVCell appearances for success. However, change the list to dynamic from an array - .... struct AnItem with id: UUID and descr: String and it all goes white again. :-( `List(items, id: \.id ) { item in Text(item.descr) .frame(width: geo.size.width, alignment: .leading) .modifier(ClearCell()) } .frame(width: geo.size.width, height: geo.size.height) .offset(x: -50.0,y: -50.0) .onAppear() { UITableView.appearance().backgroundColor = UIColor.clear UITableViewCell.appearance().backgroundColor = UIColor.clear }` I hope it helps. I'm still digging but it does feel like List is a tad iffy, in this respect, in XCode 12.0.1 and iOS 14.0.1 3
	@DavidGagne Oct '20 FWIW: I'm working on converting my UIKit app to SwiftUI and have been banging my head against this problem for days. The `body` of my `ContentView` is a `NavigationView`, which wraps a `FilteredView` (see Dynamically filtering @FetchRequest with SwiftUI). The `body` of my `FilteredView` wraps a `List` which wraps a `ZStack` which wraps my detail view stacked on a `NavigationLink` (to avoid displaying the default `List` disclosure indicator). Regardless of what combinations of different solutions I attempt, it seems like there's no way to make the `List` transparent and / or to (consistently) apply a background color to it. 3
	@DavidGagne Oct '20 I've gotten this to work (for now). I'll update as I make progress on my `List` and change it from a simple one to one using more complex views in case it stops working. `init() { UITableView.appearance().separatorStyle = .none UITableViewCell.appearance().backgroundColor = UIColor(Color.red) UITableView.appearance().backgroundColor = UIColor(Color.red) }` (And, no, my app isn't really using a red background!) 3
	@piotrros Oct '20 How to do in SwiftUI 2.0?: `let withIndex = entries.enumerated().map { $0 } List(withIndex, id: \.element.id) { index, entry in Button(action: { //do something }) { Text(entry.first) }.listRowBackground(Color.clear) }` Background is still white. 3
	@piotrros Oct '20 Got it working, even though people say in iOS 14 List doesn't use UITableView this was the missing piece: `UITableView.appearance().backgroundColor = .clear UITableViewCell.appearance().backgroundColor = .clear` Anyone knows how to hide or make separator full width (now it appears with left padding)? 3
	@JeneaVranceanu Sep '21 Looks like the problem of a `List` view is that it only takes into consideration the `ColorScheme`. Changing the `ColorScheme` from light to dark changes the background color from white to black. `List { ... }.colorScheme(.dark) // Or List { ... }.colorScheme(.light)` And there is no way to not use the color scheme or provide a custom implementation. Correct me about the last statement if I'm wrong. 3

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.