flutter之Wrap布局

Wrap 布局

wrap 布局比较简单,其直接继承自multiChildRenderObjectWeight,大部分属性与 Flex 布局相同,但要注意有三个额外属性.

1. spacing：子组件在主轴的间隔距离,如果指定了aligment的属性为WrapAligment.spaceAround/spanceBetween/spaceEvenly,则该属性无效
2. runSpacing：子组件在交叉轴的的间隔距离
3. runAligment：子组件在交叉轴的布局方式,注意,交叉轴默认大小为子组件高度/宽度总和,所以如果需要使用该属性,请使用ConstrainedBox约束

List<Widget> children =
      ["王大锤", "张三三", "刘大鹅", "yukyao", "静静", "朱大春", "党中央"].map((e) => Chip(
            label: Text(e),
            avatar: CircleAvatar(
              child: Text(e.substring(0, 1)),
              backgroundColor: Colors.blue[200],
            ),
          )).toList();
ConstrainedBox(
    constraints:BoxConstraints(minHeight:double.Infinty),
    child:Wrap(
    aligment:WrapAligment.center,
    spacing:8.0,
    runSpacing:10.0,
    runAligment:WrapAligment.end,
    children:children
)
)

⚠：布局方式默认为水平布局,那么如果不强制指定minHeight的话,默认高度即为组件高度,即使定义了runAligment的值为WrapAligment.center,也不会在屏幕居中显示.