如何创建类SwiftUI List的自定义视图？支持多视图传入并加分隔线

要实现你要的效果，核心是利用SwiftUI的@ViewBuilder和TupleView处理多子视图，再通过遍历插入分隔线。以下是完整实现方案：

1. 先写TupleView转数组的扩展 #

因为@ViewBuilder会把多个子视图打包成TupleView，我们需要把它转换成可遍历的视图数组：

extension TupleView {
    var children: [AnyView] {
        Mirror(reflecting: value).children.map { child in
            AnyView(child.value as! View)
        }
    }
}

2. 实现CustomView #

利用上面的扩展，遍历子视图并插入分隔线：

struct CustomView<Content: View>: View {
    private let content: Content
    
    // 用@ViewBuilder修饰闭包，支持多子视图写法
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            // 遍历子视图数组，每个视图后加Divider（最后一个不加）
            ForEach(Array(zip(content.children.indices, content.children)), id: \.0) { index, view in
                view
                if index != content.children.count - 1 {
                    Divider()
                }
            }
        }
    }
}

3. 使用示例 #

完全符合你期望的调用方式：

CustomView {
    Text("TBD")
    Text("TBD")
    Image(systemName: "heart")
}

关键逻辑说明 #

• @ViewBuilder让自定义视图支持像VStack/List那样直接写多个子视图
• 通过Mirror解析TupleView的内部子视图，转成数组后就能灵活处理
• ForEach遍历数组时，通过索引判断是否添加分隔线，避免最后一个视图后出现多余分隔线
• VStack设置spacing: 0，保证视图和分隔线紧密贴合，和原生效果一致

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