9

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.enter image description here

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

1 Answer 1

2

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)) 
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.