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

Posted 2023-02-24

【中文标题】有没有办法在 SwiftUI 中制作 List 样式 insetGrouped？

【英文标题】：Is there a way to make List style insetGrouped in SwiftUI?

【发布时间】：2019-10-15 11:13:35

【问题描述】：

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

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

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

【参考方案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 的简单案例。

祝你好运……