如何在 SwiftUI 中一次显示一个视图

时间:2021-07-24 22:31:22

标签: xcode view swiftui

我希望使用 SwiftUI 制作一个测验应用程序。我现在已经设计了所有的视图,但是我无法正确显示问题。 我有一个主页视图,它现在只有一个按钮,应该按顺序显示一个 questionView(只有一个问题),一次一个。 我正在使用 ForEach 来遍历问题数组中的每个问题,并显示一个带有该特定问题的 questionView,但问题是 ForEach 同时显示每个问题,而不是等待提交问题。 如何与 ForEach(或任何其他函数)通信以告诉它何时开始和停止显示 questionViews。


struct Home: View {
    @State var presentQuestionView: Bool = false
    @StateObject var questionViewModel: QuestionViewModel = QuestionViewModel()
    @State var isCompleted = false
    
    var body: some View {
        VStack {
            Spacer()
   
            Text("Guess Players")
                .font(.title2)
                .bold()
                
                .onTapGesture {
                        presentQuestionView.toggle()
                }
            
            Spacer()
                
        }
        
        .sheet(isPresented: $presentQuestionView, content: {
            ForEach(questionViewModel.questions.indices) { index in

                QuestionView(question: questionViewModel.questions[index], presentQuestionView: $presentQuestionView, progressWidth: questionViewModel.progress(currentIndex: index) )
                    
                      .offset(x: questionViewModel.currentQuestion().isCompleted ? 1000 : 0)
                      .rotationEffect(.init(degrees: questionViewModel.currentQuestion().isCompleted ? 1000 : 0))
            }
        })
    }
}

单击按钮时,我希望 ForEach 语句一次显示一个 QuestionView。

这是我的问题视图


struct QuestionView: View {
    @ObservedObject var question: Question
    @Binding var presentQuestionView: Bool
    var progressWidth: CGFloat
    @State var isSubmitted = false
    @State var buttonText = "Submit"
    
    var body: some View {
        VStack {
            ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
                Capsule()
                    .fill(Color.gray.opacity(0.7))
                    .frame(height: 6)
                
                Capsule()
                    .fill(Color.green)
                    .frame(width: progressWidth, height: 6)
            })
            
            Text("Guess The Player!")
                .font(.system(size: 38))
                .fontWeight(.heavy)
                .foregroundColor(.purple)
                .padding(.top)
            Text("Career Averages: ")
                .font(.title2)
                .fontWeight(.heavy)
                .foregroundColor(.black)
                .padding(.top, 8)
            
            Text("Points Per Game: \(question.answer.stats!.pointsPerGame)")
                .font(.system(size: 20))
                .fontWeight(.heavy)
                .foregroundColor(.black)
                .padding(.top, 5)
            
            Text("Assists Per Game: \(question.answer.stats!.assistsPerGame)")
                .font(.system(size: 20))
                .fontWeight(.heavy)
                .foregroundColor(.black)
                .padding(.top, 5)
            
            Text("Rebounds Per Game: \(question.answer.stats!.reboundsPerGame)")
                .font(.system(size: 20))
                .fontWeight(.heavy)
                .foregroundColor(.black)
                .padding(.top, 5)
            
            Spacer(minLength: 0)
            
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 20), count: 2), spacing: 25, content: {
                Player_Cards(question: question, isSubmitted: $isSubmitted)
            })
            .padding()
            Spacer(minLength: 0)
            
            Button(action: {
                if isSubmitted == false {
                    //update the score
                    if question.isCorrect() {

                    } else {

                    }
                    //update the view to show the correct answer
                    isSubmitted.toggle()
                    buttonText = "Next Question"
                } else {
                    //Go into the next question
                }
                
            }, label: {
                Text(buttonText)
                    .fontWeight(.heavy)
                    .foregroundColor(.white)
                    .padding(.vertical)
                    .frame(maxWidth: .infinity)
                    .background(Color.blue)
            })
        }
        .background(Color.black.opacity(0.05).ignoresSafeArea())
    }
}

这是我运行这个项目时当前发生的情况 The views are stacked on top of each other instead of showing one at a time until the submit button is clicked.

0 个答案:

没有答案