flutter组件SliverList&SliverGrid

SliverList和SliverGrid这个虽然在项目中用的不太多，但是简单介绍一下大家应该就知道该怎么用了。

示例代码：

import 'package:flutter/material.dart';

class SliverListScreen extends StatefulWidget {
  SliverListScreen({Key key}) : super(key: key);

  @override
  _SliverListScreenState createState() => _SliverListScreenState();
}

class _SliverListScreenState extends State<SliverListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sliver List')),
      body: CustomScrollView(
        slivers:[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 44,
                  color: Colors.primaries[(index % 18)],
                );
              },
              childCount: 10
            )
          ),
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                 return Container(
                   color: Colors.primaries[(index % 18)],
                 );
              },
              childCount: 21
            ), 
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 6,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 1.5
            )
          )
        ]
      ),
    );
  }
}

效果图如下：

SliverList&SliverGrid.jpg

看了这些之后是不是有两个疑问：

1. 是不是觉得呈现的效果可以和ListView&GridView很像？实际上ListView&GridView是
   SliverList&SliverGrid的一个子集。也就是ListView&GridView抽象程度更高。
2. 为什么有ListView&GridView还需要SliverList&SliverGrid？因为在某些使用场景需要，例如在使用SliverAppBar和需要混用list&grid布局等场景需要使用SliverList&SliverGrid。

SliverList&SliverGrid在使用的是否一定要结合CustomScrollView使用。
SliverList的使用很简单，没有什么额外的属性需要解释，每一个item自己定义就好了。

SliverGrid的delegate也同样不赘述了。

SliverGrid的gridDelegate属性，flutter提供了两个类使用SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

• SliverGridDelegateWithFixedCrossAxisCount 指的是横向的item的数量固定，即item的大小自适应。
• SliverGridDelegateWithMaxCrossAxisExtent指的是item宽度的最大值，如果grid的宽度是500，设置的item最大宽度（SliverGridDelegateWithMaxCrossAxisExtent）是150，那呈现出来的每个item的宽度就是125。
• 关于两个类其他的属性都是一样的，都是mainAxisSpacing，crossAxisSpacing和childAspectRatio，都是很好理解的。把上面的代码示例复制改动一下，就知道指的是什么，就不再赘述了。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。