使用 SwiftUI 扁平化元组视图答案

【问题标题】：Flatten TupleViews using SwiftUI使用 SwiftUI 扁平化元组视图
【发布时间】：2019-06-07 21:14:55
【问题描述】：

好的，本周发布了 SwiftUI，所以我们都是 n00bs 但是......我有以下测试代码：

var body: some View {
    switch shape {
    case .oneCircle:
        return ZStack {
            Circle().fill(Color.red)
        }
    case .twoCircles:
        return ZStack {
            Circle().fill(Color.green)
            Circle().fill(Color.blue)
        }
    }
}

这会产生以下错误：

函数声明了一个不透明的返回类型，但其主体中的返回语句没有匹配的底层类型

这是因为第一个 ZStack 是这种类型：

ZStack<ShapeView<Circle, Color>>

第二个是这种类型：

ZStack<TupleView<(ShapeView<Circle, Color>, ShapeView<Circle, Color>)>>

如何在 SwiftUI 中处理这个问题？它们是否可以以某种方式展平或使其符合相同的类型。

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

解决此问题的一种方法是使用类型橡皮擦AnyView：

var body: some View {
    switch shape {
    case .oneCircle:
        return AnyView(ZStack {
            Circle().fill(Color.red)
        })
    case .twoCircles:
        return AnyView(ZStack {
            Circle().fill(Color.green)
            Circle().fill(Color.blue)
        })
    }
}

【讨论】：

这个答案“有效”，但如果它是正确的，有人可以权衡一下，如果是，为什么它有效？

【解决方案2】：

您还可以使用 Group，它是逻辑容器，因此不会改变任何视觉效果。

 var body: some View {
    Group {
     switch shape {
     case .oneCircle:
        return ZStack {
            Circle().fill(Color.red)
        }
     case .twoCircles:
        return ZStack {
            Circle().fill(Color.green)
            Circle().fill(Color.blue)
        }
     }
    }
}

【讨论】：

【解决方案3】：

我知道这是一个老问题。但是我偶然发现了它，现在正确的方法是使用@ViewBuilder 注释（注意缺少return）：

    @ViewBuilder var body: some View {
        switch shape {
        case .oneCircle:
            ZStack {
                Circle().fill(Color.red)
            }
        case .twoCircles:
            ZStack {
                Circle().fill(Color.green)
                Circle().fill(Color.blue)
            }
        }
    }

或者在这种特定情况下，排除ZStack：

    var body: some View {
        ZStack {
            switch shape {
            case .oneCircle:
                Circle().fill(Color.red)
            case .twoCircles:
                Circle().fill(Color.green)
                Circle().fill(Color.blue)
            }
        }
    }

【讨论】：