Flutter StaggeredGridView如何实现瀑布流效果

这篇文章将为大家详细讲解有关Flutter StaggeredGridView如何实现瀑布流效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

在根目录pubspec.yaml文件中添加依赖

dependencies:      flutter_staggered_grid_view: 0.4.0

import 'dart:math';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';void main(List args) {  runApp(app());}class app extends StatelessWidget {  const app({Key key}) : super(key: key);  @override  Widget build(BuildContext context) {    return MaterialApp(      home: homebody(),    );  }}class homebody extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('StaggeredGridView'),      ),      body: Padding(        padding: const EdgeInsets.all(4),        child: StaggeredGridView.countBuilder(            shrinkWrap: true,            crossAxisCount: 4,            crossAxisSpacing: 4,            mainAxisSpacing: 4,            itemCount: 100,            itemBuilder: (context, index) {              return Container(                height:100+200*Random().nextDouble(),                  color: Colors.green,                  child: new Center(                    child: new CircleAvatar(                      backgroundColor: Colors.white,                      child: new Text('$index'),                    ),                  ));            },            staggeredTileBuilder: (index) => StaggeredTile.fit(1)),      ),    );  }}

效果如下：

关于"Flutter StaggeredGridView如何实现瀑布流效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。