Flutter-go 项目地址是:https://github.com/alibaba/flutter-go
说说拆解 Flutter-go 项目的想法吧。
原本是计划看完基础直接撸一个 玩Android 客户端,但是刚好看到了这个项目。为了之后编写的Flutter 代码能更加规范,而且能汲取大佬们的优秀思路,所以果断先研究一下一个 Flutter 项目使如何设计和实现的,待拆解完成之后再撸《玩Android》客户端也不迟。
拆解进度
文件目录结构(以LIb文件说明)
develop
从入口开始
从上图可以知道入口文件是main.dart 点击查看源码
查看源码我们可以看到main.dart 中主要实现的功能有
- 数据的初始化
数据库的初始化、搜索历史的初始化、Router 配置
void main() async {
// 创建数据库
final provider = new Provider();
// 数据库初始化
await provider.init(true);
// 获取 SP 对象
sp = await SpUtil.getInstance();
// 得到单例对象的 搜索 管理对象
new SearchHistoryList(sp);
db = Provider.db;
runApp(new MyApp());
}
- 展示首页
底部Tab 页面实现(原来是显示欢迎介绍页面的)
showWelcomePage() {
// 暂时关掉欢迎介绍
return AppPage();
// bool showWelcome = sp.getBool(SharedPreferencesKeys.showWelcome);
// if (showWelcome == null || showWelcome == true) {
// return WelcomePage();
// } else {
// return AppPage();
// }
}
在 main.dart 中主要还使用了第三方库fluro ,进行路由。
下面看看fluro 是如何使用的 文档地址
集成
方式1:
dependencies:
fluro: ^1.4.0
方式2:
dependencies:
fluro:
git: git://github.com/theyakka/fluro.git
然后点击右上角的`flutter packages upgrade`
使用
- 初始化
final router = Router();
- 定义
routes 和handlers
var usersHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
// UsersScreen 页面中构造方法传参
return UsersScreen(params["id"][0]);
});
void defineRoutes(Router router) {
router.define("/users/:id", handler: usersHandler);
// it is also possible to define the route transition to use
// router.define("users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
}
- 开启导航。在
main.dart 文件中onGenerateRoute 添加Application.router.generator
@override
Widget build(BuildContext context) {
return new MaterialApp(
...
// 生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面
onGenerateRoute: Application.router.generator,
);
}
}
- 页面跳转
// 参数1:上下文
// 参数2:路径和传递的参数,
// 参数3:页面跳转的动画(Handler 中定义才存在)
// router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
router.navigateTo(context, "/users/1234");
通过以上4步,我们实现了页面跳转,以及参数的传递,这里的"/users/1234"中的1234 是传递过去的id
|
请发表评论