当用户单击正确答案时，如何使 quizView 以绿色 onTapGesture 显示

Posted 2023-02-24

【中文标题】当用户单击正确答案时，如何使 quizView 以绿色 onTapGesture 显示

【英文标题】：How can I make the quizView appear in green onTapGesture when the user clicks the right answer

【发布时间】：2020-08-26 23:11:57

【问题描述】：

我正在制作一个语言应用程序，并希望用户点击它后正确答案显示为绿色，但我正在努力做到这一点。

这是我想要实现此行为的代码部分。

            Grid(viewModel.answers)  answer in
                
                //how can i change the ui of quizView(answer) that is being tapped inside the closure
                quizView(answer: answer).onTapGesture 
                    if self.viewModel.chooseAnswer(answer: answer)
                        self.dim.toggle()
                        self.disabled.toggle()
                        print("a")
                        
                    
                
                .opacity(self.dim ? 0.4 : 1.0)
                .animation(.easeInOut(duration: 1.0))
                .disabled(self.disabled)
            
        
        .edgesIgnoringSafeArea([.top])
    


struct quizView: View 
var answer: LearnModel.Answer

var body: some View
    

    GeometryReader  geometry in
        ZStack

            answerBubble
            Text(self.answer.word.EnglishWord)
                .multilineTextAlignment(.center)
                .foregroundColor(Color.white)
        
    

var answerBubble: some View 
RoundedRectangle(cornerRadius: 20)
    .fill(Color.black)
    .shadow(color: Color.black, radius: 20, y: 5)
    .opacity(0.2)
    .padding()

Grid(viewModel.answers) - 为答案气泡创建 Grid 和 Gridlayout。

界面截图

【参考方案1】：

您的answerBubble 是您尝试更新的视图。所以，这个视图需要有某种类型的参数来改变它的填充颜色。

假设如果用户点击正确的答案，背景变为绿色，如果没有点击，则保持黑色，否则变为红色。我会在你的主视图中创建一个有状态的点击答案列表：

@State private var tappedAnswers = [LearnModel.Answer]()

这将创建一个您可以跟踪的空答案列表。一旦用户点击了quizView，那么你应该将它添加到列表中，如果它还没有的话（你真的可以用Set 来做到这一点，但我坚持使用数组是因为它熟悉）。

quizView(answer: answer).onTapGesture 
    // Add the new answer to the list of tapped answers
    if !tappedAnswers.contains(answer) 
        tappedAnswers.append(answer)
    
    // Do any animation work you need in here

我不熟悉您的应用程序的其余部分，但您需要存储正确答案并将其与所选答案进行比较。我们暂时称它为correctAnswer。

现在您可以添加一个函数来确定每个answerBubble 的适当填充颜色：

func colorFor(answer: LearnModel.Answer, correctAnswer: LearnModel.Answer) -> Color 

   if answer == correctAnswer 
       // Check for correct answer right away; order matters here.
       return Color.green
    else if tappedAnswers.contains(correctAnswer) 
       // The user tapped the answer, but it wasn't correct.
       return Color.red
    else 
       // The user hasn't tapped this answer yet.
       return Color.black
   

最后，向answerBubble 添加一个参数，该参数接受一个fillColor 变量，让您可以传入这个新创建的颜色方法（尽管您需要将其设为正确的SwiftUI 视图）。

struct AnswerBubble: View 

    let fillColor: Color

    var body: some View 
        RoundedRectangle(cornerRadius: 20)
            .fill(fillColor)
            .shadow(color: Color.black, radius: 20, y: 5)
            .opacity(0.2)
            .padding()
    

还要确保将fillColor 传递给quizView，因为它需要将它传递给answerBubble。现在您可以在 ForEach 循环中使用它。添加参数后，它应该如下所示：

quizView(
    answer: answer, 
    fillColor: self.colorFor(
        answer: answer, 
        correctAnswer: correctAnswer
    )
)

（另外，考虑将quizView 重命名为QuizView，因为它不是变量）

我不知道您的LearnModel 的详细信息，但您应该可以根据需要进行调整。