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的东西，请大家持续关注~~~