flutter-gridview笔记

52 阅读1分钟

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'),
    );
  },
)

4.GridView 自定义宽高