繁体   English   中英

SwiftUI-按下按钮时如何在文本之间转换

[英]SwiftUI-How to transition between text when a button is pressed

我正在制作一个练习应用程序,我想在不同的练习之间进行转换,而不需要制作许多单独的视图,因为我还制作了一个计时器,如果我这样做,它会发布太多次。 我想这样做,以便当我单击一个按钮时,它会将所有文本从练习 1 过渡到练习 2,然后再过渡到练习 3,依此类推。 我想使用同一个按钮转换所有这些。

到目前为止,我所做的是创建指向包含不同练习的不同视图的导航路径,但是当我这样做时计时器坏了,因为我多次调用它导致它倒计时太快。 我想看看我是否可以在 1 个视图中包含所有练习并在它们之间进行转换。 因此,例如我想从以下位置过渡:

Text(exercisePlan.exercise.title) to Text(exercisePlan.exercise2.title) then to Text(exercisePlan.exercise3.title) all with a click of one button
import SwiftUI
import AVKit

struct ExerciseScreenView: View {
    @Binding var streaks: Streaks
    @Binding var timerStruct: TimerStruct
    var countdownTimer = 300
    @State var player = AVPlayer()
    var exercisePlan: ExercisePlan
    @Binding var navigationPath: NavigationPath
    
    func reset() {
        timerStruct.countdownTimer = 300
        timerStruct.timerRunning = false
    }
    
    var body: some View {
        VStack {
            Form {
                Section(header: Text("1st Exercise (Scroll down for exercise steps)")) {
                    Text(exercisePlan.exercise.title)
                        .font(.system(size: 35, weight: .medium))
                        .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                }
                
                Section(header: Text("Video example")) {
                    VideoPlayer(player: exercisePlan.exercise.video)
                        .scaledToFit()
                        .frame(alignment: .center)
                        .cornerRadius(10)
                        .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                }
                    Section(header: Text("Steps:")){
                        Text(exercisePlan.exercise.steps)
                            .font(.system(size: 20, weight: .regular))
                            .padding()
                            .frame(alignment: .center)
                    }
                }
                         
                    
                    
                    
            TimerView(streaks: $streaks, timerStruct: $timerStruct)
                        .padding(EdgeInsets(top: 0, leading: 0, bottom: 15, trailing: 0))
                    
                    Button {
                        navigationPath.append("ExerciseScreen2View")
                    } label: {
                        Text("Next exercise")
                            .padding()
                            .background((Color(red: 184/255, green: 243/255, blue: 255/255)))
                            .foregroundColor(.black)
                            .cornerRadius(10)
                            .navigationBarBackButtonHidden()
                    }
                    .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 10))
                    
                }
            }
        }

您要做的是创建一个Exercises数组。 按下按钮应该会增加一个索引,以便在您的视图中显示相关计划。

小代码示例:

struct ExerciseScreenView: View {
    
    var exercises: [Exercise]
    @State var index: 0

    var body: some View {
        VStack {
            Text(exercises[index].title)
            Button {
                    if exercisePlan.count - 1 > index {
                        index += 1                        
                    } else {
                        // leave screen
                    }
                } label: {
                    Text("Next exercise")
                }
            }
        }
    }
}

这是一个非常基本的示例,可以进行很多改进,但它为您提供了如何操作的基本概念。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM