SwiftUI 实现App启动引导提示页示例

Codeun

4 月前

本篇内容为常见的首次打开APP时的提示引导页，通过下一步按钮切换展示不同引导页面最终打开主页面。

Table of Contents

示例效果如下

实现代码示例

import SwiftUI

struct GuideView: View {
    
    @State var currentStep = 0
    @State var isFinished = false
    var body: some View {
        ZStack {
            if isFinished {
                HomeView()
                    .transition(.move(edge: .trailing))
            } else {
                VStack {
                    ProgressView(steps: guideSteps.count, currentStep: $currentStep)
                    Spacer()
                    GuideDescView(guideSteps: guideSteps, currentStep: currentStep)
                    Spacer()
                }
                .padding()
                NextButton(currentStep: $currentStep, color: guideSteps[currentStep].color) {
                    if currentStep < guideSteps.count - 1 {
                        currentStep += 1
                    } else {
                        
                        withAnimation(.linear) {
                            isFinished.toggle()
                        }
                    }
                }
            }
            
        }
    }
}

#Preview {
    GuideView()
}

示例效果如下

实现代码示例

完整代码下载