Flutter - Wrap 流式布局

最新推荐文章于 2024-04-10 20:51:08 发布

a136447572

最新推荐文章于 2024-04-10 20:51:08 发布

阅读量418

点赞数

分类专栏： Flutter 文章标签： flutter android

本文链接：https://blog.csdn.net/a136447572/article/details/128255006

版权

Flutter 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

Wrap 总的来说 ,使用起来比较方便 ,主要的功能,我理解的就是自动换行,行内空间的位置不够时可以自动换行,显示

有三个属性比较重要

Wrap({
...
this.spacing = 0.0,    // 主轴方向子widget的间距
this.runSpacing = 0.0, // 纵轴方向的间距
this.runAlignment = WrapAlignment.start,  // 纵轴方向的对齐方式
})

示例

在这里插入图片描述

Wrap(
  spacing: 8,
  runSpacing: 4,
  runAlignment: WrapAlignment.center,
  children: const <Widget>[
    Chip( 
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('A')), 
      label:  Text('asasfasasasfasdasdasasfasdasdasasfasdasdasasfasdasdaasasfasasasfasdasdasasfasdasdasasfasdasdasasfasdasdasasfasdasddasdsasfasdasddasd'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
      label: Text('sda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('Laurens'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('asasfasdasdasda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('a'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('sdasd'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.red, child: Text('A')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
      label: Text('sda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('Laurens'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('asasfasdasdasda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('a'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('sdasd'),
    ),
        Text('sdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasd'),

  ],
)