有没有办法在 SwiftUI 中使列表样式内嵌分组?

Question

例如，假设我有一个像这样声明的列表

List {
Section {
Text(“Test Row Title 1”)
}
Section {
Text(“Test Row Title 2”)
}
}

是否可以使它的样式与UITableView.Style.insetGrouped相同？我找不到任何相关信息。 我以为它会像.listStyle(InsetGroupedStyle())一样简单

Answer 1

在 iOS 13.2 中，您可以在.listStyle(GroupedListStyle())上设置.environment(.horizontalSizeClass, .regular)以获得与UITableView.Style.insetGrouped相同的样式。

List {
Section {
Text(“Test Row Title 1”)
}
Section {
Text(“Test Row Title 2”)
}
}.listStyle(GroupedListStyle())
.environment(.horizontalSizeClass, .regular)

https://sarunw.com/tips/inset-grouped-in-swiftui/

Answer 2

显然，iOS/iPadOS 14中有一个新的API，它最终允许InsetGrouped样式出现在SwiftUI中。

List {
...
}
.listStyle(InsetGroupedListStyle())

Answer 3

我的实现并不理想，但这是我目前感到满意的。 我盯着创建了一个ViewModifier，CardViewModifier((，我用它来创建一个插入的卡片视图。 我在应用程序中的多个位置使用它，而不仅仅是列表。

struct CardViewModifier: ViewModifier {
var backgroundColor = Color(.systemBackground)
func body(content: Content) -> some View {
content
.padding()
.frame(maxWidth: .infinity)
.background(Color(.systemBackground))
.cornerRadius(12)
.padding()
}
}

为了"伪造"插入的分组列表，我将列表转换为滚动视图，将部分转换为VStacks，如下所示。

struct ContentView: View {
let data = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5"]
var body: some View {
ScrollView {
VStack {
ForEach(data, id:.self) { row in
VStack {
Text("Section 1, (row)")
Divider()
}
}
}
.modifier(CardViewModifier())
VStack {
ForEach(data, id:.self) { row in
Text("Section 2, (row)").padding()
}
}
.modifier(CardViewModifier())
}
.background(Color(.secondarySystemBackground))
}
}

就像我说的它不理想，但它会工作，直到苹果(或其他人(创建一个InsetGroupedListStyle。 发生这种情况时，应该是将滚动视图更改回列表并将 VStacks 更改回部分的简单情况。

祝你好运。。。

Answer 4

您可以将.environment(.horizontalSizeClass, .regular)添加到列表中。

Answer 5

下面的代码可能会为您提供帮助，并为您提供自定义自己的视图的解决方案。使用.cornerRadius和.padding修饰符：

struct ContentView: View {
var body: some View {
VStack {
List {
Section {
Text("Test Row Title 1")
}
Section {
Text("Test Row Title 2")
}
}.cornerRadius(20)
.padding()

List {
Section {
Text("Test Row Title 3")
}
Section {
Text("Test Row Title 4")
}
}.cornerRadius(20)
.padding()

}.background(Color.blue)
}
}