颤动示例中的流程布局

Question

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

这是我想要实现的布局

Answer 1

使用Wrap代替Flow。

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

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

Answer 2

在Flutter wrap中是击球小部件，用于创建布局（如屏幕截图）

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

芯片：此小部件用于创建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'),
      ),
  ],
)