SwiftUI ForEach 垂直分隔线布局奇怪答案

【问题标题】：SwiftUI ForEach vertical divider layout strangeSwiftUI ForEach 垂直分隔线布局奇怪
【发布时间】：2020-05-22 10:00:05
【问题描述】：

我是 SwiftUI 的初学者，在添加一些带有分隔符的 VStack 时遇到了 ForEach 布局的奇怪行为。

示例如下：

struct TestUserView: View {
    @State var users: [String] = ["John Doe",
                                  "Jane Doe",
                                  "James Doe",
                                  "Judy Doe"]

    var body: some View {
        VStack {
            ForEach(users, id: \.self) { user in
                VStack(spacing: 0) {
//                    Text("")
//                        .background(Color.blue)
//                        .frame(height: 0)
//
                    Rectangle()
                        .frame(height: 5)

                    HStack {
                        Text(user)
                            .font(.system(size: 55, weight: .bold))
                        Spacer()
                    }
                }
                .background(Color.green)
            }
        }
        .background(Color.purple)
    }
}

看起来像这样：

看到这个紫色区域。我不希望它在那里。奇怪的是，如果在分隔符之前添加文本（无论这是矩形、分隔符还是 Color.black），它就会消失。只需取消注释注释的代码，它就会变成预期的那样。

只是想知道这是错误还是我不理解 SwiftUI 布局。

如果这是预期的，请指点我一些有用的文档。

使用 XCode 11.5

【问题讨论】：

标签： ios swiftui divider vstack

【解决方案1】：

这是不同视图之间默认间距的影响。

这里有一个解决方案。使用 Xcode 11.4 / iOS 13.4 测试。

    var body: some View {
        VStack(spacing: 0) { // << explicit spacing !!

        // .. other code

【讨论】：