Flutter Wrap流式布局嵌套循环Row导致占据一行问题

Flutter Wrap流式布局嵌套循环Row导致占据一行问题

项目中我们在使用Wrap去循环数据的时候，有一些UI需要使用到Row布局来进行展示，但是众所周知的是，Row布局会占满一行，这就导致我们的Wrap失效了，如何解决呢？

解决方案：

利用RichText来代替Row，其中RichText中可以使用WidgetSpan来存放我们的正常Widget组件，上代码：

Wrap(spacing:ScreenAdapter.setWidth(20),// 主轴(水平)方向间距runSpacing:ScreenAdapter.setHeight(13), // 纵轴（垂直）方向间距// alignment: WrapAlignment.start, //沿主轴方向居中direction:Axis.horizontal,children: tagList.map<Widget>((item){return InkWell(child: Container(padding: EdgeInsets.symmetric(horizontal:ScreenAdapter.setWidth(20), vertical:ScreenAdapter.setHeight(10)),decoration: BoxDecoration(color:Color(0xffEEEEEE),borderRadius: BorderRadius.circular(20)),child:RichText(text: TextSpan(style: TextStyle(fontSize: 25, color: Colors.black, fontWeight:FontWeight.w500),children: [WidgetSpan(child: Container(width: 30,child: AspectRatio(aspectRatio: 1/1,child: ClipRRect(borderRadius: BorderRadius.circular(20),child: Container(color:Colors.white,child:Icon(Icons.add, size: 20, color:Color(0xffDB4739))),),),),),TextSpan(text:'${item['title']}')]),)),onTap: (){Navigator.pushNamed(context, '/themeDetails', arguments: {'id':'3RDOl99mWb'});},);}).toList())

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！