SwiftUI 自定义列表样式

Question

我想用 创建自定义下拉部分标题和一些 细胞 .
基本上，我希望单元格与我的标题具有相同样式(页脚中所有单元格的宽度/白色背景/阴影相同)。
问题是:

我不知道如何删除页眉和页脚项目之间的间距。

页脚单元格之间应该没有空格。

页脚项目的填充不起作用 .padding([.leading, .trailing], 20)

也无法删除全宽的白色背景。应该只有红色。

内容查看

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

测试 View

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

消除你需要的间距

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

在节块和单元块上调用。
像这样的东西:

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