Flutter示例中的流布局

Question

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

这是我正在尝试实现的布局

Answer 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'),
      ),
  ],
)