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

Question

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

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

简单示例：

尝试使用TrippleView<T: View>which 应创建/显示类型的三个视图T。添加视图（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以两种不同的样式/布局显示相同的数据。

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

}
}