Flutter 实现Widget内铺满自动换行

代码实现:

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>[],//
    })
 */

猜你喜欢

转载自blog.csdn.net/lxd_love_lgc/article/details/107057367