Flutter组件——ListView和GridView

ListView组件

ListView是可滚动的列表组件，使用的范围非常广。

• 静态构建ListView

  我们直接使用ListView标准构造函数就可以构建了(只适合列表元素已经确定并且数目比较少的时候)。里面最重要的一个属性就是children，里面接受一个Widget数组，我们可以将需要的放置的组件放入数组里面。

• 动态构造ListView

  ListView的标准构造函数会将所有item一次性创建，而ListView.builder会创建滚动到屏幕上显示的item。

  ListView.builder其实是dart里面的一种可命名构造函数(直接理解为一种构造函数就好了)。还有这两种ListView.separated
  ListView.custom。

  我们直接来看builder命名构造函数的属性

  首先我们看一下源码

    ListView.builder({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    @required IndexedWidgetBuilder itemBuilder,
    int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  }) : childrenDelegate = SliverChildBuilderDelegate(
         itemBuilder,
         childCount: itemCount,
         addAutomaticKeepAlives: addAutomaticKeepAlives,
         addRepaintBoundaries: addRepaintBoundaries,
         addSemanticIndexes: addSemanticIndexes,
       ),
       super(
         key: key,
         scrollDirection: scrollDirection,
         reverse: reverse,
         controller: controller,
         primary: primary,
         physics: physics,
         shrinkWrap: shrinkWrap,
         padding: padding,
         cacheExtent: cacheExtent,
         semanticChildCount: semanticChildCount ?? itemCount,
         dragStartBehavior: dragStartBehavior,
       );

  构造函数后面的childrenDelegate和super是初始化列表，先只作了解。

  • itemBuilder

    这个属性是required的，他需要一个IndexedWidgetBuilder对象,我们查看源码发现他是一个方法，参数是上下文对象BuildContext和index。

    typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

所以这里面我们可以直接传进去一个方法，参数是上下文和index，需要返回一个Widget，我们这里直接可以使用匿名函数加上胖箭头表达式。

• itemCount

  这个属性是指定item(元素)的个数

• scrollDirection

  指定能滑动方向，接受一个Axis，其中可以设置horizontal或者vertical，默认为vertical(垂直方向)。

• itemExtent

  接受double类型参数，指定每个元素在滑动方向所占的高度值。

• padding

  设置内边距

GridView组件

我们首先看一下GridView常用的count命名构造函数

  GridView.count({
  Key key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required int crossAxisCount,
  double mainAxisSpacing = 0.0,
  double crossAxisSpacing = 0.0,
  double childAspectRatio = 1.0,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  bool addSemanticIndexes = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
  int semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
}) : gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: crossAxisCount,
       mainAxisSpacing: mainAxisSpacing,
       crossAxisSpacing: crossAxisSpacing,
       childAspectRatio: childAspectRatio,
     ),
     childrenDelegate = SliverChildListDelegate(
       children,
       addAutomaticKeepAlives: addAutomaticKeepAlives,
       addRepaintBoundaries: addRepaintBoundaries,
       addSemanticIndexes: addSemanticIndexes,
     ),
     super(
       key: key,
       scrollDirection: scrollDirection,
       reverse: reverse,
       controller: controller,
       primary: primary,
       physics: physics,
       shrinkWrap: shrinkWrap,
       padding: padding,
       cacheExtent: cacheExtent,
       semanticChildCount: semanticChildCount ?? children.length,
       dragStartBehavior: dragStartBehavior,
     );

其中有很多属性是和ListView的一样的

• reverse

  接受bool，是否沿反方向滚动

• controller

  控制child滚动时候的位置

• shrinkWrap

  滚动方向的滚动视图内容是否应该由正在查看的内容所决定。

• primary

  是否是与父节点的PrimaryScrollController所关联的主滚动视图。