• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

阿里 Flutter-go 项目拆解笔记(一)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Flutter-go 项目地址是:https://github.com/alibaba/flutter-go

说说拆解 Flutter-go 项目的想法吧。
原本是计划看完基础直接撸一个 玩Android 客户端,但是刚好看到了这个项目。为了之后编写的Flutter代码能更加规范,而且能汲取大佬们的优秀思路,所以果断先研究一下一个 Flutter项目使如何设计和实现的,待拆解完成之后再撸《玩Android》客户端也不迟。

拆解进度

  • 完成入口的文件的分析
  • Router 路由的使用

文件目录结构(以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`

使用

  1. 初始化final router = Router();
  2. 定义routeshandlers
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);
}
  1. 开启导航。在main.dart文件中onGenerateRoute添加Application.router.generator
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    ...
      // 生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面
      onGenerateRoute: Application.router.generator,
    );
  }
}
  1. 页面跳转
// 参数1:上下文
// 参数2:路径和传递的参数,
// 参数3:页面跳转的动画(Handler 中定义才存在)
// router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
router.navigateTo(context, "/users/1234");

通过以上4步,我们实现了页面跳转,以及参数的传递,这里的"/users/1234"中的1234是传递过去的id


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
go应用专题:gorm发布时间:2022-07-10
下一篇:
最好的6个Go语言Web框架发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap