SwiftUI List starts off expanded. How do I get the is to start off collapsed?

Question

For some reason, this list is starting off expanded. How do I get it to start off collapsed? Everything is working as I desire but for some reason the list doesn't want to start off in the collapse position every time the view is opened.

import SwiftUI

struct ContactView: View {
    var body: some View {
        List {
            contactSection(title: "HR Department", phone: "(123) 456 - 7890", fax: "(123) 456 - 7890")
            contactSection(title: "Customer Service Department", phone: "(123) 456 - 7890")
            contactSection(title: "Technical Support Department", phone: "(123) 456 - 7890", afterHours: "(123) 456 - 7890", email: "support@support.com")
            contactSection(title: "Product Sales Department", email: "sales@sales.com")
            contactSection(title: "Contact App Developer", email: "appdev@appdev.com")
            Text("Office hours at this company is from Monday through Friday from 9:00 AM - 5:00 PM Eastern Time")
                .font(.headline)
                .fontWeight(.bold)
                .multilineTextAlignment(.center)
        }
        .listStyle(.sidebar)
        .navigationTitle("Contact Info")
    }
    private func contactSection(title: String, phone: String? = nil, fax: String? = nil, afterHours: String? = nil, email: String? = nil) -> some View {
        Section(header: Text(title)
            .font(.headline)
            .fontWeight(.bold)
            .foregroundColor(.primary)
            .multilineTextAlignment(.center)) {
                if let phone = phone {
                    contactItem(label: "Phone:", value: phone)
                }
                if let fax = fax {
                    contactItem(label: "Fax:", value: fax)
                }
                if let afterHours = afterHours {
                    contactItem(label: "After Hours Support:", value: afterHours)
                }
                if let email = email {
                    contactItem(label: "Email:", value: email)
                }
            }
    }
    private func contactItem(label: String, value: String) -> some View {
        HStack {
            Text(label)
                .font(.headline)
                .padding(.leading)[enter image description here](https://i.sstatic.net/4qRrf.png)
            Spacer()
            Text(value)
                .font(.headline)
                .foregroundColor(.accentColor)
                .padding(.trailing)
        }
    }
}
struct ContactView_Previews: PreviewProvider {
    static var previews: some View {
        ContactView()
    }
}

The .listStyle(.whatever) is not giving me the desired affect. Swift says by default, the list should be collapsed.

Answer 1

The .sidebar list style doesn't seem to support this currently. All the sections are expanded by default.

You can try making your own disclosures with DisclosureGroup, and try recreating an appearance similar to the .sidebar style.

Here is my attempt:

private func contactSection(title: String, phone: String? = nil, fax: String? = nil, afterHours: String? = nil, email: String? = nil) -> some View {
    Section {
        DisclosureGroup {
            Group {
                if let phone = phone {
                    contactItem(label: "Phone:", value: phone)
                }
                if let fax = fax {
                    contactItem(label: "Fax:", value: fax)
                }
                if let afterHours = afterHours {
                    contactItem(label: "After Hours Support:", value: afterHours)
                }
                if let email = email {
                    contactItem(label: "Email:", value: email)
                }
            }
            .listRowInsets(EdgeInsets(top: 0, leading: -16, bottom: 0, trailing: 0))
            .listRowBackground(Color(UIColor.systemBackground))
            .listRowSeparator(.automatic)
        } label: {
            Text(title)
                .font(.headline)
                .fontWeight(.bold)
                .foregroundColor(.primary)
                .multilineTextAlignment(.center)
        }
        .listRowBackground(Color.clear)
        .listRowSeparator(.hidden)
    }
}

Each section of the list contains a DisclosureGroup, in which all the hidden rows are located. The DisclosureGroup itself has .listRowBackground(Color.clear) and .listRowSeparator(.hidden) to make the disclosure label look more like a section header (but it actually isn't).

The hidden rows all have the reverse: .listRowBackground(Color(UIColor.systemBackground)) and .listRowSeparator(.automatic).

The hidden rows all have a negative leading inset, to remove the inset added by the DisclosureGroup, which I think is a bit too much inset.

Output looks like this:

Caveats:

The sections are rather far apart. The spacing can be removed by .listSectionSpacing(0) if you are on iOS 17.

The top of the hidden rows also have their top flat, rather than rounded, because the disclosure label is technically the first row of the section.

An alternative to consider is to just get rid of the "section header" appearance (remove all the listRowBackground and listRowSeparator), and put everything in a single section (i.e. remove the Section { ... }, and let contactSection directly returns the DisclosureGroup).