0

In SwiftUI how would I go about changing the background color around the list? I've tried using various ZStack and .listRowBackground(Color.clear) but no luck. Here's some sample code.

enter image description here

struct SwiftUIView: View {

    var body: some View {
        ZStack(alignment: .top) {
            Color(.blue)
            VStack {
                List(0 ..< 5) { item in
                    HStack {
                        Image(systemName: "clock")
                        Text("Placeholder")
                    }
                }
            }
        }
    }
}
Robert
  • 809
  • 3
  • 10
  • 19
  • Does this answer your question https://stackoverflow.com/a/65093021/12299030? – Asperi Sep 03 '21 at 14:23
  • Well maybe I'm missing something, but `listRowBackground` just changes the list background color, not the area surrounding the list. – Robert Sep 03 '21 at 14:32

1 Answers1

0

There are two ways you can do this:

  1. With SwiftUI-Introspect, which changes this specific List (my recommendation)
  2. Change the styling of all Lists globally (I would not recommend as this could affect many different components)

Result of these solutions:

Result

1: Introspect

struct ContentView: View {
    var body: some View {
        List(0 ..< 5) { item in
            HStack {
                Image(systemName: "clock")

                Text("Placeholder")
            }
        }
        .introspectTableView { tableView in
            tableView.backgroundColor = .clear
        }
        .background(Color.blue)
    }
}

2: Global appearance

struct ContentView: View {
    init() {
        UITableView.appearance().backgroundColor = .clear
    }

    var body: some View {
        List(0 ..< 5) { item in
            HStack {
                Image(systemName: "clock")

                Text("Placeholder")
            }
        }
        .background(Color.blue)
    }
}

You can also so the following instead to ignore the safe area for the background color:

.background(Color.blue.ignoresSafeArea())
George
  • 25,988
  • 10
  • 79
  • 133
  • Thank you! There doesn't seem to be a native way to do this outside of option #2 it seems. – Robert Sep 03 '21 at 18:02
  • @Robert Unfortunately not. However I do highly recommend the Introspect method, plus it's a package I use very often to solve even basic problems like this. Introspect is like the better way than using `UIViewRepresentable`s and stuff. – George Sep 03 '21 at 18:18