【Flutter】GridView的使用之GridView.count

想了解更多关于Flutter的知识，可以关注：
https://github.com/jiangkang/flutter-system
https://jiangkang.tech

GridView属于一种比较常见的布局，这里有必要说一下他的常见用法。

简单使用

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

最为常用的用法就是上面这种，使用GridView.count创建GridView。

其中主要的属性有：

• crossAxisCount：表示交叉轴方向的Item个数
  crossAxisCount = 3 时：
  
  • scrollDirection : 用来指定滚动的方向，有两种，横向和纵向，默认为纵向，因此默认情况下纵轴是主轴，横轴是交叉轴。
    scrollDirection = Axis.horizontal时：
    
  • mainAxisSpacing、crossAxisSpacing：主轴，交叉轴方向上Item之间的间距
  • childAspectRatio ：Item的宽高比，由于GridView的Item宽高并不由Item自身控制，默认情况下，交叉轴是横轴，因此Item的宽度均分屏幕宽度，这个时候设置childAspectRatio可以改变Item的高度，反之亦然；
    childAspectRatio = 0.5的时候，宽度是高度的一半：
    
  • primary : 当纵轴是主轴的时候，默认为true；为true时，即使没有足够的控件去滚动，控件依旧是可滚动的，如果为false，则只有在内容足够滚动的时候才可以滚动。