How to add background color to the list view of bottom safe area SwiftUI iOS 14

user_12208004 0
Viewed 685

I'm trying to add background color to the bottom safe area with list view. I know how to add background color to the list cell, but it doesn't apply to the safe area. Is there any possible way?

Note: I did try ZStack and .edgesIgnoringSafeArea, I need to use SwiftUI 2.0 List View, not LazyVStack or SwiftUI 1.0 (iOS 13) List View

List {
  ForEach(0..<100) { index in
     Text(String(index))
     .listRowBackground(Color.red.edgesIgnoringSafeArea(.all))
  }
}

enter image description here

swiftui-list ios14 swiftui swift
1 Answers

You need to add:

UITableView.appearance().backgroundColor = .clear

and put the List in a ZStack:

@main
struct TestApp: App {
    init() {
        UITableView.appearance().backgroundColor = .clear
    }

    var body: some Scene {
        WindowGroup {
            ZStack {
                Color.red.edgesIgnoringSafeArea(.all)
                List {
                    ForEach(0 ..< 100) { index in
                        Text(String(index))
                            .listRowBackground(Color.red)
                    }
                }
            }
        }
    }
}

Alternatively instead of using ZStack you can set the color directly:

UITableView.appearance().backgroundColor = UIColor(.red)

Note that this will set the backgroundColor globally.

user_86977930
Related