SwiftUI 自定义列表样式答案

【问题标题】：SwiftUI custom list styleSwiftUI 自定义列表样式
【发布时间】：2020-05-15 10:16:45
【问题描述】：

我想创建带有标题和一些单元格的自定义下拉部分。基本上，我希望单元格具有相同样式（页脚中所有单元格的宽度/白色背景/阴影）作为我的页眉。问题是：

我不知道如何删除页眉和页脚项目之间的间距。
页脚单元格之间不应有空格。
页脚项的填充不起作用.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)
    }
}

测试视图

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

【问题讨论】：

标签： swift user-interface swiftui

【解决方案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))

【讨论】：