Flutter示例中的流布局 [英] Flow Layout in flutter example

问题描述

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

i want to implement flow layout in flutter i found a class called FLOW in sdk but unable to find sample code on how to use it

这是布局i正在尝试实现

here is the layout i am trying to achieve

推荐答案

使用 包装 ，而不是流。

流用于更复杂的自定义布局。 换行是用来实现屏幕快照中的布局。

Flow is for more complicated custom layout. Wrap is what is used to achieve the layout in your screenshot.

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

这篇关于Flutter示例中的流布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！