SwiftUI TextField绑定JSON答案的验证逻辑实现求助

核心实现思路 #

用@State变量绑定TextField输入内容，通过监听输入变化或提交事件，将输入与JSON解析后的答案列表对比，用另一个@State变量记录验证结果，最后根据结果显示绿色对勾。

完整代码示例 #

1. 定义JSON数据模型 #

假设你的JSON结构包含问题文本和可选答案数组，先定义对应的模型：

struct Question: Codable {
    let question: String
    let answers: [String] // 存储所有可能的正确答案
}

// 示例解码后的问题数据（替换成你实际的解码结果）
let sampleQuestion = Question(
    question: "SwiftUI中用于绑定状态的属性包装器是？",
    answers: ["@State", "@Binding", "@ObservedObject"]
)

2. 实现验证逻辑的View #

import SwiftUI

struct AnswerValidationView: View {
    // 解码后的问题数据
    let question: Question
    // 绑定用户输入的文本
    @State private var userInput = ""
    // 记录验证结果
    @State private var isAnswerCorrect = false
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // 显示问题文本
            Text(question.question)
                .font(.headline)
            
            // 输入框绑定用户输入
            TextField("请输入答案", text: $userInput)
                .textFieldStyle(.roundedBorder)
                // 提交时触发验证（用户点键盘完成按钮）
                .onSubmit {
                    validateAnswer()
                }
                // 实时监听输入变化（可选，替代onSubmit实现实时反馈）
                .onChange(of: userInput) { _ in
                    validateAnswer()
                }
            
            // 根据验证结果显示对勾
            HStack {
                Spacer()
                if isAnswerCorrect {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundColor(.green)
                        .font(.title)
                }
            }
        }
        .padding()
    }
    
    // 验证输入是否匹配任意正确答案
    private func validateAnswer() {
        // 处理输入：去除首尾空格、转小写（可选，根据需求调整匹配规则）
        let processedInput = userInput.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
        // 检查输入是否在答案列表中
        isAnswerCorrect = question.answers.contains { answer in
            answer.lowercased() == processedInput
        }
    }
}

// 预览
struct AnswerValidationView_Previews: PreviewProvider {
    static var previews: some View {
        AnswerValidationView(question: sampleQuestion)
    }
}

关键部分说明 #

• 状态绑定：@State private var userInput绑定TextField，实时获取用户输入内容。
• 验证触发：
  • .onSubmit：适合需要用户主动提交的场景，用户点击键盘“完成”按钮时触发验证。
  • .onChange(of: userInput)：输入内容每变化一次就触发验证，适合实时反馈的场景，可根据需求二选一或同时使用。
• 验证逻辑：validateAnswer()方法先对输入做标准化处理（去空格、转小写），再检查输入是否存在于answers数组中，更新isAnswerCorrect状态。
• 对勾显示：根据isAnswerCorrect的值，条件渲染绿色的系统图标。

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