1.SliverList介绍

CustomScrollView+SliverList组合使用其实就相当于是个ListView

2.SliverList属性

• delegate：SliverChildDelegate 系统提供个两个已经实现好的代理：SliverChildListDelegate/SliverChildBuilderDelegate

3.使用

  _mySliverAppBar() {
    return SliverAppBar(
      title: Text('SliverList'),
      expandedHeight: 250,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          ImageUrlConstant.imageUrl1,
          fit: BoxFit.cover,
        ),
        collapseMode: CollapseMode.parallax,
      ),
    );
  }

  _mySliverChildListDelegate() {
    return SliverChildListDelegate([
      Container(
        height: 80,
        color: Colors.primaries[0],
      ),
      Container(
        height: 80,
        color: Colors.primaries[1],
      ),
      Container(
        height: 80,
        color: Colors.primaries[2],
      ),
      Container(
        height: 80,
        color: Colors.primaries[3],
      ),
      Container(
        height: 80,
        color: Colors.primaries[4],
      ),
      Container(
        height: 80,
        color: Colors.primaries[5],
      ),
      Container(
        height: 80,
        color: Colors.primaries[6],
      ),
    ]);
  }

  _mySliverChildBuilderDelegate() {
    return SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      },
      childCount: 30,
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        _mySliverAppBar(),
        SliverList(
          delegate: _mySliverChildBuilderDelegate(),
          // delegate: _mySliverChildListDelegate(),
        )
      ],
    );
  }

如果我们将SliverAppBar去掉，CustomScrollView+SliverList就跟ListView是一个效果

<<meta charset="utf-8">

二.GridView介绍

1.GridView属性

• scrollDirection = Axis.vertical：滑动方向
• reverse = false：是否反响
• controller：ScrollController 滑动控制器
• primary：当内容不足以滚动时，是否支持滚动
• physics：控制用户滚动视图的交互
• shrinkWrap = false：滑动方向上是否允许最大允许高度
• padding：内边距
• gridDelegate：SliverGridDelegate
• cacheExtent：缓存
• children = const <Widget>[]：
• dragStartBehavior = DragStartBehavior.start：响应拖动的时机
• clipBehavior = Clip.hardEdge：超出内容的裁剪方式
• keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual：滑动组件键盘隐藏模式
• restorationId：滑动位置记忆标志

GridView的各项属性跟ListView几乎一样，这里就不再赘述，不了解的可以看一下：Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider
关于SliverGridDelegate，SliverChildDelegate在之前Flutter（73）：Sliver组件之SliverGrid中也讲解过了，也不再赘述了。

  _mySliverGridDelegateWithFixedCrossAxisCount() {
    return SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 5,
      childAspectRatio: 1.5,
    );
  }

  _myGridView() {
    return GridView(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image

2.GridView.builder属性

• gridDelegate：SliverGridDelegate：SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent
• itemBuilder：IndexedWidgetBuilder
• itemCount：item个数

  _myGridViewBuilder() {
    return GridView.builder(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      },
      itemCount: 5,
    );
  }

image

3.GridView.count属性

• crossAxisCount：次轴方向item数
• children = const <Widget>[]：

  _myGridViewCount() {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image

4.GridView.extent属性

• maxCrossAxisExtent: 次轴方向上item最大长度
• children:

  _myGridViewExtent() {
    return GridView.extent(
      maxCrossAxisExtent: 300,
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image

5.GridView.custom属性

• gridDelegate：SliverGridDelegate：SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent
• childrenDelegate：SliverChildDelegate：SliverChildListDelegate/SliverChildBuilderDelegate

  _myGridViewCustom() {
    return GridView.custom(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      childrenDelegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      }, childCount: 5),
    );
  }

image