swiftui 列表部分中的圆角

Posted 2023-02-24

【中文标题】swiftui 列表部分中的圆角

【英文标题】：Rounded corners in swiftui list sections

【发布时间】：2019-09-15 16:11:28

【问题描述】：

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

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

我正在专门寻找圆形部分并在列表中包含图像。

【问题讨论】：

是的，这样的 UI 可以完全使用 SwiftUI 制作。您能否提供您已有的代码以便我们为您提供帮助？

我刚刚在 swift ui 中玩过 List。没有具体的代码可以分享。

【参考方案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)

谢谢。

【讨论】：

不知道为什么会这样（我猜框架当时会根据屏幕尺寸选择默认值）但它确实有效。对于另辟蹊径的人（强制在 iPad 上缺少边框）使用 .compact 而不是 .regular

感谢@AndrewL 的评论。这是非常正确的。

当我旋转手机时，使用它会导致列表内容延伸到视图之外

@KyleBradley 你是对的，列表行的内容延伸到屏幕之外，当你旋转到横向时会被剪掉。一旦发生这种情况，当您旋转回纵向时，内容仍会被剪裁。

我认为内容超出屏幕的问题是 SwiftUI 问题，而不是解决方案代码的问题。 SwiftUI 仍然相当新，并且有很多错误。我不认为有办法解决这个问题。希望这能消除一些困惑。

【参考方案2】：

截至iOS 14.0，此列表样式为.listStyle(InsetGroupedListStyle())

【参考方案3】：

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

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

【参考方案4】：

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

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

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

有点像

SectionView: View 

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

然后将这些部分放在Color 视图中的某些ZStack 上，以具有灰色背景。

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

希望对你有帮助。