iOS-Flutter 可滚动组件-GridView

191 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 30 天,点击查看活动详情

GridView

一个网格布局的组件,类似于iOS的UICollectionView

构造函数

GridView({
//公共属性
    Key? key,
    //默认滚动方向
    Axis scrollDirection = Axis.vertical,
    //是否滑动反向
    bool reverse = false,
    //控制器
    ScrollController? controller,
    //True内容不足够填充时是有滚动反馈,false表示只有内容超出控件大小才有滚动反馈
    bool? primary,
    //滑动响应事件处理
    ScrollPhysics? physics,
    //false代表布局方向上尽可能多的占用空间,此时iOS下拉才有弹簧效果。true表示根据widget的大小来确定GridView的大小
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required this.gridDelegate,  //下面解释
    bool addAutomaticKeepAlives = true,
    //绘制边界
    bool addRepaintBoundaries = true,
    double? cacheExtent, //预渲染区长度
    List<Widget> children = const <Widget>[],
    ...
  })

和List大多用法都类似,需要注意的是gridDelegate参数,该参数类型是SliverGridDelegate,作用是控制GridView子组件的排列,类似于UICollectionView中的UICollectionLayout。

SliverGridDelegate是一个抽象类,定义了GridView的Layout接口,子类需要实现它们具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类: