如何使用带有半径部分的swiftui设计表格

Question

我想使用 swiftui 设计一个如下所示的表单 https://66.media.tumblr.com/8674652bc73f2cf387e29f067c07adac/tumblr_inline_py9ypv0dxv1qjmlje_500.png

表格在图像中没有背景，部分的半径采用不同的背景颜色。

我试过设置表格的背景颜色，但不起作用。

关于如何使用 swiftui 设计表单的任何想法。

Answer 1

如果您指的是具有灰色背景的列表单元格的圆角，这是插入分组 table 视图样式的一部分，SwiftUI 当前不支持 - 目前仅支持 UIKit。 https://twitter.com/twostraws/status/1142838324123656192?lang=en

现在，您可以在 SwiftUI 中使用分组列表样式来创建较暗的背景，只是单元格不会像您的示例中那样被圆化。参见：https://www.hackingwithswift.com/quick-start/swiftui/how-to-make-a-grouped-list

List {
        Section(header: Text("Examples")) {
            Text("Row 1")
        }
}.listStyle(GroupedListStyle())

Answer 2

可用于 iOS/iPadOS 14 on Xcode 12。您可以使用 Form 而不是 List 来获得这种外观。

struct FormView: View {
    let destination = URL(string: "https://www.apple.com")!
    
    var body: some View {
        Form {
            Section(header: Text("Section 1")) {
                Link(destination: destination) {
                    Label("Terms and Conditions", systemImage: "doc")
                }
                Link(destination: destination) {
                    Label("Policy", systemImage: "doc.plaintext")
                }
            }
            Section(header: Text("Section 2")) {
                Link(destination: destination) {
                    Label("Change Password", systemImage: "lock")
                }
                Link(destination: destination) {
                    Label("Security", systemImage: "shield")
                }
                Link(destination: destination) {
                    Label("Privacy", systemImage: "doc")
                }
            }
        }
    }
}

如何使用带有半径部分的swiftui设计表格

How to design forms using swiftui with sections having radius

forms

radius

ios

swiftui