Flutter-GridView使用总结

关注 https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识

GridView的几种使用方式

• GridView.count(@required int crossAxisCount)
• GridView.extent(@required double maxCrossAxisExtent)
• GridView(@required this.gridDelegate,List children)
• GridView.builder(@required this.gridDelegate,@required IndexedWidgetBuilder itemBuilder)
• GridView.custom(@required this.gridDelegate,@required this.childrenDelegate)

GridView.count(@required int crossAxisCount)

使用这种方式，必须要传的一个参数就是crossAxisCount，即交叉轴（默认是横轴）上Item的个数。

使用这种方式创建的GridView，交叉轴上的Item个数是固定的，并且Item的宽高不由自己决定，而是在交叉轴上均分，当然也可以通过mainAxisSpacing/
crossAxisSpacing来控制Item之间的间距。可以通过childAspectRatio控制Item的宽高比。

具体的使用方式可以查看我之前的文章GridView.count的使用

GridView.extent(@required double maxCrossAxisExtent)

这种方式用于创建交叉轴上Item最大能达到的尺寸的GridView。

其中maxCrossAxisExtent是必须传的，表示Item所能达到的最大的尺寸（宽或者高），比如屏幕宽为500px，maxCrossAxisExtent = 150,这个时候横轴上最多放置4个Item，因此每个Item的宽度为125px。

具体的使用方法可以参考我之前的文章GridView.extent的使用

GridView(@required this.gridDelegate,List children)

这种方式使用起来比之前的两种稍微麻烦一点，必须要传一个gridDelegate参数，属于SliverGridDelegate类型，当然框架已经为我们实现好了几个默认的girdDelegate实现类。

它的两个实现类为：

• SliverGridDelegateWithFixedCrossAxisCount
  与GridView.count等价
• SliverGridDelegateWithMaxCrossAxisExtent
  与GridView.extent等价

class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: GridView(
        primary: false,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        scrollDirection: Axis.horizontal,
        children: List.generate(
          100,
          (index) {
            return Image.network(
              IMGS[index % 8],
              fit: BoxFit.cover,
              colorBlendMode: BlendMode.colorBurn,
              color: Colors.white10,
            );
          },
        ),
      ),
    );
  }
}

GridView.builder(@required this.gridDelegate,@required IndexedWidgetBuilder itemBuilder)

与上面直接使用GridView的方式差不多，也是传入一个gridDelegate参数，然后再加上itemBuilder。

class GridViewBuilderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: GridView.builder(
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemBuilder: (context, index) {
          return Image.network(
            IMGS[index % 8],
            fit: BoxFit.cover,
            colorBlendMode: BlendMode.colorBurn,
            color: Colors.white10,
          );
        },
        itemCount: 100,
      ),
    );
  }
}

GridView.custom(@required this.gridDelegate,@required this.childrenDelegate)

使用方式与GridView.builder ,与直接使用GridView方式无异。

class GridViewCustomDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10),
        childrenDelegate: SliverChildListDelegate(
          List.generate(100, (index) {
            return Image.network(
              IMGS[index % 8],
              fit: BoxFit.cover,
              colorBlendMode: BlendMode.colorBurn,
              color: Colors.white10,
            );
          }),
        ),
      ),
    );
  }
}

总结

简单使用可以直接使用GridView.count,或者GridView.extent。
如果需要自定义一些效果，可以直接使用GridView或者GridView.builder，GridView.custom。