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

分手后的思念是犯贱 2023-07-16 15:59 508阅读 0赞

### 文章目录 ###

*   *   *  使用
         *   *  GridView.count
             *  GridView.extent
             *  GridView.builder
         *  第三方库推荐
         *   *  瀑布流效果

参考： [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),
      ],
    );

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

#### 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),
       ],
     );

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

#### GridView.builder ####

![在这里插入图片描述][20200319003520414.gif]

实现源码：

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

### 第三方库推荐 ###

*  [flutter\_staggered\_grid\_view 0.3.0][flutter_staggered_grid_view 0.3.0]

1.  引入库

dependencies:
      flutter_staggered_grid_view: ^0.3.0

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

#### 瀑布流效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]

完~

[GridView]: https://book.flutterchina.club/chapter6/gridview.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/c4c2ce9a90ab49ee95598c3c04b24503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/77018f9211154c89a6879aeb25561575.png
[20200319003520414.gif]: /images/20230528/84c40113302a48ea8af0edf171464730.png
[flutter_staggered_grid_view 0.3.0]: https://pub.flutter-io.cn/packages/flutter_staggered_grid_view
[Flutter-WanAndroid]: https://github.com/dongxi346/Flutter-WanAndroid/blob/master/lib/views/photo_page/photo_page.dart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/c8251e6b255242ae8a6bbc02062b51bc.png