如何在SwiftUI中使用VStack复刻原生List样式？

我需要实现List组件无法支持的深度自定义能力，因此不得不使用ScrollView、VStack与ForEach视图重构列表组件。我希望复刻List的原生外观，但实际实现难度远超预期。

以下是我当前的实现代码：

struct ContentView_Previews: PreviewProvider {
    static let data: [String] = (0..<5).map { "Row \($0)" }

    static var previews: some View {
        Group {
            List(data) { element in
                NavigationLink(element) {
                    Text(element)
                }
            }
            .previewDisplayName("List")
            ScrollView {
                VStack {
                    ForEach(data) { element in
                        NavigationLink {
                            Text(element)
                        } label: {
                            HStack {
                                Text(element)
                                Spacer()
                                Image(systemName: "chevron.right")
                                    .foregroundColor(.secondary)
                                    .font(.caption)
                            }
                        }
                        .buttonStyle(.plain)
                        .padding(.vertical, 8)
                        .padding(.horizontal)
                        if element != data.last {
                            Divider()
                                .padding(.leading)
                        }
                    }
                }
                .frame(maxWidth: .infinity)
                .background(Color(.secondarySystemBackground))
                .cornerRadius(10)
                .padding(20)
                .padding(.vertical)
            }
            .previewDisplayName("ForEach")
        }
        .previewLayout(.fixed(width: 350, height: 350))
        .preferredColorScheme(.dark)
    }
}

extension String: Identifiable {
    public var id: String { self }
}

我编写了大量代码才实现当前效果，但最终呈现的样式和原生List仍存在偏差：

是否存在更优的方式可以继承List的原生样式？我曾尝试在VStack上应用.listStyle修饰符，但该方法并未生效。

完全从零手写复刻List样式性价比极低，系统不同版本、不同动态字体设置、不同设备下的原生List边距、分割线缩进、箭头大小参数都会动态调整，硬编码的数值永远无法和原生效果完全对齐，推荐两种更合理的实现方式：

• 优先使用原生List配合内置行修饰符实现自定义
  绝大多数被认为List无法实现的需求，都可以通过内置修饰符完成：行内布局完全支持自定义，分割线显隐/缩进、行背景、选中态、行高、边距都有对应API。注意.listStyle仅对List组件生效，直接添加在VStack上不会有任何效果。
• 如果确实需要突破List的容器限制（比如跨行列布局、滚动吸附效果等List完全不支持的能力），可以复用系统原生列表样式修饰符，不需要手动绘制UI元素
  将VStack替换为和List性能一致的LazyVStack，配合系统的列表相关修饰符即可自动匹配原生外观，参考实现：

  ScrollView {
      LazyVStack(spacing: 0) {
          ForEach(data, id: \.self) { element in
              NavigationLink {
                  Text(element)
              } label: {
                  Text(element)
                      .frame(maxWidth: .infinity, alignment: .leading)
                      .padding(.vertical, 8)
                      .padding(.horizontal)
              }
              .buttonStyle(.plain)
              // 复用原生行背景样式
              .listRowBackground(Color(.secondarySystemBackground))
          }
      }
      .scrollContentBackground(.hidden)
      .background(Color(.systemGroupedBackground))
      .clipShape(RoundedRectangle(cornerRadius: 10))
      .padding(20)
  }
  

注意：不要给String全局扩展Identifiable，直接在ForEach中使用id: \.self参数即可，避免后续出现重复字符串时的列表渲染异常。

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