ios - 使用 SwiftUI 扁平化元组视图

Question

好的，本周发布了 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 中处理这个问题？它们可以以某种方式展平或使其符合相同的类型。

Answer 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)
        })
    }
}

Answer 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)
        }
     }
    }
}

Answer 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)
            }
        }
    }