SwiftUI 2 - How to prevent the top section from closing in a list in macOS and iPadOS

Question

In a SwiftUI 2 navigation bar I have a list with multiple sections. All sections have a header, however I want the top section to never be closed and the elements will never be hidden. This is ask for only the first header and also want that the disclosure indicator / collapsing symbol to be gone or hidden.

Can this be done in SwiftUI 2? I want to have this to work in macOS and iPadOS.

@State var agendaViews: [String] = ["Agenda", "Client", "Next Client"]
@State var treatmentViews: [String] = ["Treatment", "Products", "Merchandising"]
@State var selectionAgenda: String?

var body: some View {
    NavigationView {
        VStack {
            List(selection: $selectionAgenda) {
                Section(header: ListHeader()) {    // <<<<<<< For this section no Close Icon and No way to close this section.
                    ForEach(agendaViews, id: \.self) { string in
                        NavigationLink(destination: DetailsView(test: string)) {
                            Text(string)
                        }
                    }
                }
                Section(header: ListHeader2(), footer: ListFooter2()) {
                    ForEach(treatmentViews, id: \.self) { string in
                        NavigationLink(destination: DetailsView2(test: string)) {
                            Text(string)
                        }
                    }
                }
            }.listStyle(SidebarListStyle())
    }
  }
}

struct ListHeader1: View {
  var body: some View {
      HStack {
        Image(systemName: "calendar")
        Text("Agenda")
      }
    }
  }
  struct ListHeader2: View {
  var body: some View {
     HStack {
        Image(systemName: "person.3")
        Text("Clienten")
     }
    }
   }

   struct ListFooter3: View {
     var body: some View {
       Text("===")
     }
   }

I hope my question is clear. As always thank you very much.

Some image added to show that a section header has a close and open button.

Answer 1

Use the collapsible view modifier for the Section. Your first section would become:

Section(header: ListHeader()) {
    ForEach(agendaViews, id: \.self) { string in
        NavigationLink(destination: DetailsView(test: string)) {
            Text(string)
        }
    }
}
.collapsible(false)

Answer 2

Not really 'the' answer but for now a solution to my issue. Still if someone knows a better solution please correct me.

I did change the following in the code:

var body: some View {
        VStack  {
            List(selection: $selectionAgenda) {
                ListHeader1()
                ForEach(agendaViews, id: \.self) { string in
                    NavigationLink(destination: DetailsView2(test: string)) {
                        Text(string)
                    }
                }
                Section(header: ListHeader2(), footer: ListFooter2()) {
                    ForEach(treatmentViews, id: \.self) { string in
                        NavigationLink(destination: DetailsView2(test: string)) {
                            Text(string)
                        }

                    }

                }
            }
            .listStyle(SidebarListStyle())
       }
   }


struct ListHeader1: View {
    var body: some View {
        HStack {
            Image(systemName: "calendar")
            Text("Agenda")
        }.font(.title2)
    }
}

struct ListHeader2: View {
    var body: some View {
        HStack {
            Image(systemName: "person.3")
            Text("Clienten")
        }.font(.title2)
    }
}

In text, I did remove only the first section of the list and replace it with just the Header View, and Voila, on the iPad it looks good for the moment.

Answer 3

This collapsing feature is purely based on what SwiftUI thinks the List for the list should be.

At least to my knowledge, this happens with Sections inside of Lists.

I've been messing around with this because I ran into the same dilemma so I put together a little example app.

Screenshot of ListStyle Example App

import SwiftUI
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                List {
                    Section {
                        Text(".automatic")
                    }
                }
                .listStyle(.automatic)
                List {
                    Section {
                        Text(".sidebar")
                    }
                }
                .listStyle(.sidebar)
                List {
                    Section {
                        Text(".plain")
                    }
                }
                .listStyle(.plain)
                List {
                    Section {
                        Text(".grouped")
                    }
                }
                .listStyle(.grouped)
                List {
                    Section {
                        Text(".inset")
                    }
                }
                .listStyle(.inset)
                 List {
                     Section {
                         Text(".insetGrouped")
                     }
                 }
                .listStyle(.insetGrouped)
            }
            .navigationTitle("ListStyle Examples")
        }
    }
}

Everything apart from .automatic and .sidebar seems to remove the collapsing arrows :)