Reduce Form spacing between sections SwiftUI
Asked Answered
R

1

6

I'm trying to make a notes app with SwiftUI and I'd like to show the notes similar to the Apollo Reddit app does.

The way it shows the post isn't anything special, it just shows the posts using an interface similar to a list with GroupedListStyle(), but with less spacing between sections.

I've tried a lot of tricks to reduce this spacing, but none of them seems to work.

TL;DR

I've got this:enter image description here

And I want this: enter image description here

Any help is appreciated. Thanks in advance!

Here's my code:

import SwiftUI

struct NotesView: View {

    let array = [
        Note(title: "Mi pana miguel letra", content:
        """
        [Intro: Keyan JRN & Producer Tag]
        El pana Miguel, yah, ey
        El pana Miguel, yah, ey (Snorkatje)
        Mi pana, mi pana, yeah
        Mi pana, mi pana, yeah
        Mi pana, mi pana, yeah, eh-eh
        Uh-uh-uh-uh-uh-uh

        [Estribillo]
        Ha-ha-hace un rato conocí al pana Miguel
        No-no voy a mentir, se ve bastante fresco
        (Ey, tío, ¿conoces a IlloJuan?) ¿Quién?
        (IlloJuan) No, que quién te ha preguntado (No-oh)
        Ha-hace un rato conocí al pana Miguel (Pana Miguel)
        No voy a mentir, se ve bastante fresco (Bastante fresco)
        Y el desgraciado de Matías que se vaya ya (Uh-uh, uh, uh)
        Prefiero quedarme aquí con mi pana, sentado
        """
        ),
        Note(title: "Note 02", content: "This is a test note."),
        Note(title: "Note 03", content: "This is a test note that is supposed to be longer than just 3 lines to test the note preview. Since I cba to write...")
    ]

    @ObservedObject var searchBar: SearchBar = SearchBar()

    var body: some View {

        NavigationView {

            List {

                if array.count > 0 {
                    ForEach(
                        array.filter
                        {
                            searchBar.text.isEmpty ||
                                $0.id.localizedStandardContains(searchBar.text)
                        },
                        id: \.self
                    ) { eachNote in

                        Section {
                            NoteView(note: eachNote)
                        }.buttonStyle(PlainButtonStyle())

                    }
                } else {

                    NavigationLink(destination: NotesTextEditor()) {
                        Text("Create a new post")
                    }

                }


            }
            .listStyle(GroupedListStyle())

            .add(self.searchBar)

        }

    }

}
Reinaldoreinaldos answered 3/6, 2020 at 19:55 Comment(0)
W
2

The possible solution is to use custom a-la group separator, instead of standard.

Tested with Xcode 11.4 / iOS 13.4 on some replicated code.

demo

List {
    ForEach(array.indices, id: \.self) { i in
        VStack(spacing: 0) {
            Text(self.array[i].title)
                .padding(.horizontal)
            Text(self.array[i].content)
                .padding(.horizontal)

            if i != self.array.count - 1 { // don't show for last
                Rectangle().fill(Color(UIColor.systemGroupedBackground))
                   .frame(height: 16) // << fit as you need
            }
        }.listRowInsets(EdgeInsets()) // << avoid extra space
    }
}.listStyle(GroupedListStyle())
Worthy answered 4/6, 2020 at 3:36 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.