如何將通用 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")
            }
        )
    }

}
}