Flutter插件bind3的介绍与使用方法

Library purpose

bind3是一个库，允许你将路由绑定到页面控制器。目的是构建一个基于具有单例控制器的页面树的Flutter项目的基础架构。

Current problem

目前，该库要求使用auto_route导航器，并且只与这个导航器绑定。到2024年8月底，我打算使包独立，或者如果失败，则添加对其他包的支持，如Flutter Navigator 2.0、go_router、fluro、beamer、flutter_modular、flow_builder、routefly等。

此外，当前版本不支持带有guard路由的复杂路由。

Getting started

要开始使用该库，你需要创建你的AppRouter。

part 'app_router.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends _$AppRouter with AppRouterBase {
  [@override](/user/override)
  RouteNode get infoRoute =>
      RouteNode(name: '/', page: GeneralWrapperRoute.page, children: [
        RouteNode(
          initial: true,
          page: OrdersMainRoute.page,
          name: "ordersMain",
          routeController: OrdersMainController(),
        ),
        RouteNode(
          initial: true,
          page: MenuMainRoute.page,
          name: "menuMain",
          routeController: MenuMainController(),
        ),
      ]);
}

1. 指定我们的路由器作为应用程序路由器。
2. 调用RouteCore.create()来创建中央bind3节点。
3. （可选）定义你的RepositoryContainer，这需要在应用程序开始时初始化，连同核心初始化bind3一起替换基础的EmptyRepositoryContainer。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _appRouter = AppRouter();
  late RouteCore routeCore = RouteCore.create(EmptyRepositoriesContainer(), _appRouter);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

Usage

页面必须用@RoutePage()注解标记，就像在auto_route包中一样，但状态必须继承BindStateController<YourPage, YourController>（扩展自RouteController），如果你希望为所选页面使用逻辑控制器。

[@RoutePage](/user/RoutePage)()
class MenuMainPage extends StatefulWidget {
  const MenuMainPage({super.key});
  [@override](/user/override)
  State<MenuMainPage> createState() => _MenuMainPageState();
}

class _MenuMainPageState extends BindStateController<MenuMainPage, MenuMainController> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    ///你可以访问页面控制器以显示逻辑相关的部件
    print("${routeController.runtimeType}");
    // TODO: 实现构建
    throw UnimplementedError();
  }

  [@override](/user/override)
  void didChangeDependencies() {
    ///或用于其他控制器逻辑
    print("${routeController.runtimeType}");
    super.didChangeDependencies();
  }
}

但如果你的页面不需要控制器，可以像往常一样扩展State。

class _MenuMainPageState extends State<MenuMainPage> {}

你的页面控制器必须继承自RouteController。

这是与Mobx状态管理器一起工作的继承示例，稍后我会提供与Bloc/Cubit和其他状态管理器一起工作的示例。

class MenuMainController = MenuMainControllerBase with _$MenuMainController;

abstract class MenuMainControllerBase extends RouteController with Store {
  [@observable](/user/observable)
  ObservableList<String> titles = ObservableList();

  [@action](/user/action)
  void add(String title) => titles.add(title);

  [@action](/user/action)
  void removeAt(int index) => titles.removeAt(index);

  [@action](/user/action)
  void removeTitle(String title) => titles.removeWhere((val) => val.compareTo(title) == 0);

  [@action](/user/action)
  [@override](/user/override)
  Future<void> initController() async {
  }

  [@action](/user/action)
  [@override](/user/override)
  Future<void> disposeController() async {
  }
}