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。
@H_502_50@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方式无异。
@H_502_50@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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
