使用協議捕獲 SwiftUI 視圖

Question

我正在嘗試編寫一個協議，該協議要求conformers 有一個View 屬性，或者一個返回一些View 的@ViewBuilder 方法。

我想要一個可重復使用的復合視圖，可以根據需要顯示的數據類型構建不同的子視圖。

協議看起來像這樣……

protocol RowView {
    var leftSide: some View { get }
    var rightSide: some View { get }
}

這樣我就可以這樣稱呼……

struct Example: RowView {
    var id: Int
    var leftSide: some View { … }
    var rightSide: some View { … }
}

struct ContentView: View {
    let rows: [RowView]

    var body: some View {
        VStack {
            Foreach(rows, id: \.id) {
                HStack {
                    $0.leftSide
                    $0.rightSide
                }
            }
        }
    }
}

Answer 1

您需要將協議更改為：

protocol RowView {
    associatedtype LView: View
    associatedtype RView: View

    var leftSide: LView { get }
    var rightSide: RView { get }
}

此外，在內容視圖中使用具體的Example類型而不是協議（您定義的協議根本沒有id ）：

let rows: [Example]

還！ 您可以根據需要使RowView可identifiable ，因此不再需要id: \.id ：

protocol RowView: Identifiable

---

工作代碼：

protocol RowView: Identifiable {
    associatedtype LView: View
    associatedtype RView: View

    var leftSide: LView { get }
    var rightSide: RView { get }
}

struct Example: RowView {
    var id: Int
    var leftSide: some View { Text("Left") }
    var rightSide: some View { Text("Right") }
}

struct ContentView: View {
    let rows: [Example] = [
        .init(id: 1),
        .init(id: 2)
    ]

    var body: some View {
        VStack {
            ForEach(rows) { row in
                HStack {
                    row.leftSide
                    row.rightSide
                }
            }
        }
    }
}