23

这是 iOS 13 Health 应用程序 - 用户配置文件的屏幕截图。我最近开始使用，想知道如何开发如下所示的屏幕。我尝试了简单和分组的列表样式。但我看不到下面的布局。

这样的 UI 可以纯粹使用开发吗？

我专门寻找圆形部分并在列表中包含图像。 iOS 13 健康应用程序 - 用户配置文件

4

4 回答 4

38

从 iOS 14 开始，您可以使用以下代码。它工作得非常完美，就像在 UIKit 中一样。

List {
    Section {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
    
    Section {
        Text("Item 4")
        Text("Item 5")
        Text("Item 6")
    }
}.listStyle(InsetGroupedListStyle()) // this has been renamed in iOS 14.*, as mentioned by @Elijah Yap
.environment(\.horizontalSizeClass, .regular)

谢谢你。

于 2020-01-07T06:20:17.463 回答
21

从iOS 14.0开始，此列表样式为.listStyle(InsetGroupedListStyle())

于 2020-07-23T15:51:19.633 回答
2

我遇到了同样的问题，看起来你无法通过列表或部分来实现这一点。

当您将cornerRadius 修饰符放在一个部分或列表上时，它只会应用于内部使单元格变圆而部分本身未更改的任何内容。

我的解决方案是完全避免列表和部分并构建自定义列表和部分。

就像是

SectionView: View {

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

并将这些部分放在Color某些视图上ZStack以具有灰色背景。

考虑到最大的缺点是 aForEach会立即渲染所有单元格，就像如果你有一千个单元格，那么onAppear()每个单元格都会被调用，奇怪的是它们会以倒序调用。

希望能帮助到你。

于 2019-10-26T14:24:36.103 回答
2

根据我的发现以及从 Xcode 11 GM 种子 2 (11A420a) 开始，仅从 swiftui 列表中制作此 UI 是不可能的。

有一个可用于故事板的新列表样式，名为insetGrouped. 它具有完全相同的外观。 https://developer.apple.com/documentation/uikit/uitableview/style

于 2019-09-17T07:50:45.393 回答