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