flutter 瀑布流flutter_staggered_gri

2021-12-11  本文已影响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
上一篇 下一篇

猜你喜欢

热点阅读