SwiftUI пользовательский стиль списка - PullRequest
Новая
       42

SwiftUI пользовательский стиль списка

4 голосов
/ 29 января 2020

Я хочу создать собственные выпадающие разделы с заголовком и некоторыми ячейками . В основном, я хочу, чтобы ячейки с тем же стилем (одинаковая ширина / белый фон / тень для всех ячеек в нижнем колонтитуле) для ячеек в качестве заголовка Проблема заключается в следующем:

  • Я не знаю, как удалить расстояние между элементами верхнего и нижнего колонтитула.
  • Между ячейками нижнего колонтитула не должно быть пробела.
  • Заполнение для элементы нижнего колонтитула не работают .padding ([.ading, .trailing], 20)
  • Также нельзя удалить тот белый фон, который идет на всю ширину. Должен быть только красным. enter image description here

ВИД КОНТЕНТА 

    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 Ответ

0 голосов
/ 23 апреля 2020

Чтобы устранить интервал, вам нужно 

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