有没有办法在SwiftUI中使List样式insetGrouped?

时间:2019-10-15 11:13:35

标签: ios swiftui swiftui-list

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

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

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

这样简单

5 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:1)

以下代码可以为您提供帮助,并为您提供自定义视图的解决方案。玩.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)
  }
}

答案 2 :(得分:1)

我的实现并不理想,但这是我目前很满意的。我盯着创建一个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列表,我将列表转换为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。

祝你好运...

答案 3 :(得分:1)

在iOS 13.2中,您可以将.environment(\.horizontalSizeClass, .regular)上的.listStyle(GroupedListStyle())设置为与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/

答案 4 :(得分:0)

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