swiftui列表部分中的圆角

Question

这是iOS 13 Health应用程序-用户个人资料的屏幕截图。我最近从swiftui开始，想知道如何开发如下所示的屏幕。我尝试了简单列出样式并将其分组。但是我看不到下面的布局。

这样的UI可以完全使用swiftui-list开发吗？

我特别在寻找四舍五入的部分，并将图像包含在列表中。

Answer 1

我找到了完美的解决方案！从iOS 13.2开始，您可以使用以下代码。就像在UIKit中一样，它工作得非常好。

List {
    Section {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }

    Section {
        Text("Item 4")
        Text("Item 5")
        Text("Item 6")
    }
}.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)

谢谢。

Answer 2

从rest parameters开始，此列表样式为const noArguments = (...args) => { return args.length } const oneArgument = (...args) => { return args.length } const twoArguments = (...args) => { return args.length } console.log(noArguments()); // 0 console.log(oneArgument(1)); // 1 console.log(twoArguments(1, 2)); // 2

Answer 3

根据我的发现以及从Xcode 11 GM种子2（11A420a）开始，仅从swiftui列表中就不可能创建此UI。

有一种新的列表样式可用于名为insetGrouped的情节提要。它具有完全相同的外观。 https://developer.apple.com/documentation/uikit/uitableview/style

Answer 4

我遇到了同样的问题，看来您无法通过列表或节来实现。

当您将cornerRadius修饰符放置到一个节或列表上时，它仅适用于在节本身不变的情况下内部使单元四舍五入的任何内部函数。

我的解决方案是完全避免使用列表和节，并构建自定义列表。

类似

SectionView: View {

    body: some View = {
        VStack {
            ForEach {
                CellView()
            }
        }
        .background(Color.white)
        .cornerRadius(10)
        .padding()
    }
}

然后将这些部分放在Color的{​​{1}}视图上，以显示灰色背景。

请注意，巨大的缺点是ZStack会立即渲染所有单元格，例如，如果您有一千个单元格，那么ForEach将被每个单元格调用，并且奇怪的是它们将以向后顺序调用。

希望有帮助。