目录
- 组件 - BottomAppBar
- 手势控制 - GestureDetector
- 路由概述
- 构建路由
- 命名路由
- 路由库 - fluro
1. 组件-BottomAppBar
我们可以通过Scaffold的bottomNavigationBar属性来设置底部导航，通过Material组件库提供的BottomNavigationBar和BottomNavigationBarItem两种组件来实现Material风格的底部导航栏。
| 属性 | 说明 |
|---|---|
| BottomNavigationBarItem | 多个菜单项 |
| currentIndex | 当前页面索引 |
| iconSize | 图标大小 |
| type | 导航底部的类型 |
| onTap() | 点击选中时函数 |
2. 手势控制-GestureDetector
GestureDetector是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。像按钮，ListView等一些组件都是具有点击事件的，但是还有一些组件是不具备点击事件的，这时我们就可以用到GestureDetector来监听当前组件的事件行为。
示例代码如下：
child: GestureDetector(
child: Text(
item['title'],
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 20.0
),
),
// 单击事件
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return DetailPage(item['title']);
})
);
},
// onLongPress 长按事件
// onDoubleTap 双击事件
),
GestureDetector里面还有很多事件，可自行查文档。
3. 路由概述
路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。
4. 构建路由
4.1 MaterialPageRoute
MaterialPageRoute 是Material组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画
| 属性 | 说明 |
|---|---|
| builder | 构建路由页面的具体内容，返回值是一个widget。 |
| settings | 路由的配置信息，如路由名称、是否初始路由（首页） |
| maintainState | 是否释放其所占用的所有资源 |
4.2 页面跳转-Navigator
Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。
以下是常用的两个方法:
| 方法 | 说明 |
|---|---|
| push(BuildContext context, Route route) | 打开新的页面 。 |
| pop(BuildContext context, [ result ]) | 退出当前页面，result 为页面关闭时返回给上一个页面的数据。 |
Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route)，还有很多其他的方法，可查API文档。
跳转到新路由，代码如下：
创建一个A页面，在B页面中引入A页面文件。
class APage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("New route"),
),
body: Center(
child: Text("This is new route"),
),
);
}
}
import 'APage.dart'
// ...省略其他代码
Navigator.push( context,
MaterialPageRoute(builder: (context) {
return APage();
}));
},
4.3 路由传值
// ...省略其他代码
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return DetailPage("1");
})
);
},
在打开的页面接收参数值，代码示例如下：
class APage extends StatelessWidget {
final String id;
DetailPage(this.id);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("New route"),
),
body: Center(
child: Text(${this.id}),
),
);
}
}
关闭当前路由时，传递参数值，具体代码如下：
RaisedButton(
onPressed: () => Navigator.pop(context, "我是返回值"),
child: Text("返回"),
)
5. 命名路由
所谓“命名路由”（Named Route）即有名字的路由，我们可以先给路由起一个名字，然后就可以通过路由名字直接打开新的路由了，这为路由管理带来了一种直观、简单的方式。
5.1注册路由表
// 导入相关组件，loginpage, listpage, navbar
MaterialApp(
title: 'Flutter 路由',
initialRoute: "/login", // 初始路由
// 注册路由表
routes: {
'/': (BuildContext context) => Navbar(),
"/home": (BuildContext context) => new Navbar(),
'/list': (BuildContext context) => new ListPage(),
'/login': (BuildContext context) => LoginPage()
},
);
5.2通过路由名打开新路由页
Navigator.of(context).pushNamed('/home');
5.3 命名路由参数传递
代码示例如下：
Navigator.of(context).pushNamed('/home', arguments: '公司名称: ${data['data']['area']['fullName']}');
获取路由参数
var args=ModalRoute.of(context).settings.arguments
5.4 onGenerateRoute
MaterialApp有一个onGenerateRoute属性，它在打开命名路由时可能会被调用,有了onGenerateRoute回调，控制页面权限的功能就非常容易, 如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路
代码如下：
MaterialApp(
... //省略无关代码
onGenerateRoute:(RouteSettings settings){
return MaterialPageRoute(builder: (context){
String routeName = settings.name;
// 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
// 引导用户登录；其它情况则正常打开路由。
}
);
}
);
6. 路由库 - fluro
- 在配置文件pubspec.yaml中添加第三方路由库，fluro(https://github.com/theyakka/fluro)
dependencies
fluro: ^1.5.1
或者也可以直接引用git链接
dependencies
fluro:
git: git://github.com/theyakka/fluro.git
保存配置文件即可，或者运行flutter packages upgrade就安装成功啦。
小插曲：
安卓打包命令：flutter build apk ；
打包出来生成的文件目录在项目下/build/app/outputs/apk/release
ios打包命令: flutter build ios
网友评论