如何为Protocol添加SwiftUI some View类型作为协议要求？

背景 #

我想定义一个Protocol，要求遵循该协议的类型返回SwiftUI的some View类型。我知道把Model和View耦合不是最优解，但每次使用View都要切换不同的遵循类型也不够简洁。但实现时遇到编译错误：

'some' type cannot be the return type of a protocol requirement; did you mean to add an associated type?

问题重现代码 #

protocol Component {
    var row: some View { get } // -> 此行抛出编译错误。
}

// 实际上还有更多遵循Component的类型。
enum ComponentA: Component {
    var row: some View { 
        Text("Component A")
    }
}

struct ComponentsView: View {
    var body: some View {
        ForEach(components) { component in
            component.row
        }
    }
}

问题 #

如何实现只需定义一次就能适配不同SwiftUI View的需求？

解决方案 #

方案1：为协议添加关联类型 #

这是编译器提示的标准方案，通过关联类型让每个遵循协议的类型指定自己的View类型：

protocol Component {
    associatedtype RowView: View
    var row: RowView { get }
}

enum ComponentA: Component {
    var row: some View {
        Text("Component A")
    }
}

// 泛型版本的View，只能容纳同一种Component类型
struct ComponentsView<T: Component>: View {
    let components: [T]
    var body: some View {
        ForEach(components.indices, id: \.self) { index in
            components[index].row
        }
    }
}

注意：泛型View只能处理单一类型的Component，如果需要混合多种类型，需要结合类型擦除使用。

方案2：使用AnyView做类型擦除 #

如果需要在同一个数组中存放不同类型的Component，可以用AnyView擦除具体的View类型，这样协议和实现都能正常编译：

protocol Component {
    var row: AnyView { get }
}

enum ComponentA: Component {
    var row: AnyView {
        AnyView(Text("Component A"))
    }
}

// 示例：另一种Component类型
enum ComponentB: Component {
    var row: AnyView {
        AnyView(HStack {
            Image(systemName: "star")
            Text("Component B")
        })
    }
}

// Swift 5.7+ 可用`any`关键字声明存在类型数组
struct ComponentsView: View {
    let components: [any Component]
    var body: some View {
        ForEach(components.indices, id: \.self) { index in
            components[index].row
        }
    }
}

这种方式支持混合多种Component类型，缺点是会丢失部分类型信息，且AnyView存在轻微的性能开销（绝大多数场景下可忽略）。

方案3：使用ViewBuilder重构（推荐，符合SwiftUI风格） #

如果你的Component本质是View的配置逻辑，可以直接用ViewBuilder构建，避免协议带来的类型问题，同时更符合SwiftUI的声明式风格：

// 封装Row的通用容器（如果需要统一样式可在这里添加）
struct ComponentRow<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        content
        // 可添加统一样式，比如：
        // .padding()
        // .background(Color.gray.opacity(0.1))
        // .cornerRadius(8)
    }
}

// 使用时直接声明不同的Row
struct ComponentsView: View {
    var body: some View {
        VStack(spacing: 8) {
            ComponentRow { Text("Component A") }
            ComponentRow {
                HStack {
                    Image(systemName: "star.fill")
                        .foregroundColor(.yellow)
                    Text("Component B")
                }
            }
        }
        .padding()
    }
}

这种方式避免了Model与View的耦合，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者christophriepe