flutter wrap容器

wrap组件

单行的warp几乎是和row组件一致,但列的warp组件几乎是和column组件一致,warp突破了行和列的限制,当主轴上元素突破了限制,会想副轴扩展,比如在一行排不行,会向另一行扩展

属性	说明
direction	主轴的方向,默认水平
alignment	主轴的对其方式
spacing	主轴方向上的间距
textDirectio	文本方向
verticalDirection	定义了children 摆放顺序，默认是 down，见Flex组件相关属性介绍。
runAlignment	run的对齐方式。run 可以理解为新的行或者列，如果是水平方向布局的话，run 可以理解为新的一行
runSpacing	run 的间距

代码实例

//wrap组件
class wrap_test extends StatelessWidget {
  List<Widget> _initdata() {   //定义一个方法,生成数据
    List<Widget> tmplist = [];
    for (int i = 0; i < list.length; i++) {
      tmplist.add(
          ElevatedButton(onPressed: () {},
              style: ButtonStyle(    //设置按钮样式
                backgroundColor: MaterialStateProperty.all(Colors.grey)   //设置按钮背景色
              ),
              child: Text("${list[i]["name"]}"))
      );
    }
    return tmplist;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10,  //设置主轴元素之间的间距
      runSpacing: 5,  //设置副轴的对齐方式
      children:_initdata(),   //调用上面的方法
    );
  }
}

代码效果