Flutter StaggeredGridView实现瀑布流效果
更新时间:2022年03月23日 09:04:39 作者:GalenWu
这篇文章主要为大家详细介绍了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<String> 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)),
),
);
}
}效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android自定义WaveProgressView实现水波纹加载需求
这篇文章主要为大家详细介绍了Android自定义WaveProgressView实现水波纹加载需求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-09-09
Android Kotlin 高阶函数详解及其在协程中的应用小结
高阶函数是 Kotlin 中的一个重要特性,它能够将函数作为一等公民(First-Class Citizen),使得代码更加简洁、灵活和可读,本文给大家介绍Android Kotlin 高阶函数详解及其在协程中的应用,感兴趣的朋友一起看看吧2025-03-03
Android实现带有边框的ListView和item的方法
这篇文章主要介绍了Android实现带有边框的ListView和item的方法,结合实例形式分析了ListView和item四周添加边框的实现步骤与相关技巧,需要的朋友可以参考下2016-07-07
详解Android Studio3.5及使用AndroidX的一些坑
这篇文章主要介绍了详解Android Studio3.5及使用AndroidX的一些坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-11-11


最新评论