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

最新推荐文章于 2024-08-11 16:54:24 发布

磐石BedRock

最新推荐文章于 2024-08-11 16:54:24 发布

阅读量2.4k

点赞数 1

分类专栏： Flutter 文章标签： Row占据一行 Wrap流式布局 Flutter布局

本文链接：https://blog.csdn.net/qq_38774121/article/details/115133001

版权

Flutter 专栏收录该内容

50 篇文章 11 订阅

订阅专栏

在Flutter项目中，当使用Wrap流式布局循环数据时，遇到Row布局会占据整行从而影响Wrap效果。为了解决这个问题，可以改用RichText配合WidgetSpan来替代Row。通过创建一个RichText，将图标和文字分别用WidgetSpan包装，实现类似Row的功能，同时保持Wrap的布局效果。示例代码展示了具体实现方式。

摘要由CSDN通过智能技术生成

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()
   )