SOLVED: It is apparently impossible to make the background of an expandable list transparent

@MikeLima

Jun '21

I am trying to create an expandable list in which all cells are transparent and have no separator lines between them.

I have this code:

import SwiftUI
import CoreData

struct Lumba:Identifiable {
  var id = UUID()
  var name:String
  var subLumba:[Lumba]?
}

struct ContentView: View {

  init() {
    UITableView.appearance().separatorStyle = .none
    UITableView.appearance().backgroundColor = UIColor.clear
    UITableViewCell.appearance().backgroundColor = UIColor.clear
    UITableView.appearance().separatorColor = .clear
    UITableView.appearance().backgroundView = nil
    UITableViewCell.appearance().backgroundView = nil

  }

  let array = [
    Lumba(name:"aaa", subLumba: [
            Lumba(name: "a1", subLumba: nil), Lumba(name: "a3", subLumba: nil), Lumba(name:"a3", subLumba: nil)]),
    Lumba(name:"bbb", subLumba: nil)

  ]

  var body: some View {

      List(array, children: \.subLumba) { scrollItem in
        Text(scrollItem.name)
          .background(Color.clear)
          .listRowBackground(Color.clear)
      }

    .background(Color.red)

  }
}

You can see the red background but the cells are always white with separator lines. I want them transparent.

screenshot

... and I fear that those instructions on the init() may modify the appearance of other lists I have on the project.

Any ideas?

@ericbright2002

Jun '21

I think the problem is with the List command itself in SwiftUI versus Swift. It's just not as flexible. I've been fighting it for two weeks and finally found a way I could style my lists as I wanted by using a ScrollView instead. The original idea is from here:

https://www.keaura.com/blog/swiftui-collapsable-lists

And you can clone my version of it here: https://github.com/ericbright2002/NonListList

The gist of it is as follows:

Start by enumerating your section headers and then creating an extension so that when you iterate over the enumerated field, you'll know what index you're at.
Create a struct for your list where each item on the list will have the section it's in, its name, and a unique id (not sure if you need that id, but I think you do).
In the main view, set up an array of booleans to see if each section is expanded or not. Also set up an array of your list items.
Use a ZStack to get your background color, and then VStack your title, whatever else you want, and the ScrollView.
Inside the scroll view, iterate over the enumeration of section headers with ForEach and make each header a button that toggles whether it should be expanded or not.
Use another ForEach for the items inside each header that will only show up if the boolean is true.

I know that probably won't make sense without reading the code, so I tried to comment a lot in the code so you can see exactly what I did. I make the colors obnoxious so you can see that you really can style this type of list however you want. I hope that approach works for you as it was a miracle this morning when I got it working!

@MikeLima

Jun '21

thanks!

Sponsor Hacking with Swift and reach the world's largest Swift community!

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.