有没有办法在 SwiftUI 中制作 List 样式 insetGrouped？答案

【问题标题】：Is there a way to make List style insetGrouped in SwiftUI?有没有办法在 SwiftUI 中制作 List 样式 insetGrouped？
【发布时间】：2019-10-15 11:13:35
【问题描述】：

假设我有一个这样声明的列表

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

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

【问题讨论】：

标签： ios swiftui swiftui-list

【解决方案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/

【讨论】：

我在这里遇到的唯一缺点是，当您使用 NavigationView 并导航回使用此技巧的视图时，圆角部分会丢失/正方形（您必须强制以某种方式重绘以恢复圆角）。

【解决方案2】：

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

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

【讨论】：

你现在可以写.listStyle(.insetGrouped) :)

【解决方案3】：

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

【讨论】：

【解决方案4】：

下面的代码可能会对您有所帮助，并为您提供自定义视图的解决方案。使用.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)
  }
}

【讨论】：

这是一个不错的解决方案，但它的工作方式与 UITableView 上的 insetGrouped 相同。我不确定插入分组视图的角半径是多少。哦，我想没有办法删除列表中的分隔符，对吧？我知道我可以做到UITableView.appearance().separatorColor = .clear，但这看起来很丑，而且根本不像本地人。
是的，您是对的，看来您必须制作自己的自定义视图。是的，分离器就是解决方案。

【解决方案5】：

我的实现并不理想，但这是我目前满意的。我盯着创建一个 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()
    }
}

为了“伪造”一个 insetGrouped List，我将 List 转换为 ScrollView，将 Sections 转换为 VStack，就像这样。

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

就像我说的那样，它并不理想，但在 Apple（或其他人）创建 InsetGroupedListStyle 之前它会起作用。发生这种情况时，应该将 ScrollView 更改回 List 并将 VStacks 更改回 Sections 的简单案例。

祝你好运……

【讨论】：