版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中、灵活的方式去管理项目中所有页面的路由与导航。
通常我们是使用主页(home
)属性设置应用程序的默认路由,即Navigator.defaultRouteName
或/
路由上的组件。除非指定了初始路由(initialRoute
)属性,否则这是在应用程序正常启动时首先显示的路由。如果无法显示初始路由(initialRoute
)属性的路由,它也是显示的路由。
还有一个使用频率较低的在生成路由上(onGenerateRoute
)属性,是应用程序导航到命名路由时使用的路由生成器回调。通过自定义回调,可以灵活配置“什么路由名称导航到什么页面组件”。
下面我们就可以通过主页(home
)属性、初始路由(initialRoute
)属性和在生成路由上(onGenerateRoute
)属性来集中管理项目中的所有页面跳转。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
initialRoute: '/',
onGenerateRoute: _getRoute,
);
}
/// 路由(`Route`)是由导航器(`Navigator`)管理的条目的抽象类。
/// 路由设置(`RouteSettings`)类是一些可能在构建路由时有用的数据。
Route<dynamic> _getRoute(RouteSettings settings) {
// RouteSettings.name属性,路由的名称(例如`/settings`)。
final String name = settings.name;
// 根路径路由。
if (name == '/') {
// Material页面路由(`MaterialPageRoute`)类,通过平台自适应转换替换整个屏幕的模态路由。
// 对于Android,页面的入口转换会向上滑动页面并淡入其中。退出转换是相同的,但方向相反。
// 在iOS上,页面从右侧滑入,然后反向退出。当另一页进入以覆盖它时,页面也会在视差中向左移动。
return MaterialPageRoute(
// 设置属性,此路由的设置。
settings: settings,
// 构建者属性,构建路由的主要内容。
builder: (BuildContext context) => MyHomePage(),
);
// 主页面路由。
} else if (name == '/home') {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) =>
Scaffold(appBar: AppBar(title: Text('主页面'))),
);
// 设置页面路由。
} else if (name == '/setting') {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) =>
Scaffold(appBar: AppBar(title: Text('设置页面'))),
);
} else {
return null;
}
}
}
然后附上上面代码中的MyHomePage
类代码。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo 主页'),
),
body: ListView(
children: <Widget>[
RaisedButton(
onPressed: () {
// 使用命名路由导航到下一个屏幕。
Navigator.pushNamed(context, '/home');
},
child: Text('主页面'),
),
RaisedButton(
onPressed: () {
// 使用命名路由导航到下一个屏幕。
Navigator.pushNamed(context, '/setting');
},
child: Text('设置页面'),
),
],
),
);
}
}
最后运行项目,效果就是下面动图显示的样子。