SwiftUI列表部分中的圆角

Question

这是iOS 13健康应用程序-用户资料的屏幕截图。我最近开始学习swiftui，想知道如何开发下面这样的屏幕。我尝试了列表风格plain和grouped。但是我无法获得以下布局的外观。

使用swiftui-list纯粹开发这样的UI是否可行？

我特别寻找圆形部分并在列表中包含图像。

- uiroshan

---

是的，这样的UI可以完全使用SwiftUI制作。您能提供您已经拥有的代码，以便我们能够帮助您吗？ - LuLuGaGa

我刚刚在Swift UI中使用了List。没有特定的代码可以分享。 - uiroshan

Answer 1

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)

谢谢。

- NG235

---

不知道为什么这个有效（我猜测框架根据屏幕尺寸选择默认值），但它有效。对于希望去掉iPad边框的人，请使用.compact而不是.regular。 - Andrew Lipscomb

谢谢@AndrewL的评论。那非常正确。 - NG235

旋转手机时，使用这个功能会导致列表内容超出视图范围。 - Kyle Bradley

@KyleBradley 你是对的，列表行的内容超出了屏幕，在旋转到横向时被裁剪。一旦发生这种情况，当你旋转回纵向时，内容仍然被裁剪。 - Ryan Maloney

我认为屏幕内容超出范围的问题是SwiftUI的问题，而不是解决方案代码的问题。SwiftUI仍然相对较新，存在许多错误。我不认为有一种方法可以解决这个问题。希望这能澄清一些困惑。 - NG235

Answer 2

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

- Elijah Yap

Answer 3

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

当您将cornerRadius修饰符放在部分或列表上时，它仅适用于内部正在制作圆角单元格的任何内容，而部分本身保持不变。

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

类似于

SectionView: View {

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

将这些部分放在某个ZStack中的Color视图上，以获得灰色背景。

需要注意的是，巨大的缺点是ForEach会立即渲染所有单元格，就好像你有一千个单元格，那么onAppear()将为每个单元格调用，并且奇怪的是它们将按照相反的顺序被调用。

希望这可以帮到您。

- Ivan

Answer 4

根据我的研究以及截至 Xcode 11 GM seed 2 (11A420a) 的最新发现，仅使用 SwiftUI 列表无法创建此 UI。

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

- uiroshan