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>[],//
    })
 */
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值