哥哥带你Flutter快速实战,步步紧逼

首先分清结构,主攻三大部分

一,基础控件

1,tabbar控件实现

Scaffold + Appbar + Tabbar + PageView

2,上下刷新列表

Flutter 中 为我们提供了 RefreshIndicator 作为内置下拉刷新控件;同时我们通过给 ListView 添加 ScrollController 做滑动监听,在最后增加一个 Item, 作为上滑加载更多的 Loading 显示。

这里需要注意一点是:可以利用 GlobalKey<RefreshIndicatorState> 对外提供 RefreshIndicator 的 RefreshIndicatorState,这样外部就 可以通过 GlobalKey 调用 globalKey.currentState.show();,主动显示刷新状态并触发 onRefresh 。

 上拉加载更多在代码中是通过 _getListCount() 方法,在原本的数据基础上,增加实际需要渲染的 item 数量给 ListView 实现的,最后通过 ScrollController 监听到底部,触发 onLoadMore。

3,Loading框

默认系统提供了CircularProgressIndicator,但这里我要推荐一个第三方Loading库,flutte_spinkit ,通过简单的配置就可以使用丰富的Loading样式。

4,矢量图标库

矢量图标可以轻松定义颜色,任意调整大小不模糊,矢量图标库是引入ttf字体库文件实现,在flutter中通过icon控件,加载对应的icondata显示即可。这里推荐阿里巴巴的iconfont。

fonts: - asset: static/font/iconfont.ttf

5,路由跳转

Flutter中页面跳转是通过navigator实现的,路由跳转分为:带参跳转和不带参跳转。Navigator 的 push 返回的是一个 Future,这个Future 的作用是在页面返回时被调用的。也就是你可以通过 Navigator 的 pop 时返回参数,之后在 Future 中可以的监听中处理页面的返回结果。

二,数据模块

1,网络请求

dio ,http ,httpclient

2,Json序列化

在Flutter中,json序列化是特殊的。比如使用dio网络请求返回,如果配置了返回数据格式为json,实际上的收到的是一个map,而map使用不是很方便,所以需要再一次转化,转为实际的Model实体。

创建你的实体 Model 之后,继承 Object 、然后通过 @JsonSerializable() 标记类名。

通过 with _$TemplateSerializerMixin,将 fromJson 方法委托到 Template.g.dart 的实现中。 其中 *.g.dart、_$* SerializerMixin、_$*FromJson 这三个的引入, 和 Model 所在的 dart 的文件名与 Model 类名有关,具体可见代码注释和后面图片。

最后通过 flutter packages pub run build_runner build 编译自动生成转化对象。

3,Redux State    --    flutter_redux

全局状态管理器 -- 跨控件管理,同步state,比如把用户信息存储在 redux 的 store 中, 好处在于: 比如某个页面修改了当前用户信息,所有绑定的该 State 的控件将由 Redux 自动同步修改。State 可以跨页面共享。

在redux中主要引入了action,reducer,store概念。

action 用于定义一个数据变化的请求。

reducer 用于根据 action 产生新状态

store 用于存储和管理 state,监听 action,将 action 自动分配给 reducer 并根据 reducer 的执行结果更新 state。

Action 用于定义一个数据变化的请求行为。Reducer 用于根据 Action 产生新状态,一般是一个方法。Store 用于存储和管理 state。所以一般流程为:1、Widget 绑定了 Store 中的 state 数据。2、Widget 通过 Action 发布一个动作。3、Reducer 根据 Action 更新 state。4、更新 Store 中 state 绑定的 Widget。

4,数据库

按照 sqflite 文档提供的方法,重新做了一小些修改,通过定义Provider操作数据库:

在 Provider 中定义表名数据库字段常量,用于创建表与字段操作;

提供数据库与数据实体之间的映射,比如数据库对象与User对象之间的转化;

在调用 Provider 时才先判断表是否创建,然后再返回数据库对象进行用户查询。

三,其他功能

1,返回按键监听

  Flutter 中 ,通过WillPopScope 嵌套,可以用于监听处理 Android 返回键的逻辑。其实 WillPopScope 并不是监听返回按键,如名字一般,是当前页面将要被pop时触发的回调。

2,前后台监听

 WidgetsBindingObserver 包含了各种控件的生命周期通知,其中的 didChangeAppLifecycleState 就可以用于做前后台状态监听。

3,键盘焦点处理

一般触摸收起键盘也是常见需求,如下代码所示, GestureDetector + FocusScope 可以满足这一需求。

4,双端启动页

三,重点挖掘

1,Mixins

Mixin 能够更好的解决多继承中容易出现的问题,如:方法优先顺序混乱、参数冲突、类结构变得复杂化等等。

2,WidgetsFlutterBinding

WidgetsFlutterBinding 在 Flutter启动时runApp会被调用,作为App的入口,它肯定需要承担各类的初始化以及功能配置,这种情况下,Mixins 的作用就体现出来了。

3,inheriedWidget

InheritedWidget 是一个抽象类,在 Flutter 中扮演者十分重要的角色,或者你并未直接使用过它,但是你肯定使用过和它相关的封装。

InheritedWidget主要实现两个方法:

创建了InheritedElement,该Element属于特殊 Element,  主要增加了将自身也添加到映射关系表_inheritedWidgets【注1】,方便子孙 element 获取;同时通过notifyClients方法来更新依赖。

增加了updateShouldNotify方法,当方法返回 true 时,那么依赖该 Widget 的实例就会更新。

所以我们可以简单理解:InheritedWidget 通过InheritedElement实现了由下往上查找的支持(因为自身添加到_inheritedWidgets),同时具备更新其子孙的功能。

注1:每个 Element 都有一个_inheritedWidgets,它是一个 HashMap<Type, InheritedElement>,它保存了上层节点中出现的 InheritedWidget 与其对应 element 的映射关系。

接着我们看BuildContext,如上图,BuildContext其实只是接口,Element实现了它。InheritedElement是Element的子类,所以每一个 InheritedElement 实例是一个 BuildContext 实例。同时我们日常使用中传递的 BuildContext 也都是一个 Element 。

所以当我们遇到需要共享 State 时,如果逐层传递 state 去实现共享会显示过于麻烦,那么了解了上面的InheritedWidget之后呢?

是否将需要共享的 State,都放在一个 InheritedWidget 中,然后在使用的 widget 中直接取用就可以呢?答案是肯定的!所以如下方这类代码:通常如焦点、主题色、多语言、用户信息等都属于 App 内的全局共享数据,他们都会通过 BuildContext(InheritedElement) 获取。

综上所述,我们从先Theme入手。

如下方代码所示,通过给MaterialApp设置主题数据,通过Theme.of(context)就可以获取到主题数据并绑定使用。当MaterialApp的主题数据变化时,对应的 Widget 颜色也会发生变化,这是为什么呢(キ`゚Д゚´)!!?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349