SwiftUI List color background

by

iOS 16

Since Xcode 14 beta 3, You can change the background of all lists and scrollable contents using this modifier:

.scrollContentBackground(.hidden)

You can pass in .hidden to make it transparent. So you can see the color or image underneath.

iOS 15 and below

All SwiftUI’s Lists are backed by a UITableView (until iOS 16). so you need to change the background color of the tableView. You make it clear so other views will be visible underneath it:

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
        
    var body: some View {
        Form {
            Section(header: Text("First Section")) {
                Text("First cell")
            }
            Section(header: Text("Second Section")) {
                Text("First cell")
            }
        }
        .background(Color.yellow)
    }
}

Now you can use Any background (including all Colors) you want

Preview

Note that those top and bottom white areas are the safe areas and you can use the .edgesIgnoringSafeArea() modifier to get rid of them.

Also note that List with the .listStyle(GroupedListStyle()) modifier can be replaced by a simple Form. But keep in mind that SwiftUI controls behave differently depending on their enclosing view.

Also you may want to set the UITableViewCell‘s background color to clear as well for plain tableviews

More Related Contents:

  1. How to hide keyboard when using SwiftUI?
  2. What is the difference between ObservedObject and StateObject in SwiftUI
  3. SwiftUI – Multiple Buttons in a List row
  4. SwiftUI NavigationLink loads destination view immediately, without clicking
  5. SwiftUI NavigationView navigationBarTitle LayoutConstraints issue
  6. Add bottom border line to UI TextField view in SwiftUI / Swift / Objective-C / Xamarin
  7. SwiftUI MVVM Coordinator/Router/NavigationLink
  8. iOS14 introducing errors with @State bindings
  9. SwiftUI @Binding Initialize
  10. SwiftUI: Status bar color
  11. SwiftUI: What is @AppStorage property wrapper
  12. SwiftUI DatePicker Binding optional Date, valid nil
  13. Automatically adjustable view height based on text height in SwiftUI
  14. How can I color a UIImage in Swift?
  15. Swiftui – How do I initialize an observedObject using an environmentobject as a parameter?
  16. SwiftUI – how to avoid navigation hardcoded into the view?
  17. How can I implement PageView in SwiftUI?
  18. Prevent dismissal of modal view controller in SwiftUI
  19. Implement dark mode switch in SwiftUI App
  20. How to observe changes in UserDefaults?
  21. SwitUI – Two navigationLink in a list
  22. SwiftUI withAnimation completion callback
  23. @Published property wrapper not working on subclass of ObservableObject
  24. In SwiftUI, how to use UIHostingController inside an UIView or as an UIView?
  25. SwiftUI: Translucent background for fullScreenCover
  26. How to only disable scroll in ScrollView but not content view?
  27. How to make a button (or any other element) show SwiftUI’s DatePicker popup on tap?
  28. SwiftUI: Error in dragging logic or is this a bug?
  29. SwiftUI: Make ScrollView scrollable only if it exceeds the height of the screen
  30. SwiftUI tappable subtext

Leave a Comment