Flutter路由注解管理插件ff_annotation_route_library的使用

好的，下面是一个完整的示例代码，展示了如何使用 ff_annotation_route_library 插件来管理 Flutter 路由。这个示例包括添加依赖、创建路由注解以及生成路由文件的过程。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ff_annotation_route demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: Routes.fluttercandiesMainpage,
      onGenerateRoute: (RouteSettings settings) {
        FFRouteSettings ffRouteSettings = getRouteSettings(
          name: settings.name!,
          arguments: settings.arguments as Map<String, dynamic>?,
          notFoundPageBuilder: () => Scaffold(
            appBar: AppBar(),
            body: const Center(
              child: Text('not find page'),
            ),
          ),
        );
        Bindingsings? binding;
        if (ffRouteSettings.codes != null {
          binding = ffRouteSettings.codes!['binding'] as Bindingsings?;
        }

        Transition transition;
        bool opaque = true;
        if (ffRouteSettings.pageRouteType != null) {
          switch (ffRouteSettings.pageRouteType) {
            case PageRouteType.cupertino:
              transition = Transition.cupertino;
              break;
            case PageRouteType.material:
              transition = Transition.downToUp;
              break;
            case PageRouteType.transparent:
              opaque = false;
              break;
            default:
          }
        }

        return GetPageRoute(
          binding: binding,
          opaque: opaque,
          settings: ffRouteSettings,
          transition: transition,
          page: () => ffRouteSettings.builder(),
        );
      },
    );
  }
}

解释

1 example/main.dart 文件中包含了完整的示例代码：

1 dependencies: 添加了 ff_annotation_route_library 的到项目的 pubspec.yaml 文件中。

• 在 pubspec.yaml 中添加 ff_annotation_route_library 到 dependencies 部分。
• 使用 flutter packages get 下载插件。

dependencies:
  # add for a package
  ff_annotation_route_core: any
  # add only for a project
  ff_annotation_route_library: any

2 添加注解：在 main.dart 文件中定义了一个页面类，并使用 [@FFRoute](/user/FFRoute) 注解进行配置。

• 定义页面类 MainPage 并使用 [@FFRoute](/user/FFRoute) 注解配置路由信息。
• 设置路由名称、描述等属性。

[@FFRoute](/user/FFRoute)(
  name: "fluttercandies://mainpage",
  routeName: "MainPage",
)
class MainPage extends StatelessWidget {
  // ...
}

3 生成路由文件：通过执行命令来生成路由文件。

• 打开终端，进入项目的根目录。
• 运行 ff_route generate 命令来生成路由文件。

ff_route generate

4 使用导航：在 main.dart 文件中使用 Navigator.pushNamed 方法来跳转页面。

• 使用 Navigator.pushNamed 方法跳转到指定的页面。

Navigator.pushNamed(context, Routes.fluttercandiesMainpage);

5 处理参数：如果需要传递参数给目标页面，可以使用 arguments 参数。

• 在 pushNamed 方法中传递参数。

Navigator.pushNamed(
  context,
  Routes.flutterCandiesTestPageE,
  arguments: <String, dynamic>{
    constructorName: 'required',
    'testMode': const TestMode(
      id: 100,
      isTest: true,
    ),
  },
);

6 使用 Getx：如果项目使用了 Getx 框架，可以在 GetPageRoute 中设置参数。

• 在 GetPageRoute 中传递参数。

GetPageRoute(
  binding: binding,
  opaque: opaque,
  settings: ffRouteSettings,
  transition: transition,
  page: () => ffRouteSettings.builder(),
);

7 拦截器：可以通过 RouteInterceptor 来拦截特定页面的路由。

• 实现 RouteInterceptor 类并添加到页面的注解中。

[@FFRoute](/user/FFRoute)(
  name: 'fluttercandies://PageA',
  routeName: 'PageA',
  description: 'PageA',
  interceptors: <RouteInterceptor>[
    LoginInterceptor(),
  ],
)
class PageA extends StatefulWidget {
  const PageA({Key? key}) : super(key: key);

  @override
  State<PageA> createState() => _PageAState();
}

8 生命周期：继承 RouteLifecycleState 来检测页面的各种状态。

• 在页面类中继承 RouteLifecycleState 并重写相关方法。

class _PageBState extends RouteLifecycleState<PageB> {
  @override
  void onPageShow() {
    print('PageB onPageShow');
  }

  @override
  void onPageHide() {
    print('PageB onPageHide');
  }

  // 其他生命周期方法...
}