Flutter 瀑布流布局（根据图片高度展示）

最新推荐文章于 2025-03-24 09:44:35 发布
磐石BedRock
最新推荐文章于 2025-03-24 09:44:35 发布
阅读量1.3k
点赞数
分类专栏： Flutter 文章标签： flutter android android studio
本文链接：https://blog.csdn.net/qq_38774121/article/details/125143094
版权
Flutter 专栏收录该内容
50 篇文章
订阅专栏
Flutter瀑布流布局，根据后端返回的阿里云上的图片宽高信息来计算决定布局的数据信息

效果：
在这里插入图片描述
代码：
// 模拟数据
  var listData = [
    {'img':'https://img11.360buyimg.com/babel/s290x370_jfs/t1/168303/35/8655/261408/603db12dE885ad355/b7b88defb9b6d0e5.jpg!q95!cc_290x370.webp', 'width':290, 'height':370, 'ava_tar':'https://img1.baidu.com/it/u=873941767,2015595416&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','name':'低调的丶奢华', 'like':132, 'desc':'京东高品质加点，最高可享24息免息，快来京东使用吧！！', },
    {'img':'https://img10.360buyimg.com/img/s130x130_jfs/t1/142212/38/23189/181038/61b40495Ee3f629ed/f1b89e383296fa4d.jpg!cc_130x130.webp', 'width':130, 'height':130, 'ava_tar':'https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','name':'梦醒石乐芬', 'like':301, 'desc':'APPLE 苹果16英寸M1轻薄笔记本电脑教育优惠2021 深空灰 14英寸Pro【8核+14核】16G+512G', },
    {'img':'https://img20.360buyimg.com/da/s590x470_jfs/t1/120638/23/21032/80784/625d31caEacdcbd92/26534864d96aed1a.jpg.webp', 'width':500, 'height':300, 'ava_tar':'https://img0.baidu.com/it/u=1942253063,3807598283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','name':'爱吃西瓜的小美', 'like':79, 'desc':'高品质 | 快来用！', },
    {'img':'https://img20.360buyimg.com/babel/s290x370_jfs/t1/169223/11/9002/236742/603f38feEa4a8d83e/4ace79eafcac855c.jpg!cc_290x370.webp', 'width':290, 'height':370, 'ava_tar':'https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500','name':'RNG丶Uzi', 'like':45, 'desc':'碧浪 Ariel 专业抗菌根源洁净香氛洗衣液13.6斤 杀菌除菌 家庭装套装机洗3KG*2瓶+200G*4袋 补充装 包装随机', },
    {'img':'https://img11.360buyimg.com/babel/s290x370_jfs/t1/168303/35/8655/261408/603db12dE885ad355/b7b88defb9b6d0e5.jpg!q95!cc_290x370.webp', 'width':290, 'height':370, 'ava_tar':'https://img1.baidu.com/it/u=873941767,2015595416&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','name':'低调的丶奢华', 'like':132, 'desc':'京东高品质加点，最高可享24息免息，快来京东使用吧！！', },
    {'img':'https://img10.360buyimg.com/img/s130x130_jfs/t1/142212/38/23189/181038/61b40495Ee3f629ed/f1b89e383296fa4d.jpg!cc_130x130.webp', 'width':130, 'height':130, 'ava_tar':'https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','name':'梦醒石乐芬', 'like':301, 'desc':'APPLE 苹果16英寸M1轻薄笔记本电脑教育优惠2021 深空灰 14英寸Pro【8核+14核】16G+512G', },
    {'img':'https://img20.360buyimg.com/da/s590x470_jfs/t1/120638/23/21032/80784/625d31caEacdcbd92/26534864d96aed1a.jpg.webp', 'width':500, 'height':300, 'ava_tar':'https://img0.baidu.com/it/u=1942253063,3807598283&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500','name':'爱吃西瓜的小美', 'like':79, 'desc':'高品质 | 快来用！', },
    {'img':'https://img20.360buyimg.com/babel/s290x370_jfs/t1/169223/11/9002/236742/603f38feEa4a8d83e/4ace79eafcac855c.jpg!cc_290x370.webp', 'width':290, 'height':370, 'ava_tar':'https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500','name':'RNG丶Uzi', 'like':45, 'desc':'碧浪 Ariel 专业抗菌根源洁净香氛洗衣液13.6斤 杀菌除菌 家庭装套装机洗3KG*2瓶+200G*4袋 补充装 包装随机', },
  ];

  // 左侧一栏数据
  List<Widget> left_data = [];
  // 右侧一栏数据
  List<Widget> right_data = [];
  // 计算布局
_completeData(){
    for(var index = 0; index < listData.length; index++){
      if(index.isEven){
        if(int.parse(listData[index]['width'].toString()) < int.parse(listData[index]['height'].toString())){
          left_data.add(_createGridViewItem(height: 500, data:listData[index]));
        }else{
          left_data.add(_createGridViewItem(height:350, data:listData[index]));
        }
      }else{
        if(int.parse(listData[index]['width'].toString()) < int.parse(listData[index]['height'].toString())){
          right_data.add(_createGridViewItem(height: 500, data:listData[index]));
        }else{
          right_data.add(_createGridViewItem(height: 350, data:listData[index]));
        }
      }
    }
  }

// Widget布局
SafeArea(
      child:Scaffold(
        body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: Container(
            color: Color(0xffF7F7F7),
            padding: EdgeInsets.only(top:20),
            child: ListView(
              padding: EdgeInsets.only(top:0),
              children: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal:10, vertical: 10)),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: left_data
                        ),
                      ),
                      SizedBox(
                        width:10
                      ),
                      Expanded(
                        child: Column(
                          children: right_data
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        )
      )
    );
    
 _createGridViewItem({height, data}) {
    return Container(
      width:double.infinity,
      height: height,
      margin:EdgeInsets.only(bottom:10),
      color:Colors.white,
      child:Column(
        children: [
          Container(
            child:Image.network('${data['img']}', fit: BoxFit.fitWidth,),
          ),
          Expanded(
              child: Container(
            padding: EdgeInsets.symmetric(
                horizontal:20,
                vertical:10),
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: Column(
              mainAxisAlignment:
                  MainAxisAlignment.spaceAround,
              crossAxisAlignment:
                  CrossAxisAlignment.start,
              children: [
                RichText(
                    maxLines: 2,
                    overflow:TextOverflow.ellipsis,
                    text: TextSpan(children: [
                      TextSpan(
                          text:
                              '${data['desc']}',
                          style: TextStyle(
                              fontSize:24,
                              fontWeight:
                                  FontWeight.bold,
                              color: Color(
                                  0xff434343),
                              letterSpacing: .8)),
                    ])),
                Container(
                    padding: EdgeInsets.symmetric(
                        vertical: 0),
                    child: Row(
                      mainAxisAlignment:
                          MainAxisAlignment
                              .spaceBetween,
                      children: [
                        Container(
                          child: Row(
                            children: [
                              ImageRoud(
                                  '${data['ava_tar']}',50),
                              Container(
                                  margin: EdgeInsets.only(
                                      left: 10),
                                  child: Text(
                                      '${data['name']}',
                                      style: TextStyle(
                                          fontSize:22,
                                          color: Color(
                                              0xffC5C5C5)))),
                            ],
                          ),
                        ),
                        Container(
                            child: Row(
                          children: [
                            Container(
                              margin: EdgeInsets.only(
                                  right: 10),
                              child: Icon(
                                  IconData(0xe6f8,
                                      fontFamily:
                                          'myIcon'),
                                  color: Color(
                                      0xffD7433F),
                                  size:20),
                            ),
                            Container(
                              child: Text('${data['like']}',
                                  style: TextStyle(
                                      color: Color(
                                          0xffC9C9C9),
                                      fontSize:24)),
                            )
                          ],
                        ))
                      ],
                    )),
              ],
            ),
          ))
        ],
      )
    );
  }