Flutter多功能集成插件octopus的使用

Octopus 是一个声明式的路由管理器，适用于 Flutter 应用。它通过状态变化来实现动态导航，而不是传统的 push 和 pop 操作。以下是 Octopus 的详细使用方法和示例代码。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  octopus: <version>

入门指南

设置路由

你可以使用枚举或密封类（sealed classes）来定义路由。这里以枚举为例：

enum Routes with OctopusRoute {
  home('home', title: 'Home'),
  gallery('gallery', title: 'Gallery'),
  picture('picture', title: 'Picture'),
  settings('settings', title: 'Settings');

  const Routes(this.name, {this.title});

  @override
  final String name;

  @override
  final String? title;

  @override
  Widget builder(BuildContext context, OctopusState state, OctopusNode node) =>
      switch (this) {
        Routes.home => const HomeScreen(),
        Routes.gallery => const GalleryScreen(),
        Routes.picture => PictureScreen(id: node.arguments['id']),
        Routes.settings => const SettingsDialog(),
      };
}

创建路由器实例

在 main 函数或根 App widget 初始化时创建路由器实例，并传入所有可能的路由：

final router = Octopus(
  routes: Routes.values,
  defaultRoute: Routes.home,
);

配置 MaterialApp

将 Octopus.config 添加到 MaterialApp.router 构造函数中：

void main() {
  runApp(MaterialApp.router(
    routerConfig: router.config,
  ));
}

导航

使用 context.octopus.setState((state) => ...) 方法进行基本导航：

context.octopus.setState((state) =>
  state
    ..findByName('catalog-tab')?.add(Routes.category.node(
      arguments: <String, String>{'id': category.id},
    )));

其他常用的导航方法包括：

context.octopus.push(Routes.shop);

你可以自由地更改状态、子节点、节点及其参数。

Guards

Guards 可以控制导航并根据需要取消或变更导航。例如，检查用户是否已登录：

class AuthGuard extends OctopusGuard {
  @override
  FutureOr<bool> canNavigate(OctopusState currentState, OctopusState nextState) async {
    if (!isUserLoggedIn()) {
      // Redirect to login page
      return false;
    }
    return true;
  }
}

示例 Demo

以下是一个完整的示例项目，展示如何使用 Octopus 进行路由管理：

import 'package:flutter/material.dart';
import 'package:octopus/octopus.dart';

// 定义路由
enum Routes with OctopusRoute {
  home('home', title: 'Home'),
  gallery('gallery', title: 'Gallery'),
  picture('picture', title: 'Picture'),
  settings('settings', title: 'Settings');

  const Routes(this.name, {this.title});

  @override
  final String name;

  @override
  final String? title;

  @override
  Widget builder(BuildContext context, OctopusState state, OctopusNode node) =>
      switch (this) {
        Routes.home => const HomeScreen(),
        Routes.gallery => const GalleryScreen(),
        Routes.picture => PictureScreen(id: node.arguments['id']),
        Routes.settings => const SettingsDialog(),
      };
}

// 主应用入口
void main() {
  final router = Octopus(
    routes: Routes.values,
    defaultRoute: Routes.home,
  );

  runApp(MaterialApp.router(
    routerConfig: router.config,
  ));
}

// 示例页面
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.octopus.push(Routes.gallery);
          },
          child: const Text('Go to Gallery'),
        ),
      ),
    );
  }
}

class GalleryScreen extends StatelessWidget {
  const GalleryScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Gallery')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.octopus.push(Routes.picture);
          },
          child: const Text('View Picture'),
        ),
      ),
    );
  }
}

class PictureScreen extends StatelessWidget {
  final String id;

  const PictureScreen({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Picture $id')),
      body: const Center(child: Text('Picture Content')),
    );
  }
}

class SettingsDialog extends StatelessWidget {
  const SettingsDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Settings'),
      content: const Text('Settings Content'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('Close'),
        ),
      ],
    );
  }
}

这个示例展示了如何使用 Octopus 进行简单的路由管理和导航。你可以根据需要扩展和修改这个示例，以适应你的具体需求。希望这些信息对你有所帮助！