Remove the leading space in disclosure group inside a list (SwiftUI)

Question

When a DisclosureGroup is embedded in a List, there is some white space on the leading side of its content:

List {
    Text("Top")
    
    DisclosureGroup("Label") {
        HStack {
            Text("Inside Left")
            Spacer()
            Text("Inside Right")
        }
    }
    
    Text("Bottom")
}

I want to remove the leading white space and let the content extend to full width. I tried to embed the DisclosureGroup into a VStack, it worked, but I'm not satisfied with the expanding animation of the DisclosureGroup.

Is there a way to remove the leading white space while retaining the folding like animation of it?

Answer 1

Welcome to Stack Overflow! The spacing that you are seeing is a list row inset. To control it, simply use . listRowInsets on the HStack. At this point, you have full control of the insets, so set them where you want. Your code would look something like this:

    List {
        Text("Top")
        DisclosureGroup("Label") {
            HStack {
                Text("Inside Left")
                Spacer()
                Text("Inside Right")
            }
            .listRowInsets(EdgeInsets(top: 0, // make the top 0 to remove the spacing
                                      leading: 0,
                                      bottom: 0,
                                      trailing: 16)) // The trailing needs
                                                     // to have some spacing
        }
        Text("Bottom")
    }