代码实现:
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>[],//
})
*/