flutter基础-看完这篇就可以撸app了

这篇内容纯干货,手把手一步一步展示,从零到一个完整的app的构建。

上一篇文章已经教大家怎么搭建flutter的环境:传送门

https://www.jianshu.com/p/a1344cfea21d

首先看一下我们的我们今天的demo构建出来的是啥样子的



这篇文章我们要讲的东东有

a. layout结构

b. navBar 

c. tabbar和列表组件的使用

d. http请求JSON数据,并渲染到列表

e. 组件之间的通信

 f.  路由(带参数路由)


废话不多说,直接开干

首先,flutter的一个强大的特性就是其炫酷霸气的UI库,官方传送门:Material-UI库

http://www.material-ui.com/#/

在这里大家就可以任意选择自己喜欢的UI组件了。


navBar

首先做这个demo,我们要来拆分有哪些结构

1. 肯定有个底部导航栏

2. 我们底部导航栏分别要对应的界面(假设3张)

ok, 那我们先建立这些dart文件,并命名, 分别为第一个界面,第二个界面,第三个界面

接下来,我们给每一个tab子界面,加入简单的代码结构,  渲染出来就是这样的效果

其中 scaffold是一个脚手架,可以就理解为一个html,appBar就是上面的那个titlebar,body就不用说了吧

有了这3个界面,我们就可以回到main.dart中,去加入一个底部导航,并且把他们都关联起来!

首先我们要将这3个tab界面引入到我们的父组件,就是main.dart中,像这样


引入组件

然后,我们来改造我们的main下面的widget, 像这样

其中TabController 就是tabbar的控制器,

然后我们在initState()初始化的时候,注意那个length属性,就是表示有几个tab,剩下的就不用管了,当走流程吧。

然后就是在首页的Scaffold中去加入一个bottomNavigationBar, 这个大家一看都懂是啥, 底部导航栏

然后在child里面new一个TabBar出来,TabBar中的tabs属性里面包含了一个Tab widget数组,每个Tab就是对应的下面的图标和文案, controller就是控制器了,应该都很好理解吧。

body:就是一个TabBarView widget, 里面的属性和TabBar widget都是对应着来的。

还有记得加入 SingleTickerProviderStateMixin, 记住就好,不要深究。

然后flutter run 跑起来,就实现了一个简单的底部导航了。

注:这里没有使用appBar属性,因为在tab子组件中定义了,这里添加了就会生成2个appbar了。


现在我们要在子组件中加入一个list组件

我们就集中放在firstPage里吧。

我们把列表定义为一个木偶组件,那我们就把他放进components里面,代码和效果如下:

main.dart
components/list.dart

布局layout

在这里我们就要说一下layout了.

先放官方传送门:flutter layout widget

可以大致分为2类:

1. Single-child layout widgets;父级widget中只能包含唯一一个子级widget

主要有: Contrainer、Padding、Center等等

2. Multi-child layout widgets;父级widget中能包含多个子级widget

主要有: Row、Column等等

一个官方的实例,就可以很明白的展示一个比较复杂的布局

layout实例

说白了,layout的方式就是一层一层的搭积木,和H5的基本一样,一层一层的往里面写,multi-child layout widget 默认支持flex布局,可以通过mainAxisAlignment(主轴属性)和 crossAxisAlignment(垂直轴属性)来进行flex布局。

mainAxisAlignment: MainAxisAlignment.spaceBetween

crossAxisAlignment: CrossAxisAlignment.center。

到此为止,我们就得到一个列表,接下来我们就要通过http请求接口,将返回的JSON数据绑定到我们的列表上去。

http请求

dart提供了io库

dart:io

类型转换库

dart:convert

http get请求

注:由于版本的跟新,其中代码有如下改动:

UTF8.decoder => utf8.decoder

json.decode => jsonDecode


我们定义个getData() 方法,后面带个 async,就是解决异步的,当然后面要更是await,大家应该都懂。

反正就是很标准的一个http请求,在response.statusCode == HttpStatus.OK时(或者是 == 200), 就得到了我们想要的数据,然后JSON.decode一下,然后setState方法,给我们widget中定义的参数赋值,然后就可以用了。如图下,红色圈出来的就是使用的方法。 在此我定义的参数为 data.

数据绑定

这样,JSON数据就成功的渲染了。

数据的渲染

一个列表项肯定可以点击进入去查看他的详情页,所以,接下来我们就来实现这个小功能。

路由

这里要用到的就是路由功能了。

官方实例如下:官方导航+路由链接

Router官方实例

在我们的app中,写法也是差不多的,但是我们需要将我们router的地址首先定义到我们的main.dart中

main.dart设定路由

这样,我们就能在其他界面中,通过"/detail"的路径,路由到这个界面。

但是正常的应用中,我们的路由或多或少会带上一些参数,使得进入下一个界面时,可以利用参数实现一些逻辑或者请求等等,下面我们就来看看怎么在路由中传递参数:

路由传递参数

左图是list界面,右边是detail界面,要做的事:

1. 在列表中listTile中加入onTap事件,然后定义一个_onTap function,其中要接受String类型参数id,

2. 在navigator中push一个pageRouteBuilder, 直接将我们写好的Detail类返回出来,带上参数id.(当然我们要提前在本界面中,把Detail的import进来,不然返回个吊啊。。)。后面的transition就是过度动画(现在不用管,反正这段代码都是官方的)。

3. 在Detail.dart中一定要定义你需要传入的参数名称,不然就gg了。最后就可以为所欲为了, 哈哈。

在这里,点击每一个对应的列表项,将跳转到对应的detail界面,并把列表项中的id属性,一起传过去,并显示出来,通过左上回退按钮,就可以回到列表页,如下图显示:

路由传参

组件通信

在vue, react各种流行的年代,那组件化的思想,flutter也不能丢了。那接下来我们就来实现一下组件之间的通信。那我们就在<通知>这个tab中来实现一个简单的组件化通信。直接上代码:

组建通信

左边父组件:

1. 我们这里做了一个input框,然后定义一个参数: active

2. 通过改变input的onChanged事件监听input值的变化,并赋值给Input组件的active

右边子组件:

1. 通过下面代码,接收传过来的active的值


Input({Key key, this.active})


    : super(key: key);


2. 显示active的值的变化

组件通信

这样就实现了简单的父组件对子组件的通信。

相关

下一篇:flutter基础-组件通信(父子、兄弟)

结语

到这里本篇就结束了,有了以上的这些技术点,完全够咱们撸一个简单但完整的app出来了吧,大家有机会就自己来试试,分分钟撸一个app。

文章写得实在匆忙,也是纯新萌,所以逻辑如果有没理顺的,东西写错了的,大家就直接留言喷就好!

最后打包的流程,可以参考鱼丸大神的这片文章:传送门

https://www.jianshu.com/p/f91b4e84cec8

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,461评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,089评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,078评论 0 212
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,938评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,698评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,733评论 1 175
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,340评论 2 268
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,138评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,949评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,493评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,269评论 2 214
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,591评论 1 229
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,216评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,107评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,485评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,615评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,006评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,496评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,572评论 2 230

推荐阅读更多精彩内容