参考: GridView
使用
GridView.count
GridView.count(
//横轴三个子widget
crossAxisCount: 3,
//宽高比为1时,子widget
childAspectRatio: 1.0,
children: <Widget>[
Icon(Icons.ac_unit),
Icon(Icons.airport_shuttle),
Icon(Icons.all_inclusive),
Icon(Icons.beach_access),
Icon(Icons.cake),
Icon(Icons.free_breakfast),
],
);
GridView.extent
GridView.extent(
// 子元素在横轴上的最大长度
maxCrossAxisExtent: 120.0,
// 子元素在横轴长度和主轴长度的比例
childAspectRatio: 2.0,
children: <Widget>[
Icon(Icons.ac_unit),
Icon(Icons.airport_shuttle),
Icon(Icons.all_inclusive),
Icon(Icons.beach_access),
Icon(Icons.cake),
Icon(Icons.free_breakfast),
],
);
GridView.builder
实现源码:
class GridViewPage extends StatefulWidget {
@override
_GridViewPageState createState() {
return _GridViewPageState();
}
}
class _GridViewPageState extends State<GridViewPage> {
List<IconData> _icons = []; //保存Icon数据
@override
void initState() {
// 初始化数据
super.initState();
_retrieveIcons();
}
//模拟异步获取数据
void _retrieveIcons() {
Future.delayed(Duration(milliseconds: 200)).then((e) {
setState(() {
_icons.addAll([
Icons.ac_unit,
Icons.airport_shuttle,
Icons.all_inclusive,
Icons.beach_access, Icons.cake,
Icons.free_breakfast
]);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GridView'),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, //每行三列
childAspectRatio: 1.0 //显示区域宽高相等
),
itemCount: _icons.length,
itemBuilder: (context, index) {
//如果显示到最后一个并且Icon总数小于200时继续获取数据
if (index == _icons.length - 1 && _icons.length < 200) {
_retrieveIcons();
}
return Icon(_icons[index]);
}
)
);
}
}
第三方库推荐
- 引入库
dependencies:
flutter_staggered_grid_view: ^0.3.0
- 使用
(源码过长,为了不影响阅读体验,请移步: Flutter-WanAndroid 查看)
瀑布流效果
完~