这篇内容纯干货，手把手一步一步展示，从零到一个完整的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请求

我们定义个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的值的变化

组件通信

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

结语

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

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

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

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

作者：偏罗
链接：https://www.jianshu.com/p/bb69f81f6236
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。