看完这篇就可以用Flutter撸App了

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

1.  layout结构

2.  navBar 

3.  tabbar和列表组件的使用

4.  http请求JSON数据，并渲染到列表

5.  组件之间的通信

6.   路由（带参数路由）

 Flutter强大的UI库 

首先，flutter的一个强大的特性就是其炫酷霸气的UI库。

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

引入组件

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

main.dart

layout实例

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

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

 Http请求 

数据绑定

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

Router官方实例

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

路由传递参数

左图是list界面，右边是detail界面，要做的事：

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

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

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

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

组建通信

左边父组件：

1、我们这里做了一个input框，然后定义一个参数： active

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

右边子组件：

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

2. 显示active的值的变化

等等，先别走！「码个蛋」又有活动了！参与活动不但可以培养自己的好习惯，还能拿到「码个蛋」IP系列专属奖品，速度要快…

今日问题：

说说你对Flutter的看法strong>

留言格式：

打卡 x 天，答：xxx。