设置路由切换效果与传参

设置 ios 与 Android 路由由右到左切换过程与动画效果

设置路由方向与动画

PageRouteBuilder _createPageRoute(Widget page,) {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return page;
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        var begin = const Offset(1.0, 0.0); // 页面从右侧开始
        var end = Offset.zero; // 页面结束位置在屏幕中心
        var curve = Curves.easeOut; // 动画曲线
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

        return SlideTransition(
          position: animation.drive(tween),
          child: child,
        );
      },
    );
  }

跳转方法

routeName 路由名称
arguments 是否需要传递参数

void navigateTo(BuildContext context, String routeName, [dynamic arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

页面跳转是否传参

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      OutlinedButton(onPressed: (){
        navigateTo(context, '/deviceList' );
      },child: const Text('页面不需要传参实例'),),
      OutlinedButton(onPressed: (){
        navigateTo(context, '/detail',   {
          'title': '虹浪漫',
          'message': '78号',
        },
        );
      },child: const Text('页面传参实例'),)
    ],
  ),
)

监听路由变化与传参

settings.arguments 获取页面跳转时设置的参数，并传递到下一个页面

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    useMaterial3: true,
  ),
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/detail':
       final args = settings.arguments;
        return _createPageRoute(const Detail(args:args!,));
      case '/deviceList':
        return  _createPageRoute( DeviceList());
      default:
        return null;
    }
  },
  home: const MyHomePage(title: 'Flutter Demo Home Page'),
)