2019-01-09 Flutter 实现流式布局
先来看看效果图吧
想必很多同学已经开始体验flutter了吧，如果还没有安装，请移步
flutter 中文网
进行安装。
不过别着急，光看个热闹也是可以的，顺便熟悉一下 flutter 的语法，也是很不错的哦。
当然，在安装flutter过程中，可能会遇到一些坑，我只是记录了我自己的坑，如果想了解，请查阅我之前的文章。
那么，接下来，我们步入正题，我自行切入小白视角，大神路过
请手下留情，欢迎共同探讨
创建Flutter 流式布局工程
点击，然后默认next
然后改名，
next
然后就创建好了
第一次创建
Flutter项目的时候，可能时间会长一些，耐心等待就好。创建好后，
Flutter有一个示例项目，如果第一次玩的话，可以看一看，如下。
这样，我们项目就创建好了，接下来，我们开始正式编写
流式布局代码
开始编写流式布局
上面，我们看到flutter项目的目录结构很好玩
- android
- ios
- lib
等等，而android中的清单文件是这个样子的
说明flutter仅仅是把android的这个MainActivity当做一个壳子，里面嵌入了自己的代码。
而我们要编辑的文件则是lib包下面的main.dart即dart文件
我们先看一下示例代码
这个示例代码的架子我还留着，但是，我要修改一下，主要动的是
MyHomePage这一部分，如图
body需要修改
floatingActionButton我们就不要了，所以，经过修改之后的是这样的
好了，接下来的关键就是这个流式布局怎么写😭
重头戏来了
1、首先，我们先随机生成文字，用来准备要显示的文字
这里选择一个包含很多单词的单词库
import 'package:english_words/english_words.dart';
见下图
注意，这个时候填完main.dart文件会报错的，这里不用管，下面执行完命令之后就没事了
不过在此之前，需要在项目中的pubspec.yaml文件中填加一下依赖
english_words: ^3.1.0
好了，上面两步都做好之后，还需要在terminal执行一下命令，用来导入这个单词库
flutter packages get
这样，这个单词库就可以使用了，而且main.dart文件也不会报错了，使用方法，我们这里也很简单，就是随机生成一个单词
var wp=WordPair.random();//得到一个随机生成单词的wordpair
wp.asPascalCase;//拿到单词的内容
OK，生成单词的问题搞定了
2、再来搞定单个块吧
这个东西，我们用Container来做
先来看下Container的属性
很简单，用
color做颜色，用child做文字即可,height我们固定，padding也固定来看一下单个块的代码
ok,如上图，我们先将单个
块弄出来，然后返回，这样跑出来的效果是这样的
哦，效果还可以，就是有点小瑕疵，不过我们先不管，最后再调整即可。
注意上面的文字用到了
Text控件，这个控件的属性是这样的，大家可以参考一下
青色的表示常用的属性
好了，下面我们开始逐行添加
单词块
3、逐行添加单词块
根据上面的代码先进行一下调整，将生成单个单词块的代码抽取出来，抽取完成如下图：
创建一个方法，根据用户输入
创建单词块的数量来创建n多个单词块，并将单词块存储在集合中
是不是很简单，接下来，遍历这个集合，然后逐行添加，这个时候需要考虑到
行宽及行高
本文的关键来了
flutter为我们提供了一个Flow的控件，这是他的结构
所以，这里我们直接借助Flow即可，再也不用像Android那样重写LinearLayout了。
根据官方提示，
paintChildren是用来控制Flow中子控件的排列的而
shouldRePaint则是决定是否重绘接下来，我们开始编写
paintChildren方法
ok，具体的代码及注释都已标注，请仔细阅读，这些东西，其实是本文章最重要的东西。
4、添加好后，修改我们之前的生成Widget的方法，实现流式布局的显示
这一步之后，效果就出来了~~~
请看
00.jpg
5、其实基本已经搞定了，但是现在和顶部的效果图还是有一定区别的,效果图中的文字是相对块居中的不知道小伙伴有没有注意到。
所以，后期还需要微调一下
我这里是使用了Stack进行了包裹，实现了居中的效果
6、最终效果~
总结
第一次使用flutter写东西，写的有些流水账，谈一下感想：
flutter 这个东西大体跟 java 还是很像的，只是布局不再像以前编辑 xml 文件，而是又回到了通过代码实现，不过实现方式其实 dart 语言提供了很多 Widget，等待我们挖掘。当然了，页面的跳转，他也有自己的方式
想关注更多flutter的东西，请大家持续关注~~~
