flutter开发实战-常用的路由Route配置

flutter开发实战-常用的路由Route配置

路由（Route）在移动开发中通常指页面（Page），这跟 Web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android中 通常指一个 Activity，在 iOS 中指一个 ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

这段来自：https://book.flutterchina.club/chapter2/flutter_router.html#_2-4-1-%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%A4%BA%E4%BE%8B

下面记录一下本人常使用的路由设置。

一、配置router_manager

// 定义各个页面的路由name
class RouterName {
  // 隐私统一
  static const String agreement = 'agreement';

  // 启动页广告
  static const String splash = 'splash';

  // tab
  static const String tab = '/';

  // 用户profile
  static const String profilePage = 'profilePage';
}

通过页面跳转，经常使用的是PageRouteBuilder，这里自定义几个常用的PageRouteBuilder

class NoAnimRouteBuilder extends PageRouteBuilder {
  final Widget page;

  NoAnimRouteBuilder(this.page)
      : super(
      opaque: false,
      pageBuilder: (context, animation, secondaryAnimation) => page,
      transitionDuration: Duration(milliseconds: 0),
      transitionsBuilder:
          (context, animation, secondaryAnimation, child) => child);
}

class FadeRouteBuilder extends PageRouteBuilder {
  final Widget page;

  FadeRouteBuilder(this.page)
      : super(
      pageBuilder: (context, animation, secondaryAnimation) => page,
      transitionDuration: Duration(milliseconds: 500),
      transitionsBuilder: (context, animation, secondaryAnimation,
          child) =>
          FadeTransition(
            opacity: Tween(begin: 0.1, end: 1.0).animate(CurvedAnimation(
              parent: animation,
              curve: Curves.fastOutSlowIn,
            )),
            child: child,
          ));
}

class SlideTopRouteBuilder extends PageRouteBuilder {
  final Widget page;

  SlideTopRouteBuilder(this.page)
      : super(
      pageBuilder: (context, animation, secondaryAnimation) => page,
      transitionDuration: Duration(milliseconds: 800),
      transitionsBuilder:
          (context, animation, secondaryAnimation, child) =>
          SlideTransition(
            position: Tween<Offset>(
                begin: Offset(0.0, -1.0), end: Offset(0.0, 0.0))
                .animate(CurvedAnimation(
                parent: animation, curve: Curves.fastOutSlowIn)),
            child: child,
          ));
}

class SizeRoute extends PageRouteBuilder {
  final Widget page;

  SizeRoute(this.page)
      : super(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionDuration: Duration(milliseconds: 300),
    transitionsBuilder: (context, animation, secondaryAnimation, child) =>
//                Align(
//                  child: SizeTransition(child: child, sizeFactor: animation),
//                ),
    ScaleTransition(
      scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
          parent: animation, curve: Curves.fastOutSlowIn)),
      child: child,
    ),
  );
}

通过页面跳转，iOS效果的跳转效果是CupertinoPageRoute，使用CupertinoPageRoute子类

// 通过裁剪去除页面的shadow

class MyCupertinoPageRoute<T> extends CupertinoPageRoute {
  MyCupertinoPageRoute({
    required WidgetBuilder builder,
    RouteSettings? settings,
  }) : super(builder: builder, settings: settings);

  @override
  bool get barrierDismissible => true;

  @override
  Color? get barrierColor => ColorUtil.hexColor(0x000000, alpha: 0.2);

  @override
  // A relatively rigorous eyeball estimation.
  Duration get transitionDuration => const Duration(milliseconds: 450);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    // 通过裁剪去除页面的shadow
    return ClipRRect(
      clipBehavior: Clip.hardEdge,
      child:
          super.buildTransitions(context, animation, secondaryAnimation, child),
    );
  }
}

实现settings.name的不同name对应不同的页面Route

class RouterManager {
  // ignore: missing_return
  static Route<dynamic> generateRoute(RouteSettings settings) {
    print("generateRoute: ${settings}, name:${settings.name}");
    switch (settings.name) {
      case RouterName.home:
        {
          return NoAnimRouteBuilder(const MyHomePage(
            title: "home",
          ));
        }
        break;

      case RouterName.login:
        {
          return NoAnimRouteBuilder(const LoginPage(
            title: "LoginPage",
          ));
        }
        break;

      case RouterName.profilePage:
        {
          return MyCupertinoPageRoute(
            builder: (_) => PersonProfilePage(
              arguments: settings.arguments,	// 传递的参数
            ),
          );
        }
        break;


      default:
        return NoAnimRouteBuilder(const MyHomePage(
          title: "home",
        ));
    }
  }
}

二、在入口main的MaterialApp使用router_manager

return MaterialApp(
      theme: ThemeData(
        fontFamily: "PingFang SC",
        primarySwatch: themeModel.theme,
      ),
      debugShowCheckedModeBanner: false,
      supportedLocales: S.delegate.supportedLocales,
      locale: localeModel.getLocale(),
	// 设置route
      onGenerateRoute: RouterManager.generateRoute,
      navigatorObservers: buildObservers(),
      localizationsDelegates: const [
        S.delegate,
        RefreshLocalizations.delegate, //下拉刷新
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      localeResolutionCallback: (_locale, supportedLocales) {
        if (localeModel.getLocale() != null) {
          //如果已经选定语言，则不跟随系统
          return localeModel.getLocale();
        } else {
          //跟随系统
          print("_locale：${_locale}");
          Locale locale;
          if (supportedLocales.contains(_locale)) {
            locale = _locale!;
          } else {
            //如果系统语言不是中文简体或美国英语，则默认使用美国英语
            locale = Locale('en', 'US');
          }
          return locale;
        }
      },
    );
  }

三、路由页面跳转

配置之后就可以使用了，使用的示例-路由页面跳转示例

// 进入个人信息
  void enterMyProfilePage() {
    dynamic obj = widget.arguments;
    if (widget.arguments != null && widget.arguments is Map) {
      NavigatorRoute.push(RouterName.profilePage, arguments: obj);
    }
  }

四、小结

flutter开发实战-常用的路由Route配置，主要实现配置路由，PageRouteBuilder、MaterialApp中设置onGenerateRoute，最后使用NavigatorRoute.push进行页面跳转，页面传参数。

学习记录，每天不停进步。