Flutter新用户引导插件vyuh_feature_onboarding的使用

Vyuh Framework

构建模块化、可扩展、CMS驱动的Flutter应用

文档 | 网站

Vyuh功能引导 🎯 #

Vyuh应用程序的功能引导插件，提供灵活且可定制的引导体验。该插件包括内容驱动的引导屏幕，具有逐步指导、富文本描述和图像支持。

功能 ✨ #

• 内容驱动的引导 📝: 使用Sanity.io CMS自定义引导内容
• 逐步流程 🔄: 支持多个引导步骤及导航
• 富文本支持 📖: Markdown风格的富文本描述
• 图像集成 🖼️: 引导步骤中的图像支持
• 动作集成 🔗: 内置导航和完成的动作

安装 📦 #

在您的包的pubspec.yaml文件中添加以下内容：

dependencies:
  vyuh_feature_onboarding: any

使用 💡 #

功能注册 #

在您的Vyuh应用程序设置中注册引导功能：

import 'package:vyuh_core/vyuh_core.dart' as vyuh;
import 'package:vyuh_feature_onboarding/vyuh_feature_onboarding.dart' as onboarding;

void main() {
  vyuh.runApp(
    initialLocation: '/',
    plugins: _getPlugins(),
    features: () => [
      onboarding.feature,
      // ... 其他功能
    ],
  );
}

内容示例 🎯 #

基本引导

import 'package:vyuh_core/vyuh_core.dart' as vyuh;
import 'package:vyuh_feature_onboarding/vyuh_feature_onboarding.dart' as onboarding;
import 'package:vyuh_extension_content/vyuh_extension_content.dart';
import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;

// 创建并渲染一个引导流程
final content = onboarding.OnboardingContent(
  steps: [
    onboarding.OnboardingStep(
      title: '欢迎使用Vyuh',
      description: PortableTextContent([
        PortableTextBlock(
          children: [
            PortableTextSpan(
              text: '使用内容驱动的UI构建美丽的Flutter应用',
            ),
          ],
        ),
      ]),
      image: ImageReference(
        ref: 'welcome-image.jpg',
        dimensions: ImageDimensions(width: 300, height: 200),
      ),
    ),
    onboarding.OnboardingStep(
      title: '内容管理',
      description: PortableTextContent([
        PortableTextBlock(
          children: [
            PortableTextSpan(
              text: '使用Sanity.io CMS管理您的内容',
            ),
          ],
        ),
      ]),
      image: ImageReference(
        ref: 'cms-image.jpg',
        dimensions: ImageDimensions(width: 300, height: 200),
      ),
    ),
  ],
  doneAction: Action(
    title: '开始使用',
    configurations: [
      system.NavigationAction(
        navigationType: system.NavigationType.replace,
        linkType: system.LinkType.url,
        url: '/dashboard',
      ),
    ],
  ),
);

// 在小部件中呈现
class OnboardingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: vyuh.content.buildContent(context, content),
    );
  }
}

自定义布局

import 'package:vyuh_core/vyuh_core.dart' as vyuh;
import 'package:vyuh_feature_onboarding/vyuh_feature_onboarding.dart' as onboarding;

// 创建带有自定义布局的引导
final content = onboarding.OnboardingContent(
  steps: [
    onboarding.OnboardingStep(
      title: '自定义布局示例',
      description: PortableTextContent([
        PortableTextBlock(
          children: [
            PortableTextSpan(
              text: '此步骤使用自定义布局',
            ),
          ],
        ),
      ]),
    ),
  ],
  layout: YourCustomOnboardingLayout(),
);

// 在小部件中呈现
vyuh.content.buildContent(context, content);