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

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 Play

SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!

Click to learn more about Play!

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.