iOS15系统下SwiftUI使用ZStack布局时出现两个列表的原因是什么？

复现步骤 #

• 创建新的List组件
• 使用ZStack为列表添加叠加效果

异常表现 #

列表渲染时出现两个重叠的列表视图，效果如下图：

异常原因 #

这个问题由iOS 15对SwiftUI List组件的默认渲染逻辑改动导致：

• iOS 15中List的默认样式从之前的PlainListStyle调整为InsetGroupedListStyle，该样式会生成两层独立渲染的视图：底层负责承载分组背景、全局边距等装饰元素，上层负责承载实际的单元格内容，两层默认是嵌套关系。
• 当在ZStack中添加叠加效果时，叠加操作会触发List的二次布局，系统bug会导致两层视图没有正常嵌套，而是平级渲染在ZStack的同一层级，出现错位后视觉上就呈现为两个重叠的列表。

修复方案 #

方案1：指定纯列表样式（推荐） #

明确指定List使用普通无背景样式，禁用双层渲染逻辑：

List {
    // 列表内容
}
.listStyle(.plain)

方案2：保留分组样式的修复 #

如果需要保留分组圆角效果，可手动清空List的默认背景，强制合并渲染层级：

List {
    // 列表内容
}
.listStyle(.insetGrouped)
.background(.clear)

内容的提问来源于stack exchange，提问作者l1Dan