Wrap

原创于 2021-03-29 11:21:44 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wrap

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客介绍了如何在Flutter中利用Wrap组件来排列多个Chip，展示信息。通过设置spacing和runSpacing属性，实现了子控件之间的间距，创建了一个连续的 Chip 列表，包括人物名字如Hamilton, Lafayette, Mulligan和Laurens。

类似于ListView，用于显示多个信息时使用

每一个子控件顺延前一个控件。

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