ios - SwiftUI:使用 Spacers 在一个 VStack 中均匀分布多个 VStack

Question

我正在尝试构建一个包含多个 VStack(元素)的 VStack(容器)，每个 VStack 都有一个标题和一个文本。元素 VStack 应该均匀分布，并且之间有间隔。

由于某种原因，它最多只能工作 4 个元素 VStack，如果我增加，就会收到错误

Failed to build ContentView.swift
Ambiguous reference to member 'buildingBlock()'

这是我的代码:

import SwiftUI

struct ContentView: View {
    var body: some View {

        VStack {
            Spacer()
            VStack {
                Text("Title 1")
                Text("Text 1")
            }
            Spacer()
            VStack {
                Text("Title 2")
                Text("Text 2")
            }
            Spacer()
            VStack {
                Text("Title 3")
                Text("Text 3")
            }
            Spacer()
            VStack {
                Text("Title 4")
                Text("Text 4")
            }
            Spacer()
            VStack {
                Text("Title 5")
                Text("Text 5")
            }
            Spacer()
            VStack {
                Text("Title 6")
                Text("Text 6")
            }
            Spacer()
            VStack {
                Text("Title 7")
                Text("Text 7")
            }
            Spacer()
            VStack {
                Text("Title 8")
                Text("Text 8")
            }
            Spacer()
            VStack {
                Text("Title 9")
                Text("Text 9")
            }
            Spacer()
            VStack {
                Text("Title 10")
                Text("Text 10")
            }
            Spacer()'
        }
        .background(Color.red)

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

由于 SwiftUI 的实现方式，一个 View 最多只能有 10 个直接、显式的 subview 。您的顶级 VStack 有 21 个直接 subview :10 个子 VStack 以及它们周围的 11 个 Spacer。

有多种解决方法。如果你确实需要一个硬编码的 subview 列表，你可以使用Group来使一些 subview 成为间接的:

struct ContentView: View {
    var body: some View {

        VStack {
            Group {
                Spacer()
                VStack {
                    Text("Title 1")
                    Text("Text 1")
                }
                Spacer()
                VStack {
                    Text("Title 2")
                    Text("Text 2")
                }
                Spacer()
                VStack {
                    Text("Title 3")
                    Text("Text 3")
                }
            }
            Group {
                Spacer()
                VStack {
                    Text("Title 4")
                    Text("Text 4")
                }
                Spacer()
                VStack {
                    Text("Title 5")
                    Text("Text 5")
                }
                Spacer()
                VStack {
                    Text("Title 6")
                    Text("Text 6")
                }
            }
            Group {
                Spacer()
                VStack {
                    Text("Title 7")
                    Text("Text 7")
                }
                Spacer()
                VStack {
                    Text("Title 8")
                    Text("Text 8")
                }
                Spacer()
                VStack {
                    Text("Title 9")
                    Text("Text 9")
                }
            }
            Spacer()
            VStack {
                Text("Title 10")
                Text("Text 10")
            }
            Spacer()
        }
        .background(Color.red)
    }
}

这里，顶级VStack有6个直接子级:3个Group、2个Spacer和1个VStack.每个Group还有6个直接子级:3个VStack和3个Spacer。没有 View 拥有超过 10 个直接子级。

这里更好的方法是使用 ForEach 生成子项:

struct ContentView: View {
    var body: some View {

        VStack {
            Spacer()
            ForEach(1 ... 10, id: \.self) { i in
                Group {
                    VStack {
                        Text("Title \(i)")
                        Text("Text \(i)")
                    }
                    Spacer()
                }
            }
        }
        .background(Color.red)
    }
}

现在顶级VStack只有两个直接 subview :第一个Spacer和ForEach。 ForEach 根据需要多次复制其 subview (Group)。

在本例中，我们使用 Group 来允许 Swift 推断 ForEach 主体的类型，因为 ForEach 主体将包含两个语句(VStack 和 Spacer)会阻止 Swift 推断其类型。