[移动开发]Flutter瀑布流列表

1.导入库：flutter_staggered_grid_view: ^0.4.0
2.使用代码：

class _MyHomePage extends State<MyHomePage>{
  List imgList = [
    "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg",
    "http://yanxuan.nosdn.127.net/8b30eeb17c831eba08b97bdcb4c46a8e.png",
    "http://yanxuan.nosdn.127.net/a196b367f23ccfd8205b6da647c62b84.png",
    "http://yanxuan.nosdn.127.net/149dfa87a7324e184c5526ead81de9ad.png",
    "http://yanxuan.nosdn.127.net/88dc5d80c6f84102f003ecd69c86e1cf.png",
    "http://yanxuan.nosdn.127.net/8b9328496990357033d4259fda250679.png",
    "http://yanxuan.nosdn.127.net/c39d54c06a71b4b61b6092a0d31f2335.png",
    "http://yanxuan.nosdn.127.net/ee92704f3b8323905b51fc647823e6e5.png",
    "http://yanxuan.nosdn.127.net/e564410546a11ddceb5a82bfce8da43d.png",
    "http://yanxuan.nosdn.127.net/56f4b4753392d27c0c2ccceeb579ed6f.png",
    "http://yanxuan.nosdn.127.net/6a54ccc389afb2459b163245bbb2c978.png",
  ];
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: false);
        return Scaffold(
          body: Container(
            padding:  EdgeInsets.only(top: ScreenUtil().statusBarHeight),
            child:new StaggeredGridView.countBuilder(
              padding: const EdgeInsets.all(8.0),
              crossAxisCount: 4,                 //横向分为四份
              itemCount: imgList.length,
              itemBuilder: (context,i){return itemWidget(i);},
              //StaggeredTile.count里的参数是定宽高用的：横向占的份数，竖向占的份数
              staggeredTileBuilder: (int index)=>new StaggeredTile.count(2, index==0?2.5:3),
              mainAxisSpacing: 8.0,  //item间的横向间隔
              crossAxisSpacing: 8.0,//item间的竖向间隔
            ),
          )
        );
  }

  Widget itemWidget(int i) {
    String imagPath = imgList[i];
    return new Material(
      elevation: 8.0,
      borderRadius: new BorderRadius.all(new Radius.circular(8.0)),
      child: new InkWell(
        onTap: (){
          Navigator.push(context, new MaterialPageRoute(builder: (context){return new FullScreenImagePage(tag:imagPath,imageurl:imagPath);}));
        },
        child: new Hero(
          tag: imagPath,
          child: CachedNetworkImage(
            imageUrl: imagPath,
            fit: BoxFit.fitWidth,
          ),
        ),
      ),
    );
  }

}
class FullScreenImagePage extends StatefulWidget{
  final String imageurl;
  final String tag;
  FullScreenImagePage({Key key,this.imageurl,this.tag}):super(key: key);
  @override
  State<StatefulWidget> createState() {
  return _FullScreenImagePage();
  }
}
class _FullScreenImagePage extends State<FullScreenImagePage>{
  @override
  Widget build(BuildContext context) {
              return Scaffold(
                body: Container(
                  margin: EdgeInsets.all(20.0),
                  child: Hero(
                    tag: widget.tag,
                    child: CachedNetworkImage(imageUrl:widget.imageurl,fit: BoxFit.fitWidth,),
                  ),
                ),
              );
  }

}

这里使用InkWell是为了点击的水波纹效果，使用Hero是为了跳转到第二个界面时和退回第一个界面时的转场效果。