代码实现:
Widget wrapListWidget() { List<Widget> wrapChild = List(); List<String> textList = [ '文明之', '发祥', '心之所想', '目之所及', '皆是过往', '从容', '晚来天欲雪', '喝酒', '能饮一杯无' ]; for (int i = 0; i < textList.length; i++) { wrapChild.add(Container( decoration: BoxDecoration( color: KColorConstant.fff5f5f5, borderRadius: BorderRadius.all(Radius.circular(tyW(4)))), padding: EdgeInsets.only( left: tyW(8), right: tyW(8), top: tyW(4), bottom: tyW(4)), child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.ac_unit), Container( margin: EdgeInsets.only(left: tyW(4)), child: Text( textList[i], style: GeneralTextStyle.font13_808080, ), ) ]))); } return Wrap( spacing: tyW(8), // 横向间距 runSpacing: tyW(8), //纵向间距 children: wrapChild, ); }效果如下: Wrap 属性说明
** Wrap({ Key key, this.direction = Axis.horizontal,//主轴(mainAxis)的方向,默认为水平。 this.alignment = WrapAlignment.start,//主轴方向上的对齐方式,默认为start。 this.spacing = 0.0,//主轴方向上的间距。 this.runAlignment = WrapAlignment.start,//run的对齐方式。run可以理解为新的行或者列,如果是水平方向布局的话,run可以理解为新的一行。 this.runSpacing = 0.0,//run的间距。 this.crossAxisAlignment = WrapCrossAlignment.start,//交叉轴(crossAxis)方向上的对齐方式。 this.textDirection,//文本方向。 this.verticalDirection = VerticalDirection.down,//定义了children摆放顺序,默认是down,见Flex相关属性介绍。 List<Widget> children = const <Widget>[],// }) */