Flutter状态路由管理插件tree_state_router的使用

Flutter状态路由管理插件tree_state_router的使用

tree_state_router 是一个为 Flutter 设计的路由包，它可以根据应用中的状态变化提供导航。它与 tree_state_machine 一起工作，使应用程序能够根据状态的变化进行声明性路由。

特点

  • 基于 Router API 的 Flutter 路由器
  • 支持基于 TreeStateMachine 活跃状态的声明性路由
  • 支持嵌套路由器
  • 支持 URL 路径和深度链接

文档

可以查看以下主题的 API 文档以获取更多详细信息：

声明性路由

在大多数情况下，使用 tree_state_router 进行声明性路由是最常用的方法。但是，你也可以通过 Navigator 推入和弹出路由。需要注意的是，任何导致新的 StateRoute 被激活的状态机转换会移除导航堆栈中的任何指令式路由。此外，不支持命名路由，如果调用了任何与命名路由相关的 Navigator 方法，则会抛出错误。

完整示例代码

import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:tree_state_machine/delegate_builders.dart';
import 'package:tree_state_machine/delegate_builders.dart' as b;
import 'package:tree_state_machine/tree_state_machine.dart';
import 'package:tree_state_router/tree_state_router.dart';

// 初始化日志记录
void _initLogging() {
  hierarchicalLoggingEnabled = true;
}

// 定义简单状态树
class States {
  static const state1 = StateKey('state1');
  static const state2 = StateKey('state2');
}

class AMessage {}

StateTree simpleStateTree() {
  return StateTree(
    InitialChild(States.state1), // 初始状态为 state1
    childStates: [
      b.State(
        States.state1,
        onMessage: (ctx) => switch (ctx.message) {
          AMessage() => ctx.goTo(States.state2), // 接收到 AMessage 后跳转到 state2
          _ => ctx.unhandled() // 其他情况忽略
        },
      ),
      b.State(States.state2), // 状态 state2
    ],
  );
}

// 定义与状态树中的状态对应的路由
var router = TreeStateRouter(
  stateMachine: TreeStateMachine(simpleStateTree()), // 使用定义好的状态树
  defaultScaffolding: (_, pageContent) => Scaffold(body: pageContent), // 默认的 Scaffold
  enableDeveloperLogging: true, // 开发者日志
  routes: [
    StateRoute(
      States.state1,
      path: RoutePath('s1'), // 路径为 /s1
      routeBuilder: (BuildContext ctx, StateRoutingContext stateCtx) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('这是状态 1'), // 显示文本 "这是状态 1"
              ElevatedButton(
                onPressed: () => stateCtx.currentState.post(AMessage()), // 发送 AMessage 到状态机
                child: const Text('发送消息'), // 按钮文本为 "发送消息"
              )
            ],
          ),
        );
      },
    ),
    StateRoute(
      States.state2,
      path: RoutePath('s2'), // 路径为 /s2
      routeBuilder: (BuildContext ctx, StateRoutingContext stateCtx) {
        return const Center(child: Text('这是状态 2')); // 显示文本 "这是状态 2"
      },
    ),
  ],
);

// 创建一个基于 Material 的应用程序，并使用 TreeStateRouter
class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router, // 使用定义好的路由器
    );
  }
}

void main() {
  _initLogging(); // 初始化日志
  runApp(const MainApp()); // 运行应用程序
}

更多关于Flutter状态路由管理插件tree_state_router的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter状态路由管理插件tree_state_router的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tree_state_router 是一个用于 Flutter 的状态路由管理插件，它结合了状态管理和路由管理，允许你以声明式的方式管理应用的路由和状态。这个插件特别适合那些需要复杂状态管理和路由导航的应用程序。

安装

首先，你需要在 pubspec.yaml 文件中添加 tree_state_router 依赖：

dependencies:
  flutter:
    sdk: flutter
  tree_state_router: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

  1. 定义状态和路由

    你可以通过定义状态和路由来管理应用的不同页面和状态。

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

// 定义状态
enum AppState { home, details }

// 定义路由
final appRouter = TreeStateRouter<AppState>(
  stateRoutes: {
    AppState.home: StateRoute(
      builder: (context) => HomeScreen(),
    ),
    AppState.details: StateRoute(
      builder: (context) => DetailsScreen(),
    ),
  },
);

// 主应用
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TreeStateRouterBuilder<AppState>(
        router: appRouter,
        initialState: AppState.home,
      ),
    );
  }
}

// 首页
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到详情页
            TreeStateRouter.of<AppState>(context).go(AppState.details);
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

// 详情页
class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回首页
            TreeStateRouter.of<AppState>(context).go(AppState.home);
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

  2. 状态管理

    tree_state_router 允许你在状态之间传递数据。你可以通过 StateRoute 的 data 参数来传递数据。

    final appRouter = TreeStateRouter<AppState>(
  stateRoutes: {
    AppState.home: StateRoute(
      builder: (context) => HomeScreen(),
    ),
    AppState.details: StateRoute(
      builder: (context) {
        final data = TreeStateRouter.of<AppState>(context).routeData;
        return DetailsScreen(data: data);
      },
    ),
  },
);

// 在导航时传递数据
TreeStateRouter.of<AppState>(context).go(AppState.details, data: 'Some data');

  3. 嵌套路由

    tree_state_router 支持嵌套路由，你可以定义多个层级的路由。

    final appRouter = TreeStateRouter<AppState>(
  stateRoutes: {
    AppState.home: StateRoute(
      builder: (context) => HomeScreen(),
      children: {
        AppState.details: StateRoute(
          builder: (context) => DetailsScreen(),
        ),
      },
    ),
  },
);

  4. 监听状态变化

    你可以通过 TreeStateRouterBuilder 的 onStateChanged 回调来监听状态的变化。

    TreeStateRouterBuilder<AppState>(
  router: appRouter,
  initialState: AppState.home,
  onStateChanged: (newState) {
    print('State changed to $newState');
  },
);
回到顶部