我正在尝试声明我的应用导航。由于我没有使用 MaterialApp
包装器或样式,我所有的导入都来自 package:flutter/widgets.dart
。
根据文档,要正确使用导航,我正在这样做:
import "package:flutter/widgets.dart";
import "package:myapp/routes/home.dart";
void main() {
runApp(
new WidgetsApp(/* stuck here */);
)
}
我被困在这一步,我正在尝试关注 Navigator docs和 ide 中的代码注释,但我不知道如何使用 WidgetsApp
的 onGenerateRoute
属性,也无法在网上找到完整的示例,因此提出了问题。
与 new MaterialApp()
类似,我如何在 new WidgetsApp()
中定义我的主路径和其余路由?
作为对此的后续问题,我是否可以在 new 中使用通配符路由,例如
以某种方式路由到布局中,然后由 switch 语句检查路由并显示页面?/onboarding/**
或 /dashboard/**
WidgetsApp()
最佳答案
您可以使用 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
);
}
}
希望有所帮助!
https://stackoverflow.com/questions/48024504/