VStack 有最大限制吗？

Question

我从一个干净的项目开始，在 VStack 中添加了 5 个按钮和 5 个垫片，一切都很好。当我在底部添加第 6 个间隔符时，代码突然无法编译并出现错误："Ambiguous reference to member 'buildBlock()'".

导致此错误的原因是什么？这是与 SwiftUI 相关的错误吗？或者它是一个功能？这不是我第一次注意到 VStack 或 HStack 的条目数量受到限制，是否有相关文档？

不太自信，我应该切换回 UIKit 吗？

Answer 1

您的 VStack（以及 ZStack、HStack 等）中最多可以有 10 个 children。这与它们的实现和一般的 @ViewBuilder 闭包的实现密切相关。看下面的接口（可以通过xCode找到，为了更易读，我稍微简化了一些）：

public struct ViewBuilder {    
    /// Builds an empty view from an block containing no statements, `{ }`.
    public static func buildBlock() -> EmptyView

    /// Passes a single view written as a child view (e..g, `{ Text("Hello") }`) through
    /// unmodified.
    public static func buildBlock<Content>(_ content: Content) -> Content where Content : View
}

extension ViewBuilder {    
    public static func buildBlock<C0, C1>(_ c0: C0, _ c1: C1) -> TupleView<(C0, C1)> where C0 : View, C1 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2>(_ c0: C0, _ c1: C1, _ c2: C2) -> TupleView<(C0, C1, C2)> where C0 : View, C1 : View, C2 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3) -> TupleView<(C0, C1, C2, C3)> where C0 : View, C1 : View, C2 : View, C3 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3, C4>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4) -> TupleView<(C0, C1, C2, C3, C4)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3, C4, C5>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5) -> TupleView<(C0, C1, C2, C3, C4, C5)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6) -> TupleView<(C0, C1, C2, C3, C4, C5, C6)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View, C6 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View, C6 : View, C7 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View, C6 : View, C7 : View, C8 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9>(_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)> where C0 : View, C1 : View, C2 : View, C3 : View, C4 : View, C5 : View, C6 : View, C7 : View, C8 : View, C9 : View
}

如您所见，您最多可以构建 10 个 children 类型的视图。每个 buildBlock 方法都将确切数量的视图作为参数。这是因为 @ViewBuilder 闭包，至少目前，不支持可变参数。

解决方法可以是：

struct ContentView: View {
    var body: some View {
        VStack {
            Group {
                //10 views here
            }

            Group {
                //10 views here
            }
        }
    }
}

Answer 2

SwiftUI 使用 ViewBuilder 构造构成许多 SwiftUI 视图的视图，例如 VStack、HStack、List 等。如果您看一下在 ViewBuilder 文档中，您会看到 buildBlock 函数有很多副本，每个副本都有不同数量的视图作为参数。具有最多视图的函数仅接受 10 个视图，这就是为什么您会看到所观察到的限制。解决此问题的一种方法是使用 Groups:

VStack {
    Group {
        Text("Placeholder 0")
        Text("Placeholder 1")
        Text("Placeholder 2")
        Text("Placeholder 3")
        Text("Placeholder 4")
        Text("Placeholder 5")
        Text("Placeholder 6")
        Text("Placeholder 7")
        Text("Placeholder 8")
        Text("Placeholder 9")
    }
    Group {
        Text("Other Placeholder 10")
        Text("Other Placeholder 11")
        Text("Other Placeholder 12")
        Text("Other Placeholder 13")
        Text("Other Placeholder 14")
        Text("Other Placeholder 15")
        Text("Other Placeholder 16")
        Text("Other Placeholder 17")
        Text("Other Placeholder 18")
        Text("Other Placeholder 19")
    }
}

虽然如果你想要 20 个彼此非常相似的视图，我们鼓励使用类似 ForEach 的东西来避免让你的视图过于臃肿。仅当 >10 个视图真正独一无二时才应使用上述解决方法。即便如此，一个更 SwiftUI-y 的方法是将这些视图拆分成更小的视图：

VStack {
    SingleDigitPlaceholders()
    TeensPlaceholders()
}

struct SingleDigitPlaceholders: View {
    var body: some View {
        ForEach(0..<10) { i in
            Text("Placeholder \(i)")
        }
    }
}
struct TeensPlaceholders: View {
    var body: some View {
        ForEach(10..<20) { i in
            Text("Other Placeholder \(i)")
        }
    }
}

当然，在这个具体的例子中，你可以只用原始视图中的两个ForEach，但在更复杂的情况下，这一点仍然成立。例如，在包含许多元素的表单中（例如，在工作申请表中：名字、姓氏、地址、phone 数字文本字段、教育下拉菜单、日期字段等），您仍然可以拆分一个查看更小的组件（在工作申请示例中 - 个人信息视图、教育信息视图等）。

Answer 3

在我的视图周围添加组后我有 6 个视图，我仍然在调用错误中收到额外参数。

这就是我修复错误的方法。

struct ContentView: View {
    var body: some View {
        VStack {
            Group {
                //3 views here
            }

            Group {
                //3 views here
            }
        }
    }
}

Answer 4

这是一个 ViewBuilder 扩展，最多支持 20 个额外的视图。

import SwiftUI

extension ViewBuilder {

    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13, C14>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13, _ c14: C14
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13, C14)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View, C14: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13, c14)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13, C14, C15>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13, _ c14: C14, _ c15: C15
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13, C14, C15)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View, C14: View, C15: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13, c14, c15)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13, C14, C15, C16>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13, _ c14: C14, _ c15: C15, _ c16: C16
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13, C14, C15, C16)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View, C14: View, C15: View, C16: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13, c14, c15, c16)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13, C14, C15, C16, C17>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13, _ c14: C14, _ c15: C15, _ c16: C16, _ c17: C17
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13, C14, C15, C16, C17)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View, C14: View, C15: View, C16: View, C17: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13, c14, c15, c16, c17)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13, C14, C15, C16, C17, C18>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13, _ c14: C14, _ c15: C15, _ c16: C16, _ c17: C17, _ c18: C18
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13, C14, C15, C16, C17, C18)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View, C14: View, C15: View, C16: View, C17: View, C18: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13, c14, c15, c16, c17, c18)) }
        ))
    }
    
    public static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13, C14, C15, C16, C17, C18, C19>(
        _ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10, _ c11: C11, _ c12: C12, _ c13: C13, _ c14: C14, _ c15: C15, _ c16: C16, _ c17: C17, _ c18: C18, _ c19: C19
    ) -> TupleView<
        (
            Group<TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9)>>,
            Group<TupleView<(C10, C11, C12, C13, C14, C15, C16, C17, C18, C19)>>
        )
    >
    where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View, C11: View, C12: View, C13: View, C14: View, C15: View, C16: View, C17: View, C18: View, C19: View {
        TupleView((
            Group { TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9)) },
            Group { TupleView((c10, c11, c12, c13, c14, c15, c16, c17, c18, c19)) }
        ))
    }
}

VStack 有最大限制吗？

Are there maximum limits to VStack?

swiftui

vstack