SwiftUI中如何将QuestionView设计为泛型视图以支持两种不同模型数组

刚好做过类似的SwiftUI泛型复用改造，给你一套完整的解决方案，核心思路是用协议抽象两个模型的共性，再让QuestionView基于这个协议做泛型约束，具体步骤如下：

1. 定义通用协议抽象模型共性 #

首先，我们需要创建一个协议，把Question和WrongQuestion中所有在QuestionView里要用到的属性/方法都定义进去。这里假设你的视图需要用到题目ID、标题、选项、正确答案这些共性属性，你可以根据实际需求调整：

// 继承Identifiable是因为SwiftUI的列表、绑定数组通常需要可识别的元素
protocol QuestionProtocol: Identifiable {
    var id: UUID { get }
    var title: String { get }
    var options: [String] { get }
    var correctAnswer: String { get }
    // 在这里添加QuestionView中需要用到的其他共同属性
}

然后让你的两个模型都遵循这个协议：

// 改造Question模型
struct Question: QuestionProtocol {
    let id: UUID
    let title: String
    let options: [String]
    let correctAnswer: String
    // 保留原模型的其他专属属性
}

// 改造WrongQuestion模型
struct WrongQuestion: QuestionProtocol {
    let id: UUID
    let title: String
    let options: [String]
    let correctAnswer: String
    // 保留原模型的专属属性，比如错误次数、错误原因等
}

2. 将QuestionView改造为泛型视图 #

把原来固定接收[Question]绑定的代码，改成基于QuestionProtocol的泛型约束，这样它就能接收任何遵循该协议的模型数组绑定：

struct QuestionView<T: QuestionProtocol>: View {
    @State var selectedQuestionIndex: Int = 0 // 这里把变量名优化得更清晰，原selectedQuestion是Int类型，应该是索引
    @StateObject var questionConfig = QuestionConfig()
    @Binding var questions: [T] // 泛型绑定数组，T必须遵循QuestionProtocol

    var body: some View {
        // 这里的UI逻辑可以直接使用T的属性，因为T已经遵循了协议
        VStack(spacing: 20) {
            Text(questions[selectedQuestionIndex].title)
                .font(.title)
                .bold()
            
            // 示例：遍历选项
            ForEach(questions[selectedQuestionIndex].options, id: \.self) { option in
                Button(option) {
                    // 处理选项选择逻辑
                }
                .padding()
                .background(.gray.opacity(0.2))
                .cornerRadius(8)
            }
        }
        .padding()
    }
}

3. 修改两个视图的调用代码 #

第一个视图（QuizCategoryView） #

完全不需要大改，Swift会自动推断泛型类型为Question，直接正常传绑定即可：

struct QuizCategoryView: View {
    @StateObject var quizCategoryViewModel = QuizCategoryViewModel()
    var body: some View {
        // 其他原有代码
        QuestionView(questions: $quizCategoryViewModel.selectedQuestion)
        // 其他原有代码
    }
}

第二个视图（WrongQuestionView） #

先给WrongQuestionView添加对应的绑定数组（通常会放在ViewModel里），然后直接传[WrongQuestion]的绑定即可：

// 先创建对应的ViewModel示例
final class WrongQuestionViewModel: ObservableObject {
    @Published var wrongQuestions: [WrongQuestion] = []
    // 这里可以添加加载错题、管理错题的逻辑
}

// 改造WrongQuestionView
struct WrongQuestionView: View {
    @StateObject var wrongQuestionViewModel = WrongQuestionViewModel()
    var body: some View {
        // 其他原有代码
        QuestionView(questions: $wrongQuestionViewModel.wrongQuestions)
        // 其他原有代码
    }
}

关键注意点 #

• 确保QuestionProtocol包含了QuestionView中所有需要访问的模型属性，否则泛型类型T无法访问这些属性
• 如果两个模型有专属属性，只要QuestionView不需要用到，就不用加到协议里，完全不影响复用
• 泛型视图的命名可以保留QuestionView，因为泛型约束已经明确了它能处理的类型范围，可读性不受影响

内容的提问来源于stack exchange，提问作者Ufuk Köşker