您可以使用onGenerateRoute
属性为小部件应用程序生成路由。
这是同样功能的非常简单的实现:
import 'package:flutter/widgets.dart';
void main() => runApp(new MyWidgetsApp());
class MyWidgetsApp extends StatelessWidget {
Route generate(RouteSettings settings){
Route page;
switch(settings.name){
case "/":
page = new PageRouteBuilder(
pageBuilder: (BuildContext context,Animation<double> animation,
Animation<double> secondaryAnimation){
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text("Home Page",textDirection: TextDirection.ltr,),
const Padding(padding: const EdgeInsets.all(10.0)),
new GestureDetector(
onTap: () => Navigator.of(context).pushNamed("/first"),
child: new Container(
padding: const EdgeInsets.all(10.0),
color:Colors.blue,
child: const Text("Go to First Page"),
),
),
const Padding(padding: const EdgeInsets.all(10.0)),
new GestureDetector(
onTap: () => Navigator.of(context).pushNamed("/abcd"),
child: new Container(
padding: const EdgeInsets.all(10.0),
color:Colors.blue,
child: const Text("Unkown Route"),
),
)
],
);
},
transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) {
return new FadeTransition(
opacity: animation,
child: new FadeTransition(
opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second),
child: child,
),
);
}
);
break;
case "/first":
page = new PageRouteBuilder(
pageBuilder: (BuildContext context,Animation<double> animation,
Animation<double> secondaryAnimation){
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text("First Page",textDirection: TextDirection.ltr,),
const Padding(padding: const EdgeInsets.all(10.0)),
new GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: new Container(
padding: const EdgeInsets.all(10.0),
color:Colors.blue,
child: const Text("Back"),
),
)
]
);
},
transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) {
return new FadeTransition(
opacity: animation,
child: new FadeTransition(
opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second),
child: child,
),
);
}
);
break;
}
return page;
}
Route unKnownRoute(RouteSettings settings){
return new PageRouteBuilder(
pageBuilder: (BuildContext context,Animation<double> animation,
Animation<double> secondaryAnimation){
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text("First Page",textDirection: TextDirection.ltr,),
const Padding(padding: const EdgeInsets.all(10.0)),
new GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: new Container(
padding: const EdgeInsets.all(10.0),
color:Colors.blue,
child: const Text("Back"),
),
)
]
);
}
);
}
@override
Widget build(BuildContext context) {
return new WidgetsApp(
onGenerateRoute: generate,
onUnknownRoute: unKnownRoute,
textStyle: const TextStyle(),
initialRoute: "/",
color: Colors.red
);
}
}
希望这能帮到你!
transitionsBuilder
实现到PageRouteBuilder
中。希望这就是你想要实现的效果。之前的路由会淡出,然后新的路由出现,反之亦然。希望这有所帮助! - Hemanth Rajanimation
完成)? - Ilja