设置 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'),
)
)
