引导页模块

onboarding

引导页（Onboarding）是用户首次打开应用时看到的欢迎界面，用于介绍应用的核心功能和特性。EasyAppSwiftUI 提供了一个默认的引导页实现。

我们后续提供更多精美引导页的实现，敬请期待。

架构概览

引导页模块采用 MVVM 架构，包含以下主要组件：

Feature 模型: 定义特性数据结构
Features 数据: 提供静态特性数据
OnboardingView: 主引导页视图
OnboardingPageView: 单个特性页面视图

核心组件

1. Feature 模型

struct Feature: Identifiable {
    let id = UUID()
    let title: String
    let description: String
    let image: String
}

Feature 模型定义了每个引导页面的数据结构：

id: 唯一标识符，用于 SwiftUI 列表识别
title: 特性标题
description: 特性详细描述
image: SF Symbol 图标名称

2. Features 数据

struct Features {
    static let features: [Feature] = [
        Feature(
            title: "Welcome to EasyApp",
            description: "Onboarding Page 1",
            image: "sparkles"
        ),
        Feature(
            title: "Smart Organization",
            description: "Onboarding Page 2",
            image: "brain.head.profile"
        ),
        Feature(
            title: "Secure & Private",
            description: "Onboarding Page 3",
            image: "lock.shield"
        ),
        Feature(
            title: "Stay Connected",
            description: "Onboarding Page 4",
            image: "icloud.and.arrow.up"
        )
    ]
}

主要功能

1. 页面导航

引导页使用 TabView 实现水平滑动导航：

TabView(selection: $currentPage) {
    ForEach(Array(Features.features.enumerated()), id: \.element.id) {
        index, feature in
        OnboardingPageView(feature: feature)
            .tag(index)
    }
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

2. 状态管理

@State private var currentPage = 0
@EnvironmentObject private var appState: AppState

currentPage: 当前页面索引
appState: 全局应用状态，用于保存引导页完成状态

集成说明

1. 基本使用

OnboardingView { 
    // 引导页完成后的回调
    print("Onboarding completed")
}

2. 与应用状态集成

引导页会自动与 AppState 集成，完成后会更新 onboardingState 来跟踪用户是否已完成引导。

3. 显示逻辑

引导页的显示逻辑通过 OnboardingViewModifier 来控制：

struct OnboardingViewModifier: ViewModifier {
    @EnvironmentObject private var appState: AppState

    func body(content: Content) -> some View {
        Group {
            if appState.onboardingState == "INIT" {
                OnboardingView {
                    withAnimation(.bouncy) {
                        appState.onboardingState = AppData.appVersion
                    }
                }
                .transition(.opacity)
            } else {
                content
                    .transition(.opacity)
            }
        }
        .animation(.easeInOut(duration: 0.5), value: appState.onboardingState)
    }
}

显示条件：

onboardingState == "INIT": 显示引导页
onboardingState != "INIT": 显示应用主界面

状态流转：

应用首次启动时，onboardingState 默认为 "INIT"
用户完成引导页后，状态更新为 AppData.appVersion
后续启动时，由于状态不为 "INIT"，直接显示主界面

最佳实践

内容简洁: 每个特性的描述应简洁明了，突出核心价值
图标选择: 使用具有代表性的 SF Symbol 图标
页面数量: 建议控制在 3-5 页之间，避免过长
本地化: 支持多语言的标题和描述文本
可跳过: 始终提供跳过选项，尊重用户选择

引导页

On this page