flutter 瀑布流布局实现

瀑布流插件

flutter_staggered_grid_view: 0.4.1

网络缓存图片插件

cached_network_image: ^3.1.0+1

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('瀑布流'),
        centerTitle: true,
      ),
      body: Center(
        child: StaggeredGridView.countBuilder(
          // 横轴单元格数量
          crossAxisCount: 4,
          // 元素的数量
          itemCount: 20,
          // cell 单元格的样式
          itemBuilder: (context, index) {
            return Material(
              elevation: 8.0,
              borderRadius: BorderRadius.all(Radius.circular(8)),
              child: CachedNetworkImage(
                imageUrl:
                    'https://lupic.cdn.bcebos.com/20191203/3016244278_14.jpg',
                imageBuilder: (context, imageProvider) => Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
            );
          },
          //第一个参数是横轴所占的单元数，第二个参数是主轴所占的单元数
          staggeredTileBuilder: (index) {
            return StaggeredTile.count(2, index.isEven ? 2 : 1);
          },
          padding: EdgeInsets.all(8),
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
        ),
      ),
    );
  }