Flutter（72）：Sliver组件之SliverList

Flutter教学目录持续更新中

Github源代码持续更新中

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

image.png

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

image.png

下一节：Sliver组件之SliverGrid

Flutter（73）：Sliver组件之SliverGrid

Flutter教学目录持续更新中

Github源代码持续更新中