Flutter 示例中的流布局答案

【问题标题】：Flow Layout in flutter exampleFlutter 示例中的流布局
【发布时间】：2018-10-10 07:49:11
【问题描述】：

我想在 Flutter 中实现流布局，我在 sdk 中找到了一个名为 FLOW 的类，但找不到有关如何使用它的示例代码

这是我想要实现的布局

【问题讨论】：

标签： dart flutter flutter-layout flutter-dependencies

【解决方案1】：

使用Wrap 代替Flow。

Flow 用于更复杂的自定义布局。 Wrap 用于实现屏幕截图中的布局。

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
        label: Text('Hamilton'),
      ),
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
        label: Text('Lafayette'),
      ),
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
        label: Text('Mulligan'),
      ),
      Chip(
        avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
        label: Text('Laurens'),
      ),
  ],
)

【讨论】：

哦，那太好了，但是当我点击它动态添加芯片的 FAB 时，我该如何实现呢
先生，这是另一个问题。 ;)

【解决方案2】：

在 Flutter wrap 中是用于创建屏幕截图等布局的连拍小部件

Wrap ：它可以根据屏幕上的可用空间调整其子级。默认排列是水平的（如一行），但您可以使其垂直（如一列）。

chip：此小部件用于创建 TAG 或芯片

new Wrap(
  spacing: 5.0, // horizontal gap between chips
  runSpacing: 2.0, // gap between row
  children: <Widget>[
      new Chip(
        label: new Text('One'),
      ),
      new Chip(
        label: new Text('Two'),
      ),
      new Chip(
       label: new Text('Three'),
      ),
      new Chip(
        label: new Text('Four'),
      ),
  ],
)

【讨论】：