如何将通用 SwiftUI 视图添加到另一个视图？

Question

当尝试使用泛型类型初始化/添加视图到另一个 SwiftUI 视图时，我收到错误Type 'T' has no member 'init' 。 如何解决？

我想问题是， View只是一个协议，它只需要一个body属性，仅此而已。 但是可以改用什么类型呢？

简单示例：

尝试使用应该创建/显示T类型的三个视图的TrippleView<T: View> 。 添加视图（ RedRectView或BlueCircleView ）没问题。 将这些视图作为通用参数传递失败：

struct SomeView: View {
    var body: some View {
        TrippleView<RedRectView>()
        TrippleView<BlueCircleView>()
    }
}

struct TrippleView<T: View>: View {
    var body: some View {
        VStack {
            // Does NOT work: Type 'T' has no member 'init'
            T()
            T()
            T()
            
            // Works fine
            // RedRectView()
            // BlueCircleView()
            // RedRectView()
        }
    }
}

struct RedRectView: View {...}
struct BlueCircleView: View {...}

编辑：

TrippleView当然只是一个例子。 我想像使用任何其他泛型类型一样使用泛型视图：在不同场景中使用通用的基本“类型”。

例如，两个版本的列表视图使用通用CellView在两个不同的 styles / 布局中显示相同的数据。

Answer 1

您需要在结构中使用 ViewBuilder 来初始化视图。 这是一个例子，

接受通用视图并返回视图的结构。

struct TripleView<T: View>: View {
// simple example that takes in one parameter.
var someView: T

init(@ViewBuilder someView: () -> T) {
    self.someView = someView()
}

var body: some View {
    // You can modify your viewes here. 
    someView
        .foregroundColor(.red)
    someView
        .foregroundColor(.blue)
    someView
        .foregroundColor(.green)
    }
}

或者你可以接受多个参数

struct TripleViewsWithParam<T1: View, T2: View, T3: View>: View {
// you can take as many parameters as you want.
var someView1: T1
var someView2: T2
var someView3: T3

init(@ViewBuilder someView1: () -> T1, @ViewBuilder someView2: () -> T2, @ViewBuilder someView3: () -> T3) {
    self.someView1 = someView1()
    self.someView2 = someView2()
    self.someView3 = someView3()
}

var body: some View {
    VStack {
        someView1
        someView2
        someView3
    }
}
}

在主视图中调用结构

struct SomeView: View {
var body: some View {
    VStack{
        TripleView {
            Text("Triple View Example")
        }
        TripleViewsWithParam(
            someView1: {
                Text("View 1")
            }, someView2: {
                Text("View 2")
            }, someView3: {
                Text("View 3")
            }
        )
    }

}
}