1.构造函数
*GridView一共有五个构造函数:GridView(),GridView.builder(),GridView.count,GridView.extent()和GridView.custom.其中GridView.builder()用于item比较多或者可上拉加载的情况,其它四个构造函数用于item比较少的,一次性可加载完的情况。
*GridView.custom()是一个自定义的GridView,允许完全控制GridView的布局和子widget的排列方式,可定制列数,行数,子widget的大小和间距等属性。但是会导致性能问题。
2.主要参数
GridView({
Key key,
Axis scrollDirection = Axis.vertical,//滚动方向
bool reverse = false,//是否反向滚动
ScrollController controller,//滚动控制器,控制滚动行为。
ScrollPhysics physics,//滚动行为
bool shrinkWrap = false,是否自动缩小gridview的大小以适应其子widget。
EdgeInsetsGeometry padding,//内边距
@required this.gridDelegate,//网格布局方式。
double cacheExtent,//缓存区域大小。可以使用该属性来提高gridview的性能。
List<Widget> children = const <Widget>[],
})
gridDelegate的类型是SliverGridDelegate抽象类,实现类有两个: *SliverGridDelegateWithFixedCrossAxisCount:用于固定列表的场景;
SliverGridDelegateWithFixedCrossAxisCount({
@required this.crossAxisCount,//列数
this.mainAxisSpacing = 0.0,//主轴方向上的空隙间隔
this.crossAxisSpacing = 0.0,//次轴方向上的空隙间隔
this.childAspectRatio = 1.0,//item宽高比例
})
*SliverGridDelegateWithMaxCrossAxisExtent:用于子元素有最大宽度限制的场景。
SliverGridDelegateWithMaxCrossAxisExtent({
@required this.maxCrossAxisExtent,//item最大宽度,根据宽度计算可显示的列数。
this.mainAxisSpacing = 0.0,
this.crossAxisSpacing = 0.0,
this.childAspectRatio = 1.0,
})
*ScrollPhysics属性有四种:
BouncingScrollPhysics:允许滚动超出边界,但之后内容会反弹回来。
ClampingScrollPhysics:防止滚动超出边界,夹住。
AlwaysScrollableScrollPhysics:始终响应用户的滚动。
NeverScrollableScrollPhysics:不响应用户的滚动。
3.使用实例
1.gridview.count()
GridView.count(
crossAxisCount: 2,
childAspectRatio: 2.0,
children: List.generate(10, (index) {
return Container(
child: Text('Item $index'),
);
}),
)
2.gridview.builder()
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Text('Item $index'),
);
},
)