NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

Customizing the look of hierarchical/embedded/expanding lists

Forums > SwiftUI

With regards to hierarchical lists, is there a way to customize the background colors, chevron colors, etc.? I know how to do them within a NavigationView and other Lists (e.g., this), but I can't get the customization to work in an expanding list.

   

I once styled it in clearing the background and using my own gradient with a ZStack. But you have to rely on

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

With these you can set your own background color as well.

You can use it in the init() of your View.

   

Thanks for that, @Hatsushira! If I'm using it correctly, like this:

struct ExpandableFolder: Hashable {
    let label: String
    var contents: [ExpandableFolder]?
}

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

    let folders: [ExpandableFolder] = [
        ExpandableFolder(label: "Category A",
                         contents: [ExpandableFolder(label: "Subgroup A.1"), ExpandableFolder(label: "Subgroup A.2")]),

        ExpandableFolder(label: "Category B",
                         contents: [ExpandableFolder(label: "Subgroup B.1",
                                                     contents: [ExpandableFolder(label: "Sub-Subgroup B.1.1")])]),

    var body: some View {
        List(folders, id: \.self, children: \.contents) { row in
            Text(row.label)
        }
    }
}

this affects what's behind the list of Text rows. However, I'm looking to change the appearance of the rows themselves. More specifically, the color of the chevron symbols at far right; I'm trying to make them a different color than Color.accentcolor.

   

The List itself you can style with listRowBackground and listItemTint. I don't know how this affects the chevron color, though. In my experience it doesn't...

   

Hmmm. I haven't been able to get either of those to work with the embedded lists; I've tried placing the code inside the List{} view as well as trying them as modifiers to the view, but the list's appearance never changes. Actually, the only code that's cause any visual difference is setting UITableView.appearance().backgroundColor equal to a visible Color (e.g., .red, .blue, etc.).

   

Hacking with Swift is sponsored by Stream

SPONSORED Build Chat messaging quickly with Stream Chat. The Stream iOS Chat SDK is highly flexible, customizable, and crazy optimized for performance. Take advantage of this top-notch developer experience, get started for free today!

Click here

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

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.