Flag Quiz应用选择题UI状态逻辑实现求助

问题说明 #

现有一款国旗问答应用，需实现两种选项UI逻辑：

• 逻辑1：选中正确选项时，仅正确选项标记为绿色
• 逻辑2：选中错误选项时，选中的错误选项标记为红色，正确选项标记为绿色，其余选项保持灰色

目前逻辑1已实现，但逻辑2无法生效，需通过以下代码调整解决。

1. 完善QuizManager状态记录 #

在QuizManager中新增用户选中答案的状态变量，并完善选择答案的方法：

class QuizManager: ObservableObject {
    @Published var currentTrueAnswer: Country // 假设你的选项模型为Country类型
    @Published var answerSelected = false
    @Published var selectedAnswer: Country? // 新增：记录用户选中的答案
    
    // 完善选择答案的方法
    func selectAnswer(answer: Country) {
        selectedAnswer = answer
        answerSelected = true
    }
    
    // 其他原有代码...
}

2. 修改ChoiceButton自定义视图 #

给ChoiceButton添加状态参数，根据不同状态动态设置背景和文字颜色：

struct ChoiceButton : View {
    var countryName: String
    var isCorrect: Bool // 是否为正确答案
    var isSelected: Bool // 是否被用户选中
    var answerSubmitted: Bool // 用户是否已提交答案

    private var buttonColor: Color {
        guard answerSubmitted else {
            return .buttonGray // 未提交时保持默认灰色
        }
        if isCorrect {
            return .green // 正确选项设为绿色
        } else if isSelected {
            return .red // 选中的错误选项设为红色
        } else {
            return .buttonGray // 其余未选中的错误选项保持灰色
        }
    }

    private var textColor: Color {
        return answerSubmitted ? .white : .textSoftBlack // 提交后文字变白，提升可读性
    }

    var body: some View {
        Text(countryName)
            .font(Font.custom(FontManager.Montserrat.semiBold, size: 16))
            .foregroundStyle(textColor)
            .multilineTextAlignment(.leading)
            .lineLimit(2)
            .padding(.horizontal)
            .padding(.leading,32)
            .frame(maxWidth: .infinity, maxHeight: 140, alignment: .leading)
            .background(
                RoundedRectangle(cornerRadius: 16)
                    .foregroundStyle(buttonColor)
            )
    }
}

3. 更新QuizView的按钮调用 #

在遍历选项时，给每个ChoiceButton传递对应的状态参数：

ForEach(quizManager.choiceList, id:\.self){ item in
    Button {
        quizManager.selectAnswer(answer: item)
    } label: {
        ChoiceButton(
            countryName: item.name,
            isCorrect: item == quizManager.currentTrueAnswer,
            isSelected: item == quizManager.selectedAnswer,
            answerSubmitted: quizManager.answerSelected
        )
        .frame(maxHeight: 80)
    }
    .disabled(quizManager.answerSelected) // 可选：提交答案后禁用所有按钮，防止重复点击
}

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