SwiftUI custom list style

Question

I want to create custom drop down sections with header and some cells. 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:

• I don't know how to remove spacing between header and footer items.
• Should be no space between footer cells.
• Padding for footer items is not working .padding([.leading, .trailing], 20)
• Also can't remove that white background that goes full width. Should be only red one.

CONTENT VIEW

    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)
    }
}

TestView

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())
}

Answer 1

To eliminate the spacing spacing you need

 .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) 

called on both the of the section block and the cell block. Something like this:

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()
                    }.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) 
                }
            }
        }.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))