Flutter路由管理插件binding_router的使用

Flutter路由管理插件binding_router的使用

通过使用go_routerget x binding来提高路由管理的效率。

示例

以下是一些小示例,展示如何使用binding_router插件。

编码

BindingShellRouterBindingRouter

final router = GoRouter(initialLocation: "/", routes: [
  // 使用BindingShellRouter来创建一个带有底部导航栏的路由
  BindingShellRouter<BottomNavController>(
    binding: BottomNavBinding(), // 绑定底部导航栏控制器
    shellBuilder: (context, state, child) => BottomNav(child: child), // 构建底部导航栏
    routes: [
      // 定义主页面路由
      BindingRouter<HomeCon>(
        binding: HomeBinding(), // 绑定主页控制器
        path: '/', // 主页路径
        builderPage: (context, state) => 
            const NoTransitionPage(child: HomeScreen()), // 构建无过渡动画的主页
        routes: [
          // 定义详情页面路由
          BindingRouter<DetailCon>(
            binding: DetailBinding(), // 绑定详情页控制器
            path: 'detail', // 详情页路径
            builderPage: (context, state) => CustomTransitionPage<void>(
              key: state.pageKey, // 页面键
              transitionDuration: const Duration(milliseconds: 500), // 过渡动画时长
              child: const DetailPage(), // 详情页面
              transitionsBuilder: 
                  (context, animation, secondaryAnimation, child) => 
                      FadeTransition(opacity: animation, child: child), // 淡入淡出过渡动画
            ),
          ),
        ],
      ),
      // 定义设置页面路由
      BindingRouter<SettingCon>(
        binding: SettingBinding(), // 绑定设置页控制器
        path: '/settings', // 设置页路径
        builderPage: (context, state) => 
            const NoTransitionPage(child: SettingScreen()), // 构建无过渡动画的设置页面
      ),
    ],
  ),
]);

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

1 回复

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


在 Flutter 中,通常使用 NavigatorRouter 来进行路由管理。binding_router 并不是 Flutter 官方提供的路由管理插件,可能是第三方库或自定义实现。不过,假设你提到的是一个与路由相关的插件或者工具,我将基于常见的路由管理方式提供一个通用的使用说明。

如果你指的是某个特定的插件,请提供更多的上下文或文档链接,我可以为你提供更准确的帮助。

以下是 Flutter 中路由管理的基本使用方法,基于 Navigator 和自定义路由管理:

1. 使用 Navigator 进行路由管理

Flutter 提供了 Navigator 来管理页面之间的导航。

基本使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      routes: {
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到第二个页面
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回上一个页面
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

通过 Navigator.push 传递参数

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: 'Hello from Home'),
  ),
);

接收参数

class SecondPage extends StatelessWidget {
  final String data;

  SecondPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

2. 使用 RouterRouteInformationParser

对于更复杂的路由管理,比如 Web URL 支持,可以使用 RouterRouteInformationParser

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: MyRouterDelegate(),
      routeInformationParser: MyRouteInformationParser(),
    );
  }
}

class MyRouterDelegate extends RouterDelegate<String>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<String> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(child: HomePage()),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        return true;
      },
    );
  }

  @override
  GlobalKey<NavigatorState>? get navigatorKey => _navigatorKey;

  @override
  Future<void> setNewRoutePath(String configuration) async {}
}

class MyRouteInformationParser extends RouteInformationParser<String> {
  @override
  Future<String> parseRouteInformation(RouteInformation routeInformation) async {
    return routeInformation.location ?? '/';
  }

  @override
  RouteInformation? restoreRouteInformation(String configuration) {
    return RouteInformation(location: configuration);
  }
}

3. 第三方路由管理插件

如果你使用的是某个特定的第三方路由管理插件(如 auto_routefluro),请查阅其官方文档。以下是使用 auto_route 的示例:

dependencies:
  auto_route: ^2.0.0

生成路由:

@MaterialAutoRouter(
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: SecondPage),
  ],
)
class $AppRouter {}

使用生成的路由:

final router = AppRouter();
MaterialApp.router(
  routerDelegate: router.delegate(),
  routeInformationParser: router.defaultRouteParser(),
);

导航:

router.push(SecondRoute());
回到顶部