颤动示例中的流布局

Question

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

这是我想要实现的布局

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

Answer 2

在 Flutter 中，wrap 是用于创建类似于您的屏幕截图的布局的连击小部件

Wrap : 它可以根据屏幕上可用的space调整它的children。默认排列是水平排列（如一行），但您可以将其设置为垂直排列（如一列）。

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

颤动示例中的流布局

Flow Layout in flutter example

dart

flutter

flutter-layout

flutter-dependencies