flutter 文字模块超过一行宽度,换下行显示,模块自动换行显示

一个简单的效果,小模块到换行的宽度 然后换行显示,flutter已经有自带控件了,这一点点赞

class RightListView extends StatelessWidget {
  List rightTitles = ['测试数据就是这样怎么了','这个短','这个长是不是是','我就是随便写写','是短','这个长不长也','就那样也不长','谁说的这个是最后的我就写长点儿你能拿我怎么办打不到我吧我就是这么强大'];
      @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(left: 10.0,top: 10.0),
      alignment: Alignment.topLeft,
      child: Wrap(
        spacing: 8.0,
        runSpacing: 8.0,
        children: rightTitles.map((childNode){
          return GestureDetector(
            child: new ClipRRect(
              borderRadius: BorderRadius.circular(3.0),
              child: Container(
                padding:  EdgeInsets.all(3.0),
                color: getRandomColor(),
                child: Text(
                  childNode,
                  style: TextStyle(
                    fontSize:14,
                    color: Colors.white,
                    shadows: [
                      BoxShadow(
                        color: Colors.grey,
                        offset: Offset(0.2, 0.2)
                  )],
                ),
              ),
            ),
            )
          );
        }).toList(),
      ),
    );
  }

}
getRandomColor(){
  return Color.fromARGB(255, Random.secure().nextInt(255), Random.secure().nextInt(255), Random.secure().nextInt(255));
}

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值