Flutter 网格列表 GridView 及 瀑布流 示例

参考： GridView

使用

GridView.count

GridView.count( 
	//横轴三个子widget
  crossAxisCount: 3,
  //宽高比为1时，子widget
  childAspectRatio: 1.0,
  children: [
    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: [
     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 {

  List _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]);
            }
        )
    );
  }
}

第三方库推荐

• flutter_staggered_grid_view 0.3.0

1. 引入库

dependencies:
  flutter_staggered_grid_view: ^0.3.0

2. 使用
   （源码过长，为了不影响阅读体验，请移步: Flutter-WanAndroid 查看）

瀑布流效果

完~