title: SwiftUI custom list style
body: <p>I want to create custom drop down sections with <strong>header</strong> and some <strong>cells</strong>. 
  Basically I want cells with same style (same width/white background/shadow for all cells in footer) for cells as my header.
  The problem is:</p>
  
  <ul>
  <li>I don't know how to remove spacing between header and footer items.</li>
  <li>Should be no space between footer cells.</li>
  <li>Padding for footer items is not working <strong>.padding([.leading, .trailing], 20)</strong></li>
  <li>Also can't remove that white background that goes full width. Should be only red one.<a href="https://i.stack.imgur.com/CFI2L.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CFI2L.png" alt="enter image description here"></a></li>
  </ul>
  
  <p><strong>CONTENT VIEW</strong></p>
  
  <pre><code>    var body: some View {
      ScrollView{
          VStack(alignment: .center, spacing: 0){
              VStack{
                  Text("")
                      .foregroundColor(.white)
                      .fixedSize(horizontal: false, vertical: true)
                  Image("")
                      .renderingMode(.template)
                      .resizable()
                      .aspectRatio(contentMode: .fit)
                      .foregroundColor(Color.white)
                      .frame(width: 40, height: 40, alignment: .center)
              }
              .frame(minWidth: 0, maxWidth: .infinity, minHeight: 330, maxHeight: 330)
              .background(Color.darkBlue)
              TestView() //HERE IS CELL VIEW
                  .frame(minWidth: 0, maxWidth: .infinity, minHeight: UIScreen.main.bounds.height - 330, maxHeight: UIScreen.main.bounds.height - 330)
  
          }
              .padding(.horizontal, 0)
              .padding(.top, -20)
              .navigationBarTitle("")
              .navigationBarHidden(true)
      }
  }
  </code></pre>
  
  <p><strong>TestView</strong></p>
  
  <pre><code>var body: some View {
      List {
          ForEach(viewModel.latinities) { (section) in
              Section(header: HeaderView(section: section)
                  //.background(Color.white)
                  .clipped()
                  .cornerRadius(10)
                  .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.1)), radius: 5, x: 1, y: 5)
                  .onTapGesture {
                      self.viewModel.latinities[self.sectionIndex(section: section)].expanded.toggle()
              }, footer: EmptyView()) {
  
                  if !section.expanded {
  
                      ForEach(section.quotes) { (quote) in
                          QuoteViews(quote: quote)
                              .background(Color.red)
                              .cornerRadius(10)
                              .onTapGesture {
                                  let sectionIndex = self.sectionIndex(section: section)
                                  let quoteIndex = self.quoteIndex(section: sectionIndex, quote: quote)
                                  self.viewModel.latinities[sectionIndex].quotes[quoteIndex].expanded.toggle()
                          }
                      }
                  }
              }
          }
      }
      .onAppear { UITableView.appearance().separatorStyle = .none }
      .onDisappear { UITableView.appearance().separatorStyle = .singleLine }
      .background(Color.blue)
      .listStyle(GroupedListStyle())
  }
  </code></pre>