美文网首页
flutter 瀑布流flutter_staggered_gri

flutter 瀑布流flutter_staggered_gri

作者: 晓函 | 来源:发表于2021-12-11 10:43 被阅读0次

    flutter_staggered_grid_view使用5.0以上版本

    import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
    
      Widget waterFallList(){
    
       double spacing=6;
        return MasonryGridView.count(
          crossAxisCount: 2,
          itemCount: listThings.length,
          itemBuilder: (BuildContext context, int index) =>
           //Container(color: Colors.blue,height:index.isEven?200:250),
           ItemCard(thing:listThings[index]),
          mainAxisSpacing: spacing,
          crossAxisSpacing: spacing,
        );
    
    
      }
    
    

    如果要在外面配合SingleChildScrollView让页面滚动,使用physics、shrinkWrap参数即可

    
    var waterFallList =    double spacing=6;
        return MasonryGridView.count(
          crossAxisCount: 2,
          itemCount: listThings.length,
          itemBuilder: (BuildContext context, int index) =>
           //Container(color: Colors.blue,height:index.isEven?200:250),
           ItemCard(thing:listThings[index]),
          mainAxisSpacing: spacing,
          crossAxisSpacing: spacing,
          physics: const NeverScrollableScrollPhysics(),//本身不滚动,让外面的singlescrollview来滚动
          shrinkWrap:true,//收缩,让外面的singlescrollview来滚动
        );
    
    var scrollview = SingleChildScrollView(child:Column(children: [Text('最新列表'),waterFallList]));
    
    //最外层还能加上EasyRefresh
    return EasyRefresh(child: scrollView);
    
    
    image.png

    相关文章

      网友评论

          本文标题:flutter 瀑布流flutter_staggered_gri

          本文链接:https://www.haomeiwen.com/subject/wxdkfrtx.html