flutter 瀑布流布局实现

半身风雪

已于 2022-05-23 19:20:03 修改

阅读量590

点赞数

分类专栏： Flutter 进阶文章标签： flutter

于 2021-11-26 11:11:12 首次发布

本文链接：https://blog.youkuaiyun.com/u010755471/article/details/121555713

版权

Flutter 进阶专栏收录该内容

48 篇文章

订阅专栏

本文展示了如何在Flutter中使用flutter_staggered_grid_view插件创建瀑布流布局，并结合cached_network_image插件实现网络图片的缓存加载。通过设置不同单元格的宽度和高度，创建了一个动态的、响应式的界面，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

瀑布流插件

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,
        ),
      ),
    );
  }