减少 SwiftUI 各部分之间的表单间距

Question

我正在尝试使用 SwiftUI 制作一个笔记应用程序，并且我想显示类似于Apollo Reddit 应用程序的笔记。

\n\n

它显示帖子的方式没有什么特别的，它只是使用类似于列表的界面显示帖子GroupedListStyle()，但各部分之间的间距较小。

\n\n

我尝试了很多技巧来减少这个间距，但似乎都不起作用。

\n\n

长话短说

\n\n

我有这个：

\n\n

我想要这个：\n

\n\n

任何帮助表示赞赏。提前致谢！

\n\n

这是我的代码：

\n\n

import SwiftUI\n\nstruct NotesView: View {\n\n    let array = [\n        Note(title: "Mi pana miguel letra", content:\n        """\n        [Intro: Keyan JRN & Producer Tag]\n        El pana Miguel, yah, ey\n        El pana Miguel, yah, ey (Snorkatje)\n        Mi pana, mi pana, yeah\n        Mi pana,\xe2\x80\x85mi\xe2\x80\x85pana, yeah\n        Mi pana,\xe2\x80\x85mi pana, yeah, eh-eh\n        Uh-uh-uh-uh-uh-uh\n\n        [Estribillo]\n        Ha-ha-hace un rato\xe2\x80\x85conoc\xc3\xad al pana Miguel\n        No-no voy a mentir, se ve bastante\xe2\x81\x9ffresco\n        (Ey,\xe2\x81\x9ft\xc3\xado,\xe2\x81\x9f\xc2\xbfconoces a IlloJuan?)\xe2\x81\x9f\xc2\xbfQui\xc3\xa9n?\n        (IlloJuan) No, que\xe2\x81\x9fqui\xc3\xa9n te ha preguntado (No-oh)\n        Ha-hace un rato conoc\xc3\xad al pana Miguel (Pana Miguel)\n        No voy a mentir, se ve bastante fresco (Bastante fresco)\n        Y el desgraciado de Mat\xc3\xadas que se vaya ya (Uh-uh, uh, uh)\n        Prefiero quedarme aqu\xc3\xad con mi pana, sentado\n        """\n        ),\n        Note(title: "Note 02", content: "This is a test note."),\n        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...")\n    ]\n\n    @ObservedObject var searchBar: SearchBar = SearchBar()\n\n    var body: some View {\n\n        NavigationView {\n\n            List {\n\n                if array.count > 0 {\n                    ForEach(\n                        array.filter\n                        {\n                            searchBar.text.isEmpty ||\n                                $0.id.localizedStandardContains(searchBar.text)\n                        },\n                        id: \\.self\n                    ) { eachNote in\n\n                        Section {\n                            NoteView(note: eachNote)\n                        }.buttonStyle(PlainButtonStyle())\n\n                    }\n                } else {\n\n                    NavigationLink(destination: NotesTextEditor()) {\n                        Text("Create a new post")\n                    }\n\n                }\n\n\n            }\n            .listStyle(GroupedListStyle())\n\n            .add(self.searchBar)\n\n        }\n\n    }\n\n}\n

\n

Answer 1

可能的解决方案是使用自定义 a-la 组分隔符，而不是标准分隔符。

使用 Xcode 11.4 / iOS 13.4 对一些复制代码进行了测试。

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