Flutter中的路由
Flutter中的路由通俗来讲就是页面跳转，在Flutter中通过Navigator组件管理路由导航。并且提供了管理堆栈的方法，如：Navigator.push和Navigator.pop
Flutter提供了两种配置路由跳转的方式：1、基本路由 2、命名路由
Flutter中的基本路由的使用
例如我们需要在botton点击后进行页面跳转
RaisedButton(
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(context){
return SearchPage();//返回需要启动的页面
}
)
);
},
),
如果我们需要退出当前页面
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop(); //退出当前页面
},
),
使用Navigator进行页面传值
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SeachPage(),
));
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title') //因为此处向构造参数值传递，也可以通过get set去传递值
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
class FromPage extends StatelessWidget{
String title;
FromPage({this.title='默认From'});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title), //在此处，将传递的数据进行引用
),
body: ListView(
children: <Widget>[
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
],
),
);
}
}
Flutter中的命名路由的使用
在使用命名路由导航时，我们需要先声明路由。即我们要在MaterialApp中的routes进行路由配置
值得一提的是，routes的值是
Map<String, WidgetBuilder>类型的
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
routes: {
'/form':(context)=>FromPage(),//表单页面
'/Seach':(context)=>SeachPage(),//搜索页面
},
);
}
}
在进行跳转时，我们只需要进行这样子操作
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.pushNamed(context, '/Seach');//这里的第二个参数就是我们的routes的Map集合中的key即可。
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
命名路由的传值
首先我们需要将我们的创建一个Roustes.dart用于进行路由的管理
final routes={
'/':(context)=>Tabs(),
'/search':(context,{arguments})=>SeachPage(arguments:arguments),
"/from":(context)=>FromPage(),
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context));
return route;
}
}
};
onGenerateRoute这个是命名路由传参的固定写法。在命名路由中传参的时候，我们的页面构造参数需要发生改变。
在MaterialApp中有一个onGenerateRoute属性，这是我们将我们定义的onGenerateRoute传递进去即可。
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: Tabs(),等同于 initialRoute: '/',
initialRoute: './',
onGenerateRoute: onGenerateRoute,
);
}
}
例如我们的SeachPage页面则需要添加一个’arguments’的可选参数
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
}
那我们应该如何传递参数呢？
假设我们在我们的HomePage页面将参数传递给SeachPage页面时，
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () { //此处进行参数传递,arguments
Navigator.pushNamed("/search",arguments: {
"id":"213123"
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title',)
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
在SeachPage页面处理参数
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop();
},
),
appBar: AppBar(
title: Text('搜索'),
),
body: Text("搜索页面区域${arguments['id']}")//进行参数的使用
);
}
}